このプログを始めた当初からずっと同じテンプレート(Ms. Moto (Pinky Lee variation) / 2004年製)で自分の好みで魔改造していたのだけれど、モバイル用の表示などで何もしてないのに、やれ「項目間が狭すぎる」とか「描画範囲を超えています」などBlogger純正のテンプレート(モバイル表示は標準のテンプレートを指定)なのに、やたらとGSCから文句が出てくるので、やっぱりレスポンシブデザインにしてモバイル／デスクトップとも同じにしたほうがいいよねって、突然に思い起こして使いやすいとの評判を結構目にした"QooQ"というテンプレートに先月あたりから替えてみることにしました。
さっぱりしたフラットのデザインで、そのままだとやや味気なく感じる印象ですが、付け入る隙がないような凝ったデザインではなく、あらかじめ「弄ってください」という前提のようで中身は非常に見やすいです。
元のブログがどのようなデザインだったかは左図参照。
(画像はwaybackmachine(archive.org)より取得)
レイアウトはよくある２カラムでサイドバーが付くもので、記事本文のヘッダー部分にガジェットを埋め込む部分があって、そこに外部サイトなどの記事情報を埋めていました。１ページに表示する記事の数だけ、比例してデータ量が多くなってしまうのですが、まぁ見づらくはあっても見慣れたレイアウトゆえに使いやすく感じてました。
レイアウト部分での拘りは、どんどんと時代と共にディスプレイがワイド化していき、それに合わせてウェブサイトも横長レイアウト前提のものが多くなり旧来の４：３比率の画面を考慮しなくなっていきましたが、ずっと８００×６００の画面サイズでも見られることを念頭にして横には広げませんでした（ある程度は広がるように可変対応には改造してた）
でも今時、このテンプレートはないわーってところでｗ
けれども今までの経緯と経過があるから全く違うブログの見た目とするのに戸惑いもあり「出来る限り元のブログに似せてみよう」というのを考えながらテンプレートを弄ってみました。
なんかQooQのテンプレートを弄ったら「弄ったよ記事」を書くのが定番のように感じたのでメモ書き的に記録しておくという主旨です。
まずは一覧表示のところで変えた部分・先頭
①元のレイアウトに似せて帯を記事部分の幅でカット
②パンくずリストは合わないので破棄（改悪ｗ）
③ついでにページ＝メニューの構造じゃないのでナビゲーションも破棄（改悪ｗ）
中間あたり
④記事一覧の直後に記事欄と同じ幅でガジェットを入れられるように枠(section)を追加
～人気の投稿ガジェットを要約付きで入れてます
私自身が他の人のブログの記事アーカイブって見ない方なので、この際だからアーカイブの項目も取り払ってみました
なんとなく昔に見たyomi searchというcgiのリンク集の扉ページを思い浮かべるような３連カラムでリンク先を表示するイメージでフッターを使っています
一番下の方
⑤３連のフッターの下に幅いっぱいでガジェットを入れられるように枠(section)を追加
～やたらと多いBlogger名物のラベルを全表示で入れてます
記事の個別表示では
⑥記事直下のガジェット枠は表示するけれど、３連フッター部分と追加のフッター枠は煩わしいので非表示にしています
⑦関連記事の数の変更や見た目の変更とかは定番通りに見た目と出力対象を付いている全ラベルに変更。ラベル１つしか付けないなら弄らなくてもよさげですが、タグみたいに使っている場合は改変必須かな
あと記事の日付の位置とか変更してみました。
他には背景をあえて(時代に逆行して？)付けています。
元のブログに付けていた背景とは異なりますが、なんとなく無地だと寂しいので・・・。QooQを使ったブログだと無地の背景のものばかり見ますが、背景付きでもいいんじゃないかなって。個性も出したいですよね。
こうやってQooQの弄ったところを書き記してみると意外にも変更箇所は少なく感じますね。まぁ色を変えたり飾り付けを変えたりとかの微調整も弄るの範疇ではあるけど、どちらかというと好みって部分だから、あまり機能的な部分では弄らなくてもいいってところで、「弄りやすい＝使いやすい」テンプレートです。ただ気になるところが１つあって、コンセプトがシンプルで速いテンプレートだとするなら何故にBlogger標準のCSSを読み込むようにしているのかという部分。(標準CSSは37kb程ある)まぁBloggerデフォルトの以前のテンプレートと同じ条件でという前提なのでしょうけど、少しでも速くとなると、やはり冒頭の <Html> タグ部分で b:css='false' を指定したいところですね。
レイアウト部分での拘りは、どんどんと時代と共にディスプレイがワイド化していき、それに合わせてウェブサイトも横長レイアウト前提のものが多くなり旧来の４：３比率の画面を考慮しなくなっていきましたが、ずっと８００×６００の画面サイズでも見られることを念頭にして横には広げませんでした（ある程度は広がるように可変対応には改造してた）
でも今時、このテンプレートはないわーってところでｗ
けれども今までの経緯と経過があるから全く違うブログの見た目とするのに戸惑いもあり「出来る限り元のブログに似せてみよう」というのを考えながらテンプレートを弄ってみました。
なんかQooQのテンプレートを弄ったら「弄ったよ記事」を書くのが定番のように感じたのでメモ書き的に記録しておくという主旨です。
①元のレイアウトに似せて帯を記事部分の幅でカット
②パンくずリストは合わないので破棄（改悪ｗ）
③ついでにページ＝メニューの構造じゃないのでナビゲーションも破棄（改悪ｗ）
④記事一覧の直後に記事欄と同じ幅でガジェットを入れられるように枠(section)を追加
～人気の投稿ガジェットを要約付きで入れてます
私自身が他の人のブログの記事アーカイブって見ない方なので、この際だからアーカイブの項目も取り払ってみました
なんとなく昔に見たyomi searchというcgiのリンク集の扉ページを思い浮かべるような３連カラムでリンク先を表示するイメージでフッターを使っています
⑤３連のフッターの下に幅いっぱいでガジェットを入れられるように枠(section)を追加
～やたらと多いBlogger名物のラベルを全表示で入れてます
⑥記事直下のガジェット枠は表示するけれど、３連フッター部分と追加のフッター枠は煩わしいので非表示にしています
⑦関連記事の数の変更や見た目の変更とかは定番通りに見た目と出力対象を付いている全ラベルに変更。ラベル１つしか付けないなら弄らなくてもよさげですが、タグみたいに使っている場合は改変必須かな
あと記事の日付の位置とか変更してみました。
他には背景をあえて(時代に逆行して？)付けています。
元のブログに付けていた背景とは異なりますが、なんとなく無地だと寂しいので・・・。QooQを使ったブログだと無地の背景のものばかり見ますが、背景付きでもいいんじゃないかなって。個性も出したいですよね。
こうやってQooQの弄ったところを書き記してみると意外にも変更箇所は少なく感じますね。まぁ色を変えたり飾り付けを変えたりとかの微調整も弄るの範疇ではあるけど、どちらかというと好みって部分だから、あまり機能的な部分では弄らなくてもいいってところで、「弄りやすい＝使いやすい」テンプレートです。ただ気になるところが１つあって、コンセプトがシンプルで速いテンプレートだとするなら何故にBlogger標準のCSSを読み込むようにしているのかという部分。(標準CSSは37kb程ある)まぁBloggerデフォルトの以前のテンプレートと同じ条件でという前提なのでしょうけど、少しでも速くとなると、やはり冒頭の <Html> タグ部分で b:css='false' を指定したいところですね。
結局は３連フッター部にリンクリストのガジェットを埋めたリンク集的なレイアウトはやめてリンク集として単体ページに移設する事でスッキリと落ち着きました。
返信削除