はてなブログのテーマでやったこと (1) - css と javascript/jquey でレイアウト調整
先日のエントリで、おこがましくも、はてなブログのテーマを作ったというお話をさせて頂きましたが...
最終的に自分が作りたいと目指したレイアウトにするには、テーマに掲載した css だけでなく、プラスアルファが必要になります。
ここでは、その "プラスアルファ" について。
この "プラスアルファ" は、
インストールしたテーマとは別に、CSS とスクリプトを追加することなのですが、
これには大きく 2 つの目的があります。;
- テーマのインストールだけでは実現できなかった、各所レイアウトの調整をする
- 検索ボックスとして Google のカスタム検索を利用する
これから、この CSS と スクリプト を組み込む手続き等について触れていきたいと思います。
とりあえず、テーマのインストールは済んだとして。
ひと通り作業を終えると
以下のような変化が生じるかと思います。;
サイドバーモジュールのプロフィールのレイアウト
→ 本文コンテンツ直下に 1 カラムで行方向中央に配置。サイドバーモジュールの検索ボックスのレイアウト
→ ページ上部、ヘッダ部に配置。トップページ以外のページヘッダの内容
→ すべてパンくずのフォーマットで生成。エントリー日付の出力場所
→ トップページ以外は、各エントリーコンテンツの右下端へ出力。コメント日付の出力形式
→ "n 日前" ではなく、年月日形式で出力。検索ボックスに、Google カスタム検索 を使用する
→レイアウトの考え方は上述、はてなブログの検索ボックスにほぼ同じ。ちょっと面倒かも...(次回)気に入らないパーツ/レイアウトを変えたい
今回使うデータは 1 つ、nanimo.js です。
スクリプトの組み込み
nanimo.js の内容すべてを、
ダッシュボードの[設定] メニューで展開するコンテンツ部の [詳細設定] シートをクリック、
当該シートの [headに要素を追加] に置きます。
シート最下部の [変更する] をクリックし、内容を反映して終了。
これだけで、諸処、これから触れるような変更が生じます。*1
変更するパーツについて
これによって以下パーツに影響が出ます。;
- サイドバーモジュールの "プロフィール"
- サイドバーモジュールの "検索ボックス"
- トップページ以外の "ページヘッダ"
- "エントリー日付"
- "コメント日付"
1. サイドバーモジュールの "プロフィール"
こんな感じになります。
プロフィールは、本来サイドバーモジュールが収まる段組みのレイアウトに囚われず、このモジュールのみ、行方向 1 カラムの行方向中央にばちーんと陣取ってもらうようにしてます。
そして、当該モジュールを構成する各パーツもかなりイジっています。
余計なお世話ですが、
プロフィール画像、はてなID、そして読者になるボタンの表示は、いずれも表示させておく方が据わりが宜しいかと思っています。
このプロフィールモジュール。
本当にどうにかしたかった唯一のパーツで、この度の作業へと駆り立てた最たる動因のひとつだったこともあり、
今は結構スッキリしてます。
2. サイドバーモジュールの "検索ボックス"
こちらも、サイドバーモジュールのひとつ、と言う位置づけから "外し" ています。
その飛距離はプロフィール以上で、
ページ上部にレイアウトされるようしております。
さらにページによって、置く場所を変えていたりします。
切り分けは、"トップページ or それ以外" で、
それぞれ以下のようにしています。;
- トップページでは、ブログタイトルの右下
- トップページ以外はすべて、ページ最上部
3. トップページ以外の "ページヘッダ"
各ページ上部に、ブログタイトルから、いわゆるパンくずスタイルで表示するようにしました。
一応、各パーツのハイパーリンク情報はそのままにしてます。
4. "エントリー日付"
トップページ以外のページでは、右下端に表示させるようにさせてます。
そして、トップページでは出力しないことにしてます。*2
5. "コメント日付"
コメントの日付情報の出力フォーマットが、年月日になります。
"yyyy/MM/dd" で、月日は前ゼロで出力します。時刻は、そこまでは必要ないと考え含めないことにしました。
標準ですと "n日前" と出力してくれます。*3
こんなところでしょうか。
長くなったので、検索ボックスの件は別の機会に触れるとします。
ということで、おしまいにします。
*1:ちなみに、ですが、css については、実はすでにテーマ "nanimo" の中に組み込まれていたりします。ですのでこのスクリプトを当てるだけで OK となります。
管理の仕方として、やっぱ、nanimo.js によって影響するスタイルの部分は別 css に切り離した方が健全かな、とも思っていたりして、ちょいと迷っています。今後このあたりの調整、必要と感じたら行うかもしれません。
*2:この理由には 2 つあります。
ひとつは、トップページにおける当該要素の置き場所に正直迷ったこと :P。
そしてもうひとつは、このブログ自身そうなのですが、スタイルとして「そのエントリーがいつ書かれたか」と言うのは、さほど重要じゃない...そんなのもあっても良いんじゃないかと。思って。
*3:この出力形式を変えた理由には特に深いものは無く、単純に何かかっこ悪いな、と前々から思っていたので、と言う程度ものです。
手を入れる前に、一応改めて "n日前" 形式であることの意味を考えてみたのですが、その根拠をどうしても見い出せなかったので、いいや、と..
