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

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

2016-02-10 at 10.14.png

テーマで設定される 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 タグで囲われることになるので、

2016-02-10 at 10.04.png

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

2016-02-10 at 10.05.png

記事中での大まかな調整

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

2016-02-10 at 10.14.png

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

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

2016-02-10 at 10.15.png

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

2016-02-10 at 10.17.png

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

2016-02-10 at 10.17.png

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

画像自体に枠を作る

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

2016-02-10 at 10.21.png

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

2016-02-10 at 10.23.png

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。