【WordPress.com】画像周りの枠やスペースの調整方法

ここでは、WordPress.com の記事に貼り付けられている画像まわりの枠やスペースを調整する方法について覚え書きしたいと思います。

テーマで設定される CSS やその追加

私自身は以下のような CSS を追加して、画像まわりの枠の調整を行っています。

/* 画像に枠をつける */
.entry-content img:not(.bordernone):not(.emoji),
.entry img:not(.bordernone):not(.emoji),
.post-content img:not(.bordernone):not(.emoji) {
    border: 1px solid #eeeeee !important;
    padding: 6px !important;
    background-color: rgba(230,230,230,0.4) !important;
    box-sizing: border-box !important;
}

通常、画像は p タグで囲われることになるので、

画像の上下の間隔は、テーマにあらかじめ設定されている p タグの margin で調整されることになります。

記事中での大まかな調整

部分的に画像の上下に間隔を空けたいときには、原則として、ビジュアルモードでのリターンキーでスペースを作っています。

画像個別での画像まわりのスペースの調整

私自身は滅多に使いませんが、クラシックモードの以下のボタンから、画像の編集画面に移行し、

「画像マージン」のところに適当な数値 (px) を入力すると、

任意の画像まわりのスペースを調整することができます。

margin の重なり等の挙動については、以下の記事等をご参照ください。

• CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ｜2011-11-07（リンク切れ）

画像自体に枠を作る

この方法は全く使っていませんが、原理的には PhotoScape X 等で画像に枠を追加することによって、

見かけ上、スペースのように見せることができます。