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

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

はてなブログ記事中の全ての写真に写真枠をつける(写真外側に線をひく)方法と境界線を太くする方法 その2

スポンサードリンク

昨日やすさんの記事を参照して、

下記のように写真に枠をつけてみました。

f:id:EnjoyFreeApp:20170704081720p:plain

f:id:EnjoyFreeApp:20170704081723p:plain

上の写真が参照した通りの、下の写真が線の太さと色を変更した分の写真です。

 

はてなブログ記事中の全ての写真外側に線を引く手順

 

①[設定]を選択する

f:id:EnjoyFreeApp:20170704084942p:plain

②[詳細設定]を選択する

f:id:EnjoyFreeApp:20170704084906p:plain

③画面の下の方に[head要素]という項目があるので、下記コードをコピペする

<style>
.entry-content img {
border : 1px solid #DADADA ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
}
</style>

 

f:id:EnjoyFreeApp:20170704084841p:plain

④設定画面一番下にある「変更する」ボタンをクリックする

 

f:id:EnjoyFreeApp:20170704084824p:plain

写真の外側の線を太くしたり線の色を変えたりする方法

手順は↑に書いたのと同じです。[head要素]に書きこむコードの一部を変える事で線が太くなったり、線の色が変わったりします。

例えば、当ブログ(下の写真参照)のように線の文字を太くして線の色を茶色にしたい場合、

f:id:EnjoyFreeApp:20170704081723p:plain

コードは下記の通りです。

<style>
.entry-content img {
border : 3px solid #4f432a ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
}
</style>

よく見ると元のコードとは2か所違う箇所があることがわかります。

f:id:EnjoyFreeApp:20170704083607p:plain

border : の右側と solid の右側を変更することで、

線の太さと色が編集できました。

HTMLの色を直感的に選んで色のコードを変更する方法

元々、写真の外側の線の色は「#DADADA」でした。
色のコードは「#」+「6桁のアルファベットと数字の組合せ」でできています。

この元の色コード「#DADADA」の部分をコピーして、検索バーに貼り付けて検索してみてください。

f:id:EnjoyFreeApp:20170704083704p:plain

すると、上の画像がでてきます。白丸○で選択されている場所が現在選択している色なので、好きな色の場所にドラッグして、左側に出てきた色コードを選択し、
それをHTMLを記述する場所に貼り付けます。

f:id:EnjoyFreeApp:20170704083848p:plain

すると、一回一回色のコード表から選択しなくても、視覚的に合いそうな色を使用することができます。

本日の記事は以上です。