mitopiの主に肩こり改善ブログ

肩こりのお悩み中心にアラサー女子の興味あることまとめます。

はてなブログの写真に枠をつけてみた その1

スポンサードリンク

最近ワードプレスブログばかり作っていて、久しぶりにはてなブログに戻ってきたので、使い方をいろいろと実験中です。

今回のテーマは、はてなブログの写真にキャプションをつけたいというテーマです。

早速検索したら、参考になりそうな記事が見つかりました。

ブログ投稿画像に枠(輪郭)を付ける方法 - はてなブログのカスタマイズ - いやまいったね!

そもそもなんで写真に枠をつけたいの?

写真に枠をつけないと、と思った理由は、こちらの私自身の投稿ですね。

f:id:EnjoyFreeApp:20170703151337p:plain

 

なんというか、見づらいです。

背景との区切り目が分かりづらいですし、画像のサイズもバラバラで。

 

これを改善しようと思い、今回のテーマにしました。

 

はてなブログの写真に枠をつけるには[設定]-[詳細設定]-[headに要素を追加]でできる(1箇所の編集だけで可能!)

 

冒頭で紹介したこちらの方のブログによりますと、

ブログ投稿画像に枠(輪郭)を付ける方法 - はてなブログのカスタマイズ - いやまいったね!

 

はてなブログCSSを触ると、写真に枠がつけられると書いてありました。

やすさんブログの通りやってみると、下記のようになりました。

f:id:EnjoyFreeApp:20170703153504p:plain

これはグレーの線がうっすら追加された状態の写真です。
やすさんのブログは白地だったので線がついたの分かったんですが、私のブログの場合は、背景もグレーっぽいので、遠目では分かりづらいですね。

 

はてなブログの[headに要素を追加]でつけた写真枠をさらに編集した

そこで少しコードに改良を加えたところ、下記のような表示になりました。

f:id:EnjoyFreeApp:20170703153709p:plain

これでハッキリくっきり境界線ができました。
どうやってこうなったかは、明日また解説します。

はてなブログの写真枠のつけ方は別記事で詳しく解説します

写真枠のつけ方の記事できましたら、こちらにもリンクを設置します。

~~追記~~
写真外側に線をひく具体的な手順を書いた記事を更新しました。

mitopi.hatenablog.jp