カティーの旅とマイル

僻地に赴くエンジニアの旅行記やマイルの貯め方を紹介します

【はてブロ】写真に影をつけて見やすくする方法

自分のブログを見ていて見づらい点があったので改良しました。

 

まずこちら↓、改良前です。背景が白の写真を使っている為、文章と写真の境が分かりません。見づらいですね(^^;)

f:id:kattie_travel:20171215213243p:plain

 

そしてこちらが改良後です↓

f:id:kattie_travel:20171215213527p:plain

 

写真の周りに影をつけるようにしたので文章と写真の境が分かるようになりました。

 

 

写真に影をつける方法

これは普通のはてブロでもできます。簡単にできて見やすくなるので、ご自身のブログの写真が見づらいと思ったらぜひやってみて下さい。

(※ただし普通のはてブロで変更できるのはパソコン用の表示だけです。スマホ用の表示をいじる為には「はてブロPro」にする必要があります。)

 

1.ブログの管理画面から「デザイン」をクリックする

f:id:kattie_travel:20171215221411p:plain

 

2.スパナのマークをクリックして詳細設定画面を開く

f:id:kattie_travel:20171215221430p:plain

 

3.詳細設定画面の一番下にある「{}デザインCSS」をクリックする

f:id:kattie_travel:20171215221440p:plain

 

4.デザインCSSの下にCSS(デザインを指示する文章=コード)を記入できる箱が出てくるのでそこをクリックして開く

f:id:kattie_travel:20171215221458p:plain

 

5.元から書かれていた文章の下に次のコードをコピーして貼り付け


.hatena-fotolife{
-moz-box-shadow: 1px 3px 7px 2px #C5C5C5;
-webkit-box-shadow: 1px 3px 7px 2px #C5C5C5;
box-shadow: 1px 3px 7px 2px #C5C5C5;
}

f:id:kattie_travel:20171215221514p:plain

コードはじょーじさんのブログで紹介されていたものを使わせて頂きましたm(__)m

georges.hatenablog.jp

 

6.最後に変更を保存して完了!

f:id:kattie_travel:20171215222547p:plain

 

 

 これで白い写真でも文章と区切りができます!興味のある方はぜひやってみてください(^^)