まるノート

備忘録も兼ねて、様々なお役立ち情報をまとめています。

【はてなブログ】画像に枠線をつける

はてなブログに貼付けた画像に枠線をつけて縁取りする方法を紹介します。
慣れるととても簡単ですが、ブログを始めたてのころはそれなりに調べた記憶があるので、なるべく丁寧に手順をお伝えしたいと思います。


方法 1. ブログ内の全ての画像に枠線をつける方法

一つ目は、はてなブログに貼付けたすべての画像を縁取りする方法です。
編集モードは「見たまま」でも「マークダウン」でも有効です。

メニュー > デザイン > スパナマーク > デザインCSS

以下のコードを追加

.entry-content img {
  border: 1px solid black;
}

以上です。一度このCSSを追加しておけば、記事を書く時に特別な操作をしなくても常に反映されるようになります。


「ブログ内の全ての画像に枠線をつける」を設定済み、だけどある画像にだけ枠線をつけたくない場合

準備として「デザインCSS」に以下のコードを追加しておきます。

img.no-border {
  border: 0;
}


次に、記事を作成する際には以下の作業を行います。
「編集 見たまま」と「編集 マークダウン」でそれぞれ方法が異なります。

1. 「編集 見たまま」モードの場合

「HTML編集」タブを選択
枠線をつけたい画像の class にno-borderを追加。

class = "hatena-fotolife 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-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に変えるだけです。
これで特定の画像にのみ枠がつくようになりました。


以上、ブログの画像に枠を付ける方法でした。