ブログ

はてなブログで画像に枠線を付ける方法。自由に使えるコード付き!

画像に枠線をつけようとしている人

「ブログはマイペースでゆっくりいこうね~」とか人に言いながら、あれこれとカスタマイズをしようとして忙しくなってる、現役プランナーのけこです。

今回は、はてなブログで画像に枠線を付ける方法。自由に使えるコード付き!ということで

文字通り、はてなブログに使用した写真やスクショなどの画像に枠線をつける方法とコピペして自由に使えるコードを紹介しています。

「画像と背景の境目がわからなくて枠線をつけたいんだけど、初心者でわからない!」

「写真に合うおしゃれな枠線がつけられるコードをさがしているんだけど…」

という人多いですよね。

私もそうでした。

私は、自分がはてなブログを育てていく様子をハウツーとして記事にしているので、ブログには写真を多用します。備忘録も兼ねているのでどうしてもスクショが多くなる(汗)

そんな時に、背景が白い画像を使用したことがありました。

そして、画像とサイトの背景との境界線がわからずになんとも見ずらい記事になってしまったことがあります。

これはいか~ん!!

と思い立って画像処理ソフトphotoshopで何とかしようとしてみたり(出来ず!)

無料のアプリを探してみたり(探せず!)

そんな時にはてなブログのHTML編集画面に手を加える方法を知りました。

もちろん、コードをコピペするだけの初心者にやさしい方法です!

ただ、紹介されている枠線は飾り枠のコードだったり、太い線の枠のコードだったりすることが多いです。

私は、写真が引き立つシンプルな枠線が欲しかったので、はてなブログのカスタマイズのサイトで提供されていた枠に、変更を加えて使うことにしました。

HTMLなんて全然わかんないよ!っていうあなたの為に

はてなブログの画像に枠線をつける方法を超丁寧に説明します。

よかったらお試しくださいね (*^-^*)

画像の枠線の有り無し比較

百聞は一見に如かずなのでまずは画像をみてください。

上の画像は背景の白と同化してどこからどこまでが画像なのかわかりません。

まぁ、これでもいいって言われたらそうなんだけど、やっぱりいまいち。

枠線を付けない画像:どこからどこまでが画像なのかわからない。

f:id:uraplanner:20190507172839p:plain

枠線を付けた画像:画像の範囲が一目瞭然。

世の中にはデザインされた画像枠がたくさんあるけど、画像のイメージを壊さないシンプルな枠線は必須のアイテムです。

それなかなかみつからなかった(泣)

私は、画像の背景が白ではない場合も、画像をひきたてる効果があるのでほとんどの画像に使用しています。

はてなブログの画像にコードを使って枠線をつける方法 

ブログの記事が書き終わって画像も挿入したら「編集見たまま」から「HTML編集」に表示を変えます。

HTML編集画面をすべて選択してコピーし、メモ帳などに一時保存してください。(失敗したときの保険の為です)

HTML画面で枠線をつけたい画像のコードを探してください。HTML編集の青い枠内が画像です。

f:id:uraplanner:20190507184614j:plain

緑の文字が画像です。前後の黒文字の文章を目印にしてくださいね。

この枠内の「src」の前に以下のコードを挿入します。

赤い小さな点があるのがわかりますか?この点めがけて下の水色の枠の中のコードをコピーして貼り付けてください。

黒1pix枠のコード

style=”display: inline-block; box-sizing: border-box; border: solid 1px #333;”

挿入した部分を青いハイライトにしてみました。(実際はハイライトにはなっていません)こんな感じです。

f:id:uraplanner:20190507185814j:plain

③続いて下の画像を見てください。

f:id:uraplanner:20190507235733j:plain

画像の一番前にある<p>を<div>に変更

画像の一番後ろにある</p>を</div>に変更

私は、この部分はコピペでなくpを消してdivを入力しています。 これで完了です。やったー(^O^)/ プレビューで確認してください。

もし失敗してしまって、どこを直したらいいのかわからなくなった時は、画像を消してからもう一度画像を挿入して最初からやり直しみるといいですよ。

コードって一度入れてしまうと元の状態がわからなくなってしうことがあるんですよね。もっと訳が分からなくなった時は、枠線を入れる前にコピーして別のところに保存しておいたHTMLのデータをまるっと上書きして元に戻してくださいね。

はてなブログで画像の枠線の色や太さを変える方法

せっかくなんで、線の太さや色を変えたりしてみましょう~。楽しいよ (≧▽≦)

ここで基本の黒1pix枠線のコードを見てください。

style=”display: inline-block; box-sizing: border-box; border: solid 1px #333;”

黄色が枠線の太さです

青が枠線の色です

これらの数値を変えることで枠線のプチカスタマイズができます。

色はカラーチャートを見て決めます。このサイトにカラーコードが紹介されていますので参考にしてくだい。Web Safe Color一覧表/カラーチャート

カラーコード

それぞれの色は#○○○というアルファベットと数字で表されます。ちなみに、黒枠の#333というのはカラーチャートにのっていませんが、黒に近いグレーです。

コードが載っているので好みの色のコードに変えてみましょう。♪♪♪

コードを使ってはてなブログの画像をオリジナルの枠線で囲ってみよう

独断と偏見でプチカスタマイズしてみましたので、気に入ったらコードをそのままコピーしてお使いください !

(≧▽≦)コードはsrcの前に入れるんだよ~。

 

★黒 1pix枠線(上で説明した枠です)

style=”display: inline-block; box-sizing: border-box; border: solid 1px #333;”

★ピンク 3pix枠線

style=”display: inline-block; box-sizing: border-box; border: solid 3px #f39;”

★イエロー 6pix枠線

style=”display: inline-block; box-sizing: border-box; border: solid 6px #fc3;”

★ブルー 10pix枠線

style=”display: inline-block; box-sizing: border-box; border: solid 10px #cff;”

細い線は濃い色で、太い線は薄い色で作るとおしゃれにできます。

以上で説明おわりっ!

はてなブログで画像に枠線を付ける方法。自由に使えるコード付き!:まとめ

はてなブログの画像に枠線をつけるための手順です。

  1. HTML編集画面に切り替える
  2. 失敗したときの為にすべて選択してコピーで一時保存
  3. コードをsrcの前に挿入する
  4. <p>を<div>に変更、</p>を</div>に変更

最初は

「う~~~面倒だなぁ」と思っていたけど、3回ほどやってみるとスイスイできるようになりました。

きれいにカスタマイズして読みやすいブログに💗

ちなみに念のために申し上げますが、今はワードプレスは引っ越しをいたしましたので、ご覧いたたいているブログははてなブログではありません。あしからず。

え、タダ?はてなブログからWordPressへの移行が無料【羽田空港サーバー】を利用した件はてなブログからワードプレスへの移行を無料でおこなっている『羽田空港サーバー』というサイトさんをご存知ですか?無料というとちょっと心配になりますよね。私は、はてなブログからワードプレスに移行した時に実際に無料で利用しました。その時のことを最初から最後まで詳しく説明しました。これを読めば『羽田空港サーバー』さんとのやり取りがわかりますよ。...

では、またっ!