カキタクナッタラ

出力することを忘れないように何かを書きます

はてなブログの記事一覧とサイドバーのサムネイル画像を角丸にする

f:id:d3dayo:20170312020751j:plain

このブログは基本的にスマホだけで更新したりしているのでブログデザインのカスタマイズは後回しにしてきましたが、ちょっと弄りたくなったのでスマホから管理画面を開き、本当に少しずつ弄っています。(スマホだと操作の手間がかかるので)


さて、前回はPC表示のブログタイトルをGoogle日本語フォントで表示されるようにCSSを編集してみました。

d3dayo.hateblo.jp


今回は記事一覧やサイドバーに追加できる「新着記事」「注目記事」「関連記事」のサムネイル画像を角丸(正方形ではなくほんのり角が丸い状態)で表示されるようCSSを編集したので手順を紹介します。

※どんな感じの角丸かイメージを掴みたい場合は、このブログのトップページをPC表示でみるとわかります。

デザインCSSに以下のコードを追記

手順はとても簡単です。はてなブログの管理画面を開いて「デザイン」→「カスタマイズ」→と選択します。

そして「デザインCSSの欄に以下のコードを貼り付けます。

/*アイキャッチ画像のレイアウト変更*/
.page-archive .entry-thumb { 
	border-radius: 0.3em; /*値を変更すれば角の丸みを調整することができます*/		
}

/*サイドバーアイキャッチのレイアウト変更*/
#box2 img { 
	border-radius: 0.3em; /*値を変更すれば角の丸みを調整することができます*/
}

貼り付けたら「変更を保存する」を選択して編集内容を反映させれば作業完了です。

これで記事一覧とサイドバーのサムネイル画像が角丸で表示されるようになります。(他のデザインテーマでの表示は確認していないので、カスタマイズされる方は実際にCSSを編集してみて、自分のブログでも適用されるか確認してみてください!)

トップページを記事一覧で表示

ちなみに、この記事ではやたらと記事一覧という言葉を使いましたが、はてなブログではブログのURL末尾に「/archive」とつけると記事一覧ページを表示することができます。

記事一覧ページでは記事のタイトルとアイキャッチ画像と説明文がスッキリと表示されて個人的には見やすいと思うので、このブログではトップページを開くと自動で記事一覧(archive)ページが開くように設定しています。

そのための設定手順は以下の記事がとてもわかりやすいのでリンクを貼っておきます。

dokuwohaku.hateblo.jp


おわりに

このカスタマイズは以前やっていたブログでも施したもので、その時に書いたカスタマイズまとめ記事の原型が残っていたので、これからも気が向いた時に少しずつこのブログにもカスタマイズを施して、手順を紹介していこうと思っています。(ある意味リライト的な感じです)


でででーさん
d3dayo.hateblo.jp