はてなブログ

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

投稿日: 更新日: 2017年10月24日

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

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

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

 

スポンサーリンク

はじめに

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

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

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

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

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

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

 

カスタマイズ手順

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

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

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

 

おわりに

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

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

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

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

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ