Notes

メモ書き雑記ブログ(テニス・ガジェット・音楽活動など)

はてなブログの画像を枠線で囲む(初心者向け)

こうゆう白ベースの画像ってブログの背景との境目がわかりづらいので枠線付けたいと思ってたんです。

f:id:cask-st:20171022121158p:plain

やり方

 編集モード「見たまま」で画像を入れて、「HTML編集」で見るとこんな感じになるかと思います。

 <img class="hatena-fotolife" title="f:id:cask-st:20171022112233p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/c/cask-st/20171022/20171022112233.png" alt="f:id:cask-st:20171022112233p:plain" />

ここをこんな感じにします。赤字が追加したところ。

<img class="hatena-fotolife" style="border: solid 1px #BDBDBD;" title="f:id:cask-st:20171022112233p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/c/cask-st/20171022/20171022112233.png" alt="f:id:cask-st:20171022112233p:plain" />

そうするとこんな感じで枠線が付きます。

f:id:cask-st:20171022121158p:plain

 

解説

追加した「style="border: solid 1px #BDBDBD;"」部分の解説です。

style

ウェブサイトのレイアウトスタイル(例えば、文字フォントや色、等)を指定する属性です。

style="この中にどのようなレイアウトスタイルにするか書きます"

border

枠線の「線種」「太さ」「色」を指定するための属性です。

border: solid 1px #BDBDBD;

この場合、太さ1pxで灰色(BDBDBD)の実線(solid)で枠線を表示します。

色を変えたい場合は「カラーテーブル」とか「RGB」とかで検索すると、どんな値を入れればいいかすぐわかると思います。

 

もちろん指定する値を変えれば色々な設定できますが、今回はこの辺で。