ただいまサイトのリニューアル中です。記事閲覧などご利用は可能です。

【はてなブログ】サイドバーにサムネイル画像を表示させる方法が簡単だった♪|UnderShirts

当記事にはプロモーションを含みます。

こんにちはkamekoです。

今回、はてなブログでサイドバーにサムネイル画像を表示させる方法を書いていこうと思います。

最初、とても難しいんだろうな。。と、思っていたら。簡単に出来ました!!

※現在はワードプレスに移行しています。

目次

はてなブログ|サムネイル画像のカスタマイズ

『サムネイル画像を表示』って何?って方のために。

こんな感じでサイドバーに画像を表示させてあげることです。

サムネイル画像の表示基準

①アイキャッチ画像を設定している場合:アイキャッチ画像が表示される
②アイキャッチ画像を設定していない場合:記事内に最初に投稿している画像が表示される
③何も設定していない場合:テキストのみが表示される

 はてなブログでは、以上のようになっています。

では、実際の設定の仕方を見ていきます。

「サムネイル画像」基本的な設定

「デザイン」→②「カスタマイズ」→③「サイドバー」

④(例)関連記事なら

「関連記事」「編集」をクリック。

☑サムネイル画像を表示する

 に、チェックを入れます。

⑥その他、編集したい項目があれば設定していきます。
✔タイトル
✔集計方法
✔表示件数
✔サムネイル画像のサイズ
✔投稿日時

など。

 当記事で使用している画像には、詳細箇所が全部表示されていなくてすみません。(iPadでスクショを撮ると全部写らなくて。。。)

「適用」を押して完了です。

⑧最後、変更を保存するのボタンを忘れずに押してくださいね!!

「サムネイル画像」の詳細設定

先程紹介した内容で、サムネイル画像は表示されるのでOKです♪

しかし、もう少しカスタマイズしたいな。と、思う方は是非♪

「サムネイル画像」の角を丸くする方法

サムネイル画像を表示してあげると、デフォルトの画像は四角のままになっています。

ピシッ!!っとなっていてカッコイイですよね。ビシッとなっているのも良いのですが、私は画像の角を少し丸くさせたかったので、少し角度を調節しました。

最初、どうやって変更するのか分からず。。

見つけました!

記事を書くより、検索時間の方が長いんじゃないかと思います。。

参考にさせて頂いたサイトはこちら

私はサムネイル画像の角だけ変更したかったので、『サイドバーアイキャッチのレイアウト変更』コードのみを使わせて頂いて。
値を0.5emに変更しました

 ①「デザイン」→②「カスタマイズ」→③「デザインCSS」にコードを入力して、お好みの角度に調節して下さい♪

まとめ

サイドバーにサムネイル画像を表示させてあげると、一気にブログの雰囲気が変わりました♪

何の記事を書いているのか分かりやすくなって良いですね。

最後までお読みくださりありがとうございます。

ブログランキング・にほんブログ村へ
Shareされると喜びます!
  • URLをコピーしました!
  • URLをコピーしました!
目次