昨日やすさんの記事を参照して、
下記のように写真に枠をつけてみました。
上の写真が参照した通りの、下の写真が線の太さと色を変更した分の写真です。
はてなブログ記事中の全ての写真外側に線を引く手順
①［設定］を選択する
②［詳細設定］を選択する
③画面の下の方に［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>
④設定画面一番下にある「変更する」ボタンをクリックする
写真の外側の線を太くしたり線の色を変えたりする方法
手順は↑に書いたのと同じです。［head要素］に書きこむコードの一部を変える事で線が太くなったり、線の色が変わったりします。
例えば、当ブログ（下の写真参照）のように線の文字を太くして線の色を茶色にしたい場合、
コードは下記の通りです。
<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>
よく見ると元のコードとは２か所違う箇所があることがわかります。
border : の右側と solid の右側を変更することで、
線の太さと色が編集できました。
HTMLの色を直感的に選んで色のコードを変更する方法
元々、写真の外側の線の色は「#DADADA」でした。
色のコードは「#」＋「6桁のアルファベットと数字の組合せ」でできています。
この元の色コード「#DADADA」の部分をコピーして、検索バーに貼り付けて検索してみてください。
すると、上の画像がでてきます。白丸○で選択されている場所が現在選択している色なので、好きな色の場所にドラッグして、左側に出てきた色コードを選択し、
それをHTMLを記述する場所に貼り付けます。
すると、一回一回色のコード表から選択しなくても、視覚的に合いそうな色を使用することができます。
本日の記事は以上です。