【はてなブログ】スマホデザインのフッタにカテゴリーと月間アーカイブを表示する

はてなブログのスマートフォンデザインは、何もカスタマイズをしないと、以下のとおり表示されます。
検索と、注目記事の一覧しかありません。少し寂しい感じがします。
PCデザインだとサイドバーから様々なモジュールを簡単に追加できるのですが・・・。
今回は、スマホのフッタにカテゴリーと月間アーカイブを表示する方法を、備忘を兼ねてご紹介します。

※なお、上記の画面は、スマホデザインで表示されてしまう、はてなブログ特有の不要な要素をあらかじめ削除したものです。
スマホデザインの不要な要素の削除方法については下記のリンクからどうぞ。
スマートフォンデザインの不要な要素を非表示に（ダチョウのたまご。）

 

カテゴリーと月間アーカイブの表示方法

コードの入力場所

管理画面から、「デザイン」ー「スマートフォン」と画面遷移し、「フッタ」にコードを記述していきます。
入力欄が表示されていない場合は、「スマートフォン用にHTMLを設定する」にチェックを入れます。

 

カテゴリーを表示する

コードは以下のとおりです。

コードを解説

8行目・11行目の “http:XXXX – ここにURLを入力” に表示したいカテゴリー一覧のURLを記述します。そして、その後に表示させたいカテゴリー名を記述します。
上記の例では、「カテゴリー１」と「カテゴリー２」の２つを表示するようにしていますが、7行目～9行目の <li></li> で囲んだ範囲を追加していくことで、表示するカテゴリーを増やすことができます。
ちなみに、「カテゴリー」というタイトルは「hatena-module-title」というクラスに属するように指定しています。
こうすることで、後ほどタイトルのデザインを変更する際は、他のモジュールタイトルと同じように変更することができます。

 

月間アーカイブを表示する

次に、月間アーカイブを表示するコードを書いていきます。

コードを解説

1行目と3行目にある“http://XXXX/archive – ここにURLを入力”の２箇所に自分のブログのURLを記述します。
そうすることで、「月間アーカイブ」のタイトルを押下すると、記事一覧にリンクするようになります。
「月間アーカイブ」のタイトルもカテゴリーと同様に、「hatena-module-title」というクラスに属するように指定しています。

 

カテゴリーと月間アーカイブのコードはPCデザインを参考にした

上記のコードは、PCデザインのソースコードから持ってきたものです。
google chromeでサイトを開き、右クリックして「ページのソースを表示」を押すと、そのページのソースコードを確認することができます。
PCデザインに、カテゴリーと月間アーカイブを表示している場合は、ここにソースコードが載っていますので、それをそのままスマートフォンデザインに記述したというわけです。
「はてなブログで、PCに表示されるものをスマートフォンでも表示したい」という場合には、google chrome等のブラウザでソースコードを確認すると、とても参考になります。

 

カスタマイズ後の画面イメージ

コードを全て入力すると、以下の画面イメージになり、カテゴリーと月間アーカイブを表示することができました。（※画面上段は省略）

フッタのタイトルをオシャレに表示する

最後に、フッタにある各モジュールのタイトルを少しだけオシャレにしたいと思います。
私の場合は、以下のように変更してみました。

カスタマイズ後の画面イメージ

それぞれのタイトルの左側に青ラインを引き、背景を少しグレーにしています。
なかなかオシャレで、目立つようになりました。

入力するコード

コードを入力する場所は、これまでと同じで、「フッタ」に記述していきます。

コードを解説

2行目～8行目で最初からタイトルにデザインされている内容をクリアします。（今回のデザインには不要でしたので。）
10行目～15行目でデザインを記述します。.hatena-module-titleに記述することで、モジュールタイトルのデザインを指定できます。
スペースの指定、背景や文字の色、ボーダーの指定はこちらで行っています。

自分のサイトがオシャレになっていくと、気分も上がるものですね！
もっともっと勉強していきたいと思います！

※デザインについては、以下のサイトを参考にさせていただきました。

コピペで簡単！CSSではてなブログの見出しをカスタマイズ！（NO TITLE）