(cache) はてなブログスマホ版レイアウトで表示される注目記事のタイトルフォントのサイズを変更してみた

f:id:d3dayo:20170629150345p:plain

最近はちょこちょことスマホ版レイアウトをイジイジしているでででーさん(@d3_dayo)です！

ここのところ、WordPressばっかり弄っているので(いま3つくらいサイト作ってる最中です)たまの息抜きと言えば、このブログのスマホ版レイアウトを少しずつイジイジすることだったりしますｗ(どんな息抜きや～！ｗ)

最近は細々した部分を割と弄っているので、本当に少しずつの小出しにはなりますが、カスタマイズの手順は記事で紹介していこうと思います！

はじめに

今回紹介する手順は記事タイトル通り「はてなブログスマホ版レイアウトでページ下に表示されるベスト5までの注目記事」この記事タイトルのフォントサイズを調整するカスタマイズとなります。

画像を使って解説すると、今回弄ってみるのはこの部分のことですね！

f:id:d3dayo:20170629144154p:plain:w350

この注目記事に表示されている記事のタイトルフォントを現在はこのくらいまで縮小しています。

f:id:d3dayo:20170629144318p:plain:w350

今回はこの部分を調整するCSSの記述を紹介します！

カスタマイズ手順

はてなブログの管理画面を開き「デザイン設定」→「スマートフォン」→「ヘッダ」→「タイトル下」に以下のコードを挿入します。

<style type="text/css">

/*注目記事日付*/
.urllist-date-link {
    font-size: 75%; /*ここの数字を変えればサイズが変わる*/
    font-weight: bold; /*これがあると太字になりますがなくてもいいです*/
}

/*注目記事タイトル*/
.urllist-title-link {
    font-size: 85%; /*ここの数字を変えればサイズが変わる*/
    font-weight: bold; /*これがあると太字になりますがなくてもいいです*/
}

</style>

冒頭と末尾の「style～/style」の部分は既にスマホレイアウトをカスタマイズしている場合には挿入していると思うので記述不要です。

手順は上記のコードを追加する…たったこれだけです！

おわりに

あとはおまけとして、注目記事に表示されている記事アイキャッチの角を丸くするコードも掲載しておきます。

/*注目記事アイキャッチ*/
.hatena-module-entries-access-ranking .urllist-with-thumbnails .urllist-item .urllist-image {
    border-radius: .3em; /*ここの数字を変えればサイズが変わる*/
}

このコードを「style～/style」の間に挿入するだけでアイキャッチ画像の角が丸くなります。

以上、今回は本当にサクッとスマホ版レイアウト記事下に表示されている注目記事のタイトルフォントのサイズを調整する手順について紹介させて頂きました！

はてなブログのスマホ版レイアウトをいろいろ弄ってみたい時はこれが便利かもしれません！

d3dayo.hateblo.jp

でででーさん
d3dayo.hateblo.jp

Follow @d3_dayo