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

仕事は母ちゃん

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

はてなブログのスマホ用カテゴリ&アーカイブタイトルをカスタマイズしてみた

小学校の新1年生は登校初日。こちらの地域はバス通学なのでバス停に新1年生がやってきました。と言っても四男と同じバス停から乗る1年生は全員お姉ちゃんがいるので大して緊張もしてない様子。こういうとき、下の子はお得だよなあと思うさっこさんですこんにちは。とは言え、昔の1年生は1週間ぐらい午前中授業だったのですが、今はすぐに通常授業に突入します。いきなり5時間授業ってハードだけど頑張ってね。

さて、本日ははてなブログのスマホ用テーマのカスタマイズについてメモ代わりに書いておきます。先日、スマホ用テーマにカテゴリとアーカイブへのリンクを追加する方法を書きました。

で、カテゴリページ、アーカイブページを開いてみると、こんな風になります。

f:id:plutan:20170410082902j:plain:w300

f:id:plutan:20170410083008j:plain:w300

見出しがデザインと合わないので、これをCSSでカスタマイズすることにしました。

カテゴリの見出し

カテゴリの見出し部分のソースはこちらです。

<div class="sectiln-archive-heading section">
     <h2 class="archive-heading">カテゴリー:育児</h2>
</div>

これを元に、見出しの文字色を変えて中央揃えにしてみます。

h2.archive-heading{
    color:#000066;/*文字色*/
    text-align:center;
}

f:id:plutan:20170410084156j:plain:w300

これだとシンプルすぎるので見出しに背景色を指定してみました。この場合、h2要素をインラインボックスにして、すぐ上の階層のdiv要素で中央揃えの指定をします。

div.section-archive-heading{
    text-align:center;/*中央揃え*/
}
h2.archive-heading{
    display:inline;/*h2要素をインラインボックスにする*/
    background:rgba(16,102,222,0.7);/*背景色*/
    color:#fff;/*文字色*/
    font-size:14px;/*文字サイズ*/
    padding:5px 10px;/*ボックスの内側の余白(上下、左右)*/
    border-radius: 5px;/*ボックスの角を丸くする*/
}

f:id:plutan:20170410092557j:plain:w300

アーカイブの見出し

アーカイブ見出し部分のソースはこちらです。

<p class="margin">
    2017-04-01から1ヶ月間の記事一覧
</p>

文字色を変えて中央揃えにするのはカテゴリの場合とほぼ同じです。

p.margin{
    color:#000066;/*文字色*/
    font-weight:bold;/*文字の太さ*/
    text-align:center;/*中央揃え*/
}

f:id:plutan:20170410084010j:plain:w300
背景色を指定して中央揃えにする場合ですが、どうもアーカイブの見出しはbody要素直下にあるようなんです(見落としてたらすみません)。仕方ないのでボックスの左右に余白を指定することでそれっぽい感じにしてみました。他に良い方法をご存知の方がいらっしゃったらご指摘のほどよろしくお願いします。

p.margin{
    background:rgba(16,102,222,0.7);/*背景色*/
    color:#fff;/*文字色*/
    font-size:14px;/*文字サイズ*/
    font-weight:bold;/*文字の太さ*/
    text-align:center;/*中央揃え*/
    margin-left:2em;/*ボックスの左余白*/
    margin-right:2em;/*ボックスの右余白*/
    padding:5px 10px;/*ボックスの内側の余白(上下、左右)*/
    border-radius: 5px;/*ボックスの角を丸くする*/
}

f:id:plutan:20170410112906j:plain:w300

とまあ大体こんな感じで。

おまけ

スマホでWebページのソースを確認する方法ですが、パソコンの場合と一緒でURLの頭にview-sourceをつけると確認できます。スマホ用テーマのカスタマイズに役立つと思うので、ご参考までに。

f:id:plutan:20170410084259j:plain:w300

ところでつい先日の話ですが、はてなブログの新着エントリーを眺めていたら「ブログを作ったばかりですが、はてなブログだとスマホではカテゴリ一覧がないのに気づいたので楽天ブログに移転します」というエントリーを見つけました。なるほど、ブログに手を加えることをしない、もしくはそんなことができるとは思ってもみない人にとって、はてなブログは不向きなサービスかもしれませんね。