POTTIRI'S AUTOBIOGRAPHY

ダイエットやITで遊ぶアラフォーエンジニアの自伝ブログです。

【ブログ運営】画像に自動で枠線をつける

f:id:pottiri:20200908175942p:plain

お疲れさまです。POTTIRIです。
ブログに画像を載せる時、
枠線がついてないと境目がなくて微妙に見づらい時があります。
個人的にこの状態は嫌いなので、
自動で枠線をつける設定をご紹介します。

画像に枠線をつけてみる

枠線がついてないとこんな感じになります。
背景色が白なこともあって、ちょっと気になりますね。

f:id:pottiri:20200908174120p:plain

早速設定していきます。
はてなブログの管理画面で、
「デザイン」をクリックします。

f:id:pottiri:20200908175502p:plain

スパナマークをクリックします。

f:id:pottiri:20200908175538p:plain

「デザインCSS」をクリックします。

f:id:pottiri:20200908175604p:plain

下記の一文を貼付け、
「変更を保存する」をクリックします。
.entry-content img.hatena-fotolife {
border: solid 1px;
border-radius: 10px 10px 10px 10px;
}

f:id:pottiri:20200908175633p:plain


枠線がつくようになりました。
少し見やすくなりましたね。

f:id:pottiri:20200908175839p:plain

解説

デザインCSSとは、ブログ(厳密にはHTML)の装飾を行うプログラムです。
先程貼り付けた一文を解説します。

.entry-content img.hatena-fotolife {
border: solid 1px;
border-radius: 10px 10px 10px 10px;
}


.entry-content img.hatena-fotolife

この一文は記事のどこの部分に設定を効かせるかを意味します。
.entry-contentは「ブログの本文」を表します。
img.hatena-fotolifeは「はてな管理画面の記事作成機能でアップした画像」を表します。
.entry-content img.hatena-fotolife で
「記事本文内にある記事作成機能でアップした画像」
に対し、これから書く設定を効かせるという意味になります。
.entry-contentがあるのでヘッダ画像やプロフィール画像には枠線は付きません。
.hatena-fotolifeがあるので外部サイトから引用した画像には枠線は付きません。

border: solid 1px;

枠線の設定です。
solidは実線を意味します。
この部分で点線などを指定することもできますが割愛します。
1pxは点線の太さです。
ここに色の設定を加えて枠線の色も指定できます。

border-radius: 10px 10px 10px 10px;

これはおまけの設定です。
枠線に丸みをつけています。
この一文を消すと角張った枠線になります。
4つの10pxは丸みの形を表しています。
数値を変えると丸みの形が変わります。

私は「区切り」は目の疲れやすさを軽減させること、
見せたいものに集中させることにおいて重要だと思っています。
小さなことかもしれませんがお試しください。

最後まで読んでいただきありがとうございます。

アフィリエイト

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログ Perfect GuideBook [改訂第2版]

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: 単行本