2015/07/18
現在、当ブログのテンプレートを変更中です。
しばらくお見苦しいと思いますがもうしばらくお待ちください。
2015/07/19追記、「CSS TUTS」のカズタマイズ
やっとまともに見れるようになったと思えるところまで弄った。
やはりブログのテンプレートを変更すると、マトモになるまでは最低1日は掛かる。
Bloggerに限らずブログのテンプレートというのは非常に重要な存在だ。見てくれの問題も大きいし、ユーザーの見やすさや操作のしやすさにも関わる、それにSEOに与える影響も大きい。
こういったことが分かってきたのは何回もテンプレートを差し替えて運用してみてやっと分かった事だ。こうした情報がもっとテンプレートを差し替える前に入手できないだろうか。
ブログにテンプレートを導入しないと分からないのでは手間とリスクが大きすぎると思うのだ。
なぜ「CSS TUTS」なのか？
それまでBloggerで使っていた「DarkRed」はこれはこれで良いテンプレートだったが、ベース色が黒いので重苦しい雰囲気だ。もう少し軽い雰囲気が欲しかった。
それにバックが黒なだけにイロイロ配色で気を使う事が多い。配色で楽ちんなのはやはり白ベースのテンプレートだ。
Blogger用のレスポンシブルで白ベースのシンプルなテンプレートは数多くあるが、それでも白と他の色との配色に個性がある。
今回「CSS TUTS」のサンプルサイトを見た時に一目で気に入ってしまった。
それに画面構成として左メイン、右サイドバーという形は崩したくなかった。
これはレスポンシブ対応なのでスマホで見た時に右サイドバーが下へ回り込むというパターンにしたかったからだ。やはり慣れたこの形が一番使い易い。
そして今回一番欲しかった機能として「パンくず」がある。
Bloggerのカテゴリーに当たるラベルは階層構造を取っていない。従って「パンくず」という表現が難しいのだ。
今回の「CSS TUTS」はその記事に設定してあるラベルを並べて階層構造のように見せる「パンくず」を生成するようになっている。
例えば当記事では
「オッサン的感覚 ＩＴ編>Blogger>作業記録>ブログのテンプレート変更、今度は「CSS TUTS」というやつ」
と表示されている。この「パンくず」なら合格だ。
「パンくず」はGoogleでもこうして表示するのが良いとガイドラインが出ているらしい（キチンと見たことは無いが）。それに沿っているとインデックスもされやすいのだろう。
WordPressのブログを見ていると、この「パンくず」からインデックスされている事が多く非常に重要なポイントだと思う。パンくずは思いのほかSEOでは重要なのだ。
「CSS TUTS」のサイドバーの設定
Bloggerの場合サイドバーに表示するウィジェットはパターンがあり、テンプレートが異なってもそれほど変わったモノは無い。
しかしその表示内容はイロイロなパターンがある。
今回のサイドバーに設置してあるカテゴリー一覧（Bloggerではラベル）ではちょっと面白い表示方式で今までに無いパターンだ。
一応これでもタグクラウドのようなクラウド方式なのだが、全くそのようには見えないところが気に入った。
ただ当ブログの場合、カテゴリー数が多いので縦に長くなってしまう。このあたりはサイドバーに表示する種類を減らして対応した。結果シンプルになった。
「CSS TUTS」の広告の設定
Blogger用の「DarkRed」の時は広告を表示するのにテンプレートをカスタマイズして表示させていた。
今回「CSS TUTS」ではまだ広告に関してはテンプレートをカスタマイズしてないが、現在のところ上部（メニュー下）にレスポンシブでPCの場合は横728、スマホの場合は横320を表示するようにした。横長の広告サイズは久しぶりだ。
記事下にはいつもの四角いレンダクルをこれも画面の横幅に応じて異なるサイズを表示する。
さらに右サイドバーに固定サイズのレンダクルを1つ配置してある。
これでしばらく様子を見てみるつもりだ。
2015/07/21追記、肝心のタイトル部分は手つかず
ご覧のようにタイトル部分はこれからカッコ良いモノにしようと考えているのだが、試行錯誤しないといけないだろう。
最上部にもメニューがあったのだがコメントアウトして取り去ってシンプルにした。
表示順序としては、タイトル→メニュー→広告→「パンくず」→記事タイトル→日時→記事本文、という形にした。
PCで見るとタイトルは左にチマチマと固まっているような形になっている。
これをスマホで見ると中央に配置されていて普通だ。
では
ポチっと応援お願いします
にほんブログ村