読者です 読者をやめる 読者になる 読者になる

仕事は母ちゃん

どーってことない脳内と日常の垂れ流しです

ブログのスマホ用デザインにカテゴリ&月別アーカイブを追加してみた

今日が始業式で明日から三男はお弁当がいるなと思ってたんですが、帰宅した三男に「明日は学校休みだから」と言われました。そうだったー!明日は入学式だったー!小学校は入学式の日も在校生は普通に授業も給食もあるんだけど、高校は新入生だけ登校で在校生は休みだったよ…すっかり忘れてた。全くうっかりさんにもほどがあるさっこさんですこんにちは。しかし高校生休みすぎだろ。

さて、本日はいじろういじろうと思って放置してたブログのスマホ用デザインをいじりました。デフォルトのままだとカテゴリと月別アーカイブが表示されないので、追加してみたのだ。スマホからでも月別アーカイブが見たい、という方をお見かけしたことがありまして、追加しといたほうがいいかなと思って。レスポンシブデザインにだけはしたくないからこんなことせにゃならんのですが。

まずはカテゴリのほうから。こちらのエントリーを参考にさせていただきました。

ついでなので、アバウトページも選択できるようにすればよくね?というわけで、アバウトページも選択できるようにしました。

<div class="categories-menu">
<select>
<option value="hide">ブログ紹介&カテゴリー</option>
/*アバウトページのリンク挿入*/
/*URLは自分のブログのものに、タイトルもお好みのものに変更してください*/
<option value="http://blog.plutan.org/about">ブログ紹介</option>
/*挿入部分ここまで*/
</select>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>

お次は月別アーカイブです。こちらのほうはパソコン用のブログのソースを見ればわかるんですが、こちらのエントリーでソースを紹介してくださってるので、コピペでOK。

後はスタイルシートで色などを整えます。

.hatena-module-title a{
    text-decoration:none;
    color:#000099;/*月別アーカイブタイトルの文字色*/
}
.hatena-module-archive .hatena-urllist li{
    border:none;
}
.hatena-urllist li a {
    color:#1066de;/*年・月別アーカイブリンク文字色*/
}

こうして追加して完成したページのスクリーンショットがこちら。

f:id:plutan:20170406105737j:plain:w300

f:id:plutan:20170406105908j:plain:w300

f:id:plutan:20170406164621j:plain:w300

うん、まあまあいけるんじゃないかと思います。Androidでのみ確認してるので、iPhoneだとどうなってるかはわかりませんが、おかしなところがあるようでしたらコメントで指摘していただけると助かります。