はてなブログに貼付けた画像に枠線をつけて縁取りする方法を紹介します。
下の左側の画像のような状態です。
方法 1. ブログ内の全ての画像に枠線をつける方法
1つ目は、はてなブログに貼付けたすべての画像を縁取りする方法です。
画面上部のメニュー > 「デザイン」 > 「スパナマーク」 > 「デザインCSS」
以下のコードを追加
.entry-content img { border: 1px solid black; }
以上です。
これで、ブログ内の画像全てに枠線がつきます。
ある画像にだけ枠線をつけたくない場合
方法 1. ブログ内の全ての画像に枠線をつける方法を適用した後、
ある画像には枠線をつけない方法です。
準備
「デザインCSS」に画像の枠線の太さを0にするためのクラスを追加しておく必用があります。クラス名はなんでもいいですがno-borderとしておきます。
img.no-border { border: 0; }
記事を作成する時
「編集 見たまま」と「編集 マークダウン」でそれぞれ方法が異なります。
1. 「編集 見たまま」モードの場合
「HTML編集」タブを選択し、直接HTMLを修正します。
枠線をつけたい画像のクラスに、先程準備したno-borderを追加します。
class = "hatena-fotolife no-border"
これで、no-borderを追加した画像だけは枠線がつかないようになります。
2. 「編集 マークダウン」モードの場合
マークダウンモードの場合、一度記事を公開するかプレビューモードを表示する必要があります。
画像を右クリック > 「画像のアドレスをコピー」を選択
編集画面に戻り、枠線をつけたくない画像のコード（[f:id:hogehogehoge:plain]など）をいったん削除します。
かわりに以下のコードに置き換えます。
<img src="！ここにコピーしたアドレスを貼り付ける！" class = "no-border">以下のようなイメージですね。
【削除】
[f:id: hogehogehoge:plain]
【追加】
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/[はてなフォトライフ配下のパス]" style="no-border: 1px solid;">
方法 2. 画像一つ一つに枠線をつける方法
上で紹介した全ての画像に枠をつけておく設定はしていない場合の設定です。
準備として「デザインCSS」にborder-imageというクラスを追加しておきます。
.border-img { border: 1px solid black; }
こちらも「編集 見たまま」と「編集 マークダウン」とで方法が異なります。
1. 「編集 見たまま」モードの場合
「HTML編集」タブを選択
枠線をつけたい画像の class にborder-imageを追加。
class = "hatena-fotolife border-image"
2. 「編集 マークダウン」モードの場合
画像を右クリック >「画像のアドレスをコピー」を選択、
枠線をつけたい画像のコード（[f:id:hogehogehoge:plain]など）をごっそり以下に置き換えます。
<img src="！ここにコピーしたアドレスを貼り付ける！" style="border: 1px solid black;">
考え方はno-borderの時と同じです。クラス名をborder-imgに変えるだけです。これで特定の画像にのみ枠がつくようになります。
以上です。ブログの画像に枠を付ける方法でした。
