【『レスポンシブデザイン』をソネットブログに導入 それが私の急務】 [ブログ運営]
ソネットブログを運営されている方は『レスポンシブ』という言葉をご存じでしょうか？
私は自分のブログを『レスポンシブデザイン』にすることが急務だと感じています。
『レスポンシブデザイン』とは『PC・タブレット・スマートフォンなど大きさの異なるディスプレイのデバイスから閲覧しても最適化されたレイアウトで閲覧できるWebサイトのデザイン』のことです。
書きかけの記事を抱えている状況もありながら今回この記事でこうしてお伝えするのは、私のブログ運営上の急務と感じるに至り全力でこれに取り組む近況をお伝えしたいと思ったからです。
ブログを運営している方、特にソネットブログを運営されている『同志』には是非読んでいただきたいなって思っております。
⇒ 【ガラケー好きでスマホなんて欲しくなかった私が『 iPhone5c 』 を手にしたワケとは】
購入するまで自分のブログがスマホでどのように閲覧されているのか全く知りませんでした。
見てみるととても見づらいということが良く分かりました。
それまでは記事の体裁はパソコンの画面で確認して見易さを追求してきました。その結果、スマホではどんどん体裁の悪いことになっていることに愕然としました。
画像や表が横にはみ出しているし、文字も折り返しをしないので『縦持ち』で閲覧していると『横スクロール』をしないと文章を読むことができません。
また私は文脈から１センテンスの文章でもあえて途中で改行して読み易くしてきました。
しかもあまり文章が込み合っているのが好きではないので改行した場合には必ず１行空白行を挿入していましたので１文の中で改行された文章はとても『見栄え』が悪いものになってしまっていました。
ただ私はＷｅｂデザインに関して知識がほとんどありません。専門知識を学ぶには時間がかかりそうなことが予想されました。そこでまずは自分でわかる範囲で改善を試みました。
まず改行ごとに行間に空白行を入れる書き方を止めました。
本当は過去記事の文章の全てを書き換えたいところですがすでに５００を超えた記事全部の文章を修正していくのは時間が足りないので比較的今もアクセスがある記事に限定して修正をしました。
でもちょっと問題もあります。『行間の空白行』は『見栄え』を意識してやってきたことなので、行を詰めてしまうととても文章がきちきちに詰まった感じで自分の中では気になるポイントでした。
ブログの体裁を変更する際の『html編集』など専門知識を必要とする領域には手を出すのに躊躇していたのですが、今回発生した課題に対処するため記事の表示スペースの『行間』を広げるというブログ全体の体裁の変更を行うことにしました。
ブログデザインを自分で出来る方にとっては些細なことでしょうが、記事を書くこと以外しか知らない私の様なただのブログ運営者には結構ハードルの高いことなんですね。
重い腰を上げてネットでいろいろ検索してその方法を調べてみるとそんなに難しいことでもなさそうでした。思い切って試してみたら割と簡単にできました。
ついでに前から気になっていた記事の『フォントが小さくて読みにくい』のも同時に改善できました。
フォントを大きくしたせいで過去記事の体裁がいろいろと崩れてしまい、こちらも閲覧頻度の高い過去記事の修正作業に追われることになりましたが…。(;^ω^)
でも今も直し切れていない記事が多数存在するのでそのような記事をお読みの方には本当に申し訳なく思っております。<(_ _)>
最近、当ブログの更新頻度もすっかり落ちてしまいましたが、実は毎日更新していた時以上にブログ運営に時間をかけているんです。過去記事【ブログって続けると愛着が湧くもんですね…】でもお伝えしましたが、私はブログ運営というものがとても『性に合っている』ようです。ブログ、とっても好きなんです。
ですから自分のブログが少しでも見栄えが良くなってクォリティが上がったって思えるとスゴク嬉しいんです。自己満足なんですがブログの継続モチベーションにもつながるので私の中では結構大事なところなんですね。
別に体裁のせいではないと思いますが、閲覧される回数も日に日に増えてきて先日はソネットのアクセス解析データで累計２００万ＰＶも超え、１０万ＰＶを超える記事もできて、１日に１,０００人以上の方がこのブログにご訪問下さり私のモチベーションはいい感じで向上しています。
とても気持ち悪いなぁ～って思いながら時々気が向くとネットで調べたりもしていたのですがなかなか簡単にできそうな記事に出会うことできません。
私は記事中で使うタグもほとんど知らずに記事を書いていますので、必要に応じてタグの使い方などもネットで調べながら『恐る恐る』使い始める、そんな感じのリテラシーの低いブロガーです。ちょっとオシャレな体裁のデザインにしたかったり、今回の課題になっているような大きな体裁の変更などをしようと思って情報を仕入れようとすると必ずと言っていいほどぶつかる言葉があります。
『ＣＳＳ』／『スタイルシート』
これが使えるようになると飛躍的にブログのデザインの幅が広がる、そんなことがおぼろげにわかるのですが、いざ導入しようと考えてもどうしていいかわからない…。
何度も挑戦しようとして勉強をしてみてもどうもダメでした。まぁ、勉強と言っても本１冊を読み込むとかではなく、ネットの記事をつまみ読みする程度なんですけどね。(;^ω^)
私の中でブログは好きなものではあるのですが、『仕事』にはしたくない、そんな線引きがあります。勉強も苦痛にならない程度で済むことだけにチャレンジする、それが私のブログに対する取り組み方です。
『ＣＳＳ』は私のこのブログの取り組み方の境界線を越えたところにあるんですよね。
私の中では常にスマホ閲覧の不自由さのあるブログを運営しているという『気持ち悪さ』を抱えながら、でも、記事も引き続き書き続けたいという葛藤の中にありました。
そして、そんな私に立ちはだかる高い『ＣＳＳ』という壁。
そんな悶々とした日々を過ごしていたのですが、とうとう重い腰を上げて本格的にスマホ閲覧画面の大改革に取り組もうと決めました。
私の最も大きなブログ執筆のモチベーションは『記事が沢山の方に読まれること』です。
私はあまりＳＥＯ対策には熱心な方ではありません。沢山の方に読まれることを目標にしていながらもＩＴスキルを必要とする方法はほとんど試していません。
しかしながら閲覧データを見ると既に私のブログも半数以上がモバイルからの閲覧になっていて、さすがに『ＩＴリテラシーの低いオッサンなのでごめんなさい』では訪問して下さる方々に申し訳ないと思ったことがＣＳＳという壁を登ろうとした最も大きなきっかけです。
私はブログ閲覧データの解析にソネットブログが用意しているもの以外にグーグルアナリティクスを利用していますが、最近グーグルから『お前のブログはモバイル閲覧に重要な問題を抱えているから早急に対処するように』というお達しまで頂き、これはもうほっておけないなという感じでもあったんですね。
そのため最近は『レスポンシブデザイン』についてかなりネットで勉強してきました。
当然のように『ＣＳＳ 』の言葉が頻発する記事ばかりで実際に導入する具体的な方法までたどり着けませんでした。しかし何度も勉強してきては挫折した私の知識の断片と新しい情報を組み合わせてソネットブログにＣＳＳを導入する方法を理解することができました。
そしてＣＳＳを利用したレスポンシブデザインを私にブログに導入する方法も見えてきました。
そんな時、こんな記事に出会ったんです。
その記事によると『Googleが、ウェブサイトがモバイルフレンドリーかどうかを、4月21日からモバイル検索でのランキング指標に使用する』ということです。
実際にグーグルのサイトを見てみると詳しく書いてありました。
検索結果をもっとモバイル フレンドリーに
少しづつ育て上げてきたブログがやっと安定したアクセスを確保してきたのに、これは由々しきことです。
私のブログに対するモチベーションは自分の書いた記事が沢山の方に読まれることです。
このブログは検索エンジン流入がほとんどです。
Yahooの検索エンジンもグーグルの検索ロジックを採用している今となってはグーグルの検索指標の変更は私のブログの運営にも大きく影響します。
ということで、私の中でブログを『レスポンシブデザイン』にするというミッションはその緊急性を増したと捉えています。
もしうまくこのミッションに対処できたらこのブログでもご紹介したいと思います。
ブログデザインの知識に乏しい人間にとってはひとつひとつの内容が理解できても、実際に自分のブログにどうやって適用するのかがまったくわからないのが本当に歯がゆいです。
ネット上では親切な方が色々とブログの小技を親切丁寧に解説してくれていて助かっています。
でもそんな親切丁寧なアドバイスも具体的な行動に至らないこともよくあります。
例えば
『このＣＳＳの記述をコピペしてご利用下さい』
なんて書いてあったりするのですが、私にとっては、『それってどこに貼り付ければいいの？』って段階でつまづきます。それくらいわからないんです。(;^ω^)
きっと私と同じようにブログデザインの変更を試みて挫折している方って多いんじゃないかなって思いますので、もし上手くいったら同じように悩みを持っているソネットブログオーナーにも適用できるような説明が出来たらいいなって思っています。
しかしまだ対処が不十分でうまくいっていません。
表（テーブルタグ）を記事の中に使用している場合にうまくいかないようです。
また図（イラスト：イメージタグ）や動画の埋め込み（iframeタグ）などは記事内の記述を変えないといけないのでかなりの記事内の記述も変更を並行的に進めないと求めているレスポンシブなブログは完成できないようです。
記事内で採用している表やイラストなどの要素にすべて対応できる状態になったら過去記事の記述変更作業をしようと考えています。
そのため現在は変わっていないどころか中途半端な状態で場合によっては以前以上に見栄えが悪くなっているかもしれません。
どうかしばらくご辛抱下さい。
もしソネブロ（ソネットブログ：so-net ブログ）オーナーの方ですでにレスポンシブデザイン導入をお済ませの方がいらっしゃいましたら導入時の情報や有効な記事のリンクなどをコメント欄でお知らせ頂けると大変うれしいです。
よろしくお願いします。<(_ _)>
最後にブログ運営を楽しんでいる皆様の更なる発展をお祈り申し上げます。
そして当ブログをご訪問下さり記事をお読み頂いた方に感謝申し上げます。
<(_ _)>
今後の当ブログの展開を見守って頂けたらこの上なく嬉しく思っておりますので、よろしくお願いします。
私は自分のブログを『レスポンシブデザイン』にすることが急務だと感じています。
『レスポンシブデザイン』とは『PC・タブレット・スマートフォンなど大きさの異なるディスプレイのデバイスから閲覧しても最適化されたレイアウトで閲覧できるWebサイトのデザイン』のことです。
書きかけの記事を抱えている状況もありながら今回この記事でこうしてお伝えするのは、私のブログ運営上の急務と感じるに至り全力でこれに取り組む近況をお伝えしたいと思ったからです。
ブログを運営している方、特にソネットブログを運営されている『同志』には是非読んでいただきたいなって思っております。
この記事の目次
スマホで閲覧するととても読みづらい私のブログ
スマホ閲覧でも綺麗に見えるブログへと改善を試みた私
そんな私に立ちはだかるのは『ＣＳＳ』という壁
「そこに壁がある ならば登ろう！」ＣＳＳに挑む！
グーグルの検索指標にレスポンシブデザインであることが取り入れられた
当ブログはレスポンシブデザイン導入モードに突入します
レスポンシブデザイン導入 進捗状況（２０１５年４月４日現在）
貴重なご意見 お待ちしております
スマホで閲覧するととても読みづらい私のブログ
私がスマホを購入したのは世間の購入トレンドから比べると随分後になってからでした。⇒ 【ガラケー好きでスマホなんて欲しくなかった私が『 iPhone5c 』 を手にしたワケとは】
購入するまで自分のブログがスマホでどのように閲覧されているのか全く知りませんでした。
見てみるととても見づらいということが良く分かりました。
それまでは記事の体裁はパソコンの画面で確認して見易さを追求してきました。その結果、スマホではどんどん体裁の悪いことになっていることに愕然としました。
画像や表が横にはみ出しているし、文字も折り返しをしないので『縦持ち』で閲覧していると『横スクロール』をしないと文章を読むことができません。
また私は文脈から１センテンスの文章でもあえて途中で改行して読み易くしてきました。
しかもあまり文章が込み合っているのが好きではないので改行した場合には必ず１行空白行を挿入していましたので１文の中で改行された文章はとても『見栄え』が悪いものになってしまっていました。
スマホ閲覧でも綺麗に見えるブログへと改善を試みた私
スマホを持っていない頃はせっかくお越し頂いても見にくいブログで申し訳ないな、と思いながらも自分で閲覧状況を確認できないので仕方ない、と割り切っていたのですが、スマホを購入して自分でその状況を見るにつけ何とか克服したいと思うようになりました。ただ私はＷｅｂデザインに関して知識がほとんどありません。専門知識を学ぶには時間がかかりそうなことが予想されました。そこでまずは自分でわかる範囲で改善を試みました。
まず改行ごとに行間に空白行を入れる書き方を止めました。
本当は過去記事の文章の全てを書き換えたいところですがすでに５００を超えた記事全部の文章を修正していくのは時間が足りないので比較的今もアクセスがある記事に限定して修正をしました。
でもちょっと問題もあります。『行間の空白行』は『見栄え』を意識してやってきたことなので、行を詰めてしまうととても文章がきちきちに詰まった感じで自分の中では気になるポイントでした。
ブログの体裁を変更する際の『html編集』など専門知識を必要とする領域には手を出すのに躊躇していたのですが、今回発生した課題に対処するため記事の表示スペースの『行間』を広げるというブログ全体の体裁の変更を行うことにしました。
ブログデザインを自分で出来る方にとっては些細なことでしょうが、記事を書くこと以外しか知らない私の様なただのブログ運営者には結構ハードルの高いことなんですね。
重い腰を上げてネットでいろいろ検索してその方法を調べてみるとそんなに難しいことでもなさそうでした。思い切って試してみたら割と簡単にできました。
ついでに前から気になっていた記事の『フォントが小さくて読みにくい』のも同時に改善できました。
フォントを大きくしたせいで過去記事の体裁がいろいろと崩れてしまい、こちらも閲覧頻度の高い過去記事の修正作業に追われることになりましたが…。(;^ω^)
でも今も直し切れていない記事が多数存在するのでそのような記事をお読みの方には本当に申し訳なく思っております。<(_ _)>
最近、当ブログの更新頻度もすっかり落ちてしまいましたが、実は毎日更新していた時以上にブログ運営に時間をかけているんです。過去記事【ブログって続けると愛着が湧くもんですね…】でもお伝えしましたが、私はブログ運営というものがとても『性に合っている』ようです。ブログ、とっても好きなんです。
ですから自分のブログが少しでも見栄えが良くなってクォリティが上がったって思えるとスゴク嬉しいんです。自己満足なんですがブログの継続モチベーションにもつながるので私の中では結構大事なところなんですね。
別に体裁のせいではないと思いますが、閲覧される回数も日に日に増えてきて先日はソネットのアクセス解析データで累計２００万ＰＶも超え、１０万ＰＶを超える記事もできて、１日に１,０００人以上の方がこのブログにご訪問下さり私のモチベーションはいい感じで向上しています。
そんな私に立ちはだかるのは『ＣＳＳ』という壁
さて、とりあえず記事の文字の大きさが大きくなって行間が『詰め詰め』で無くなったのには満足できた私ですが、相変わらずスマホでの『横スクロール問題』は解決できていません。とても気持ち悪いなぁ～って思いながら時々気が向くとネットで調べたりもしていたのですがなかなか簡単にできそうな記事に出会うことできません。
私は記事中で使うタグもほとんど知らずに記事を書いていますので、必要に応じてタグの使い方などもネットで調べながら『恐る恐る』使い始める、そんな感じのリテラシーの低いブロガーです。ちょっとオシャレな体裁のデザインにしたかったり、今回の課題になっているような大きな体裁の変更などをしようと思って情報を仕入れようとすると必ずと言っていいほどぶつかる言葉があります。
『ＣＳＳ』／『スタイルシート』
これが使えるようになると飛躍的にブログのデザインの幅が広がる、そんなことがおぼろげにわかるのですが、いざ導入しようと考えてもどうしていいかわからない…。
何度も挑戦しようとして勉強をしてみてもどうもダメでした。まぁ、勉強と言っても本１冊を読み込むとかではなく、ネットの記事をつまみ読みする程度なんですけどね。(;^ω^)
私の中でブログは好きなものではあるのですが、『仕事』にはしたくない、そんな線引きがあります。勉強も苦痛にならない程度で済むことだけにチャレンジする、それが私のブログに対する取り組み方です。
『ＣＳＳ』は私のこのブログの取り組み方の境界線を越えたところにあるんですよね。
私の中では常にスマホ閲覧の不自由さのあるブログを運営しているという『気持ち悪さ』を抱えながら、でも、記事も引き続き書き続けたいという葛藤の中にありました。
そして、そんな私に立ちはだかる高い『ＣＳＳ』という壁。
「そこに壁がある ならば登ろう！」 ＣＳＳに挑む！
そんな悶々とした日々を過ごしていたのですが、とうとう重い腰を上げて本格的にスマホ閲覧画面の大改革に取り組もうと決めました。
私の最も大きなブログ執筆のモチベーションは『記事が沢山の方に読まれること』です。
私はあまりＳＥＯ対策には熱心な方ではありません。沢山の方に読まれることを目標にしていながらもＩＴスキルを必要とする方法はほとんど試していません。
しかしながら閲覧データを見ると既に私のブログも半数以上がモバイルからの閲覧になっていて、さすがに『ＩＴリテラシーの低いオッサンなのでごめんなさい』では訪問して下さる方々に申し訳ないと思ったことがＣＳＳという壁を登ろうとした最も大きなきっかけです。
私はブログ閲覧データの解析にソネットブログが用意しているもの以外にグーグルアナリティクスを利用していますが、最近グーグルから『お前のブログはモバイル閲覧に重要な問題を抱えているから早急に対処するように』というお達しまで頂き、これはもうほっておけないなという感じでもあったんですね。
そのため最近は『レスポンシブデザイン』についてかなりネットで勉強してきました。
当然のように『ＣＳＳ 』の言葉が頻発する記事ばかりで実際に導入する具体的な方法までたどり着けませんでした。しかし何度も勉強してきては挫折した私の知識の断片と新しい情報を組み合わせてソネットブログにＣＳＳを導入する方法を理解することができました。
そしてＣＳＳを利用したレスポンシブデザインを私にブログに導入する方法も見えてきました。
そんな時、こんな記事に出会ったんです。
グーグルの検索指標にレスポンシブデザインであることが取り入れられた
『Googleがレスポンシブデザインを推奨する7つの理由』その記事によると『Googleが、ウェブサイトがモバイルフレンドリーかどうかを、4月21日からモバイル検索でのランキング指標に使用する』ということです。
実際にグーグルのサイトを見てみると詳しく書いてありました。
検索結果をもっとモバイル フレンドリーに
Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。この変更は世界中の全言語のモバイル検索に影響を与え、Google の検索結果に大きな変化をもたらします。この変更によって、検索ユーザーは、クエリへの関連性が高く使用端末にも適した高品質な検索結果を見つけやすくなります。出典：グーグル ウェブマスター向け公式ブログ
少しづつ育て上げてきたブログがやっと安定したアクセスを確保してきたのに、これは由々しきことです。
私のブログに対するモチベーションは自分の書いた記事が沢山の方に読まれることです。
このブログは検索エンジン流入がほとんどです。
Yahooの検索エンジンもグーグルの検索ロジックを採用している今となってはグーグルの検索指標の変更は私のブログの運営にも大きく影響します。
ということで、私の中でブログを『レスポンシブデザイン』にするというミッションはその緊急性を増したと捉えています。
当ブログはレスポンシブデザイン導入モードに突入します
この状況を受けて書きかけのyoutubeの記事も今は少し置いておいてこのミッションに全力で取り組みたいと思います。もしうまくこのミッションに対処できたらこのブログでもご紹介したいと思います。
ブログデザインの知識に乏しい人間にとってはひとつひとつの内容が理解できても、実際に自分のブログにどうやって適用するのかがまったくわからないのが本当に歯がゆいです。
ネット上では親切な方が色々とブログの小技を親切丁寧に解説してくれていて助かっています。
でもそんな親切丁寧なアドバイスも具体的な行動に至らないこともよくあります。
例えば
『このＣＳＳの記述をコピペしてご利用下さい』
なんて書いてあったりするのですが、私にとっては、『それってどこに貼り付ければいいの？』って段階でつまづきます。それくらいわからないんです。(;^ω^)
きっと私と同じようにブログデザインの変更を試みて挫折している方って多いんじゃないかなって思いますので、もし上手くいったら同じように悩みを持っているソネットブログオーナーにも適用できるような説明が出来たらいいなって思っています。
レスポンシブデザイン導入 進捗状況（２０１５年４月４日現在）
とりあえずある程度何を導入すればいいか、どこにどの記述を貼り付ければいいのか、までは理解できて実際にこのブログにも導入してみました。しかしまだ対処が不十分でうまくいっていません。
表（テーブルタグ）を記事の中に使用している場合にうまくいかないようです。
また図（イラスト：イメージタグ）や動画の埋め込み（iframeタグ）などは記事内の記述を変えないといけないのでかなりの記事内の記述も変更を並行的に進めないと求めているレスポンシブなブログは完成できないようです。
記事内で採用している表やイラストなどの要素にすべて対応できる状態になったら過去記事の記述変更作業をしようと考えています。
そのため現在は変わっていないどころか中途半端な状態で場合によっては以前以上に見栄えが悪くなっているかもしれません。
どうかしばらくご辛抱下さい。
貴重なご意見 お待ちしております
そんなこんなで試行錯誤を繰り返している状況で、いまだうまくいかない点を抱えております。もしソネブロ（ソネットブログ：so-net ブログ）オーナーの方ですでにレスポンシブデザイン導入をお済ませの方がいらっしゃいましたら導入時の情報や有効な記事のリンクなどをコメント欄でお知らせ頂けると大変うれしいです。
よろしくお願いします。<(_ _)>
最後にブログ運営を楽しんでいる皆様の更なる発展をお祈り申し上げます。
そして当ブログをご訪問下さり記事をお読み頂いた方に感謝申し上げます。
<(_ _)>
今後の当ブログの展開を見守って頂けたらこの上なく嬉しく思っておりますので、よろしくお願いします。
スポンサーリンク
記事を最後までお読み下さり
ありがとうございました<(_ _)>
記事が良かったと思われた方は
ご協力のクリックをお願いします
ありがとうございました<(_ _)>
記事が良かったと思われた方は
ご協力のクリックをお願いします
スポンサーリンク
