めちゃ簡単♪ 無料はてなブログの画像に枠線を付ける方法
背景が白っぽい画像を張り付けた時、見づらいな～って思いますよね。。。
今回は、画像への枠線の付け方をご紹介しま～す♪
画像に枠線を付ける
例えば、下の画像は、枠線がない画像
↓
枠線を付けると、こんな感じ
↓
うん、だいぶ見やすくなりました～（*＾＾*
やり方はめちゃ簡単っ
「HTML編集」の画像のタグの中に、枠線を付ける指示を出すだけなんです
画像のタグは、下記のように<img class=”hatena-fotolife”から始まっていると思います
この次に半角スペースを入れ、ピンク文字の「style=”border: 1px solid #BDBDBD;”」を追加します
例えば、こんな感じ
↓
コピペするだけなので、やってみてね～
枠の太さ調整
枠の太さも調節できます→「1px」この数字を大きくすると、太くなっていきます
枠線の種類
枠線の種類も変更できます→「solid」を使いたい線に変更するだけ
よく使いそうな枠線の指示
- 1本線→「solid」
- 2重線→「double」
- 点線→「dotted」
- 破線→「dashed」
枠の色設定
好きな色にもできます→「＃」から始まっている色コードを変更するだけ（＾＾b
基本の色コードはこちらをご参考にしてくださいね～
↓
ブログ内の画像全てに、自動的に枠線を付ける
も～毎回枠線付けるのめんど～いっ
って場合は、掲載する画像全てに枠線を自動的に付ける方法もあります
この場合、枠線いらない画像にも付いちゃいますけど。。。
手順
「ダッシュボード」の「設定」→「詳細設定」と進み、→「headに要素を追加」の中に、枠線を自動で付ける指示を記述します
下記コードをまんまコピペし、「変更する」をクリックして完了で～す
↓
<style> .entry-content img { border : 1px solid #BDBDBD; } </style>
枠線の太さ・種類・色は上でご紹介した通りです
ブログ内の画像全てに、自動的に影を付ける
写真なんかだと、枠線を付けちゃうと、う～ん。。。なんだかな～
って思うこと多いですが、影だと、ちょっといい感じになると思います
この場合も、影いらない画像にも付いちゃいますけど。。。
うっすら、ちょっぴりの影だったら、邪魔って思うことないと思います
手順
「ダッシュボード」の「設定」→「詳細設定」と進み、→「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>
.entry-content img {
border : 1px solid #DADADA ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
}
</style>
影の太さ・色は上でご紹介した通りです
枠線・影がいらない画像には「枠線はいらん」「影はいらん」て指示を加えれば、その画像だけ消せるはずなんですが。。。すみません、試してみた結果消せなかったので、消せるようになったらまたご紹介します。。。（＾＾；
どなたか、知っている方いらっしゃいましたら、教えてください～っ！
無料はてなブログのもっと簡単ないい編集方法あるよ～とかも是非。。。
私が独学で色々試してみてOKだったコードなんで、よく解っている方から見たら、ここ変とか、無駄なコード入れてる、とかって箇所があるかもしれません（＾＾；
ま、なってればいいのだ～（*＾＾*b
無料はてなブログだけど、もうちょっとアレンジしたいけどわっから～んっ、て方の、ご参考にして頂けたら嬉しいです♪
にほんブログ村