画像 | アメブロメーカー https://nk-media.org Sun, 15 Aug 2021 08:25:14 +0000 ja hourly 1 https://wordpress.org/?v=6.3.8 https://nk-media.org/wp-content/uploads/2023/04/cropped-amekuma01-32x32.png 画像 | アメブロメーカー https://nk-media.org 32 32 182339089 【簡単】アメブロで画像やボックスを中央・センター寄せする方法を解説 https://nk-media.org/img-center/ https://nk-media.org/img-center/#respond Sat, 12 Sep 2020 09:43:21 +0000 https://nk-media.org/?p=877 この記事の特徴

重要度 3.0
難易度 1.0

この記事ではアメブロで記事内で「画像」または「ボックス」を、真ん中に配置する方法を解説します。

「画像・写真」と「囲み枠などのボックス」では、センタリングの方法が違うので確認しておきましょう。

くますけ
中央に配置したい時ってあるよね。どうするんだろ・・・
あめっくま
とても簡単にできるよ。サクッと配置しよう。

写真や画像を中央寄せ

写真や画像を真ん中に寄せるのは簡単です。

センターに配置したい画像をクリックします。

画像をクリック

サイズ・貼り付け位置・代替テキストを設定できるボックスが出るので、「中央寄せ」のアイコンをクリックして下さい。

画像の中央寄せをクリック

すると下記のように、写真が真ん中に配置されます。

画像を中央寄せできた

「左寄せ」のアイコンをクリックすれば、元通り左側に配置されます。

くますけ
画像の中央寄せは簡単だね。

なお写真やイラストなどの画像を使う時は、「画像の軽量化」と「代替テキスト」の入力を必ず行いましょう。

検索エンジンからのアクセス数に影響が出るので、画像を使用する時は必須の設定ですね。

あめっくま
画像を使う時は軽量化と、代替テキストを忘れずに！
関連記事

ボックスを中央寄せ

ブログ記事でボックス枠を使うのは、「読者の途中離脱を防ぐ」・「申込者数を増やす」ために大事の手法ですよね。

ボックスの幅を100%から狭くした場合に、中央寄せしたいというケースもあります。

あめっくま
ボックスの場合は、画像と方法が異なります。

実例で紹介

例えば下記のような、幅を狭くしたボックスを真ん中に配置します。

例えばこのようなボックスをセンター配置してみます。

ちなみにこのボックスを使う時のコードは以下のとおりです。（コードの意味は分からなくても大丈夫）

<div style="max-width: 250px; border: 2px solid #eb6ea5; background: #fbe4ee; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>

中央寄せする時は、「margin: 0 auto;」というコードをコピペするだけ。

<div style="max-width: 250px; border: 2px solid #eb6ea5; background: #fbe4ee; box-shadow: 3px 3px 6px -2px #555; padding: 15px; margin: 0 auto;">
<p style="margin: 0;">ここに文章</p></div>

赤線が追加したコードです。加えると、下記のように中央に移動します。

例えばこのようなボックスをセンター配置してみます。

くますけ
コードを加えるだけでいいんだね。

例えば下のような「黒板風のボックス」も中央寄せが可能です。

ボックス枠のメリット
  • 記事が読みやすくなる
  • 読者の印象に残りやすい
  • サイトの素人感が減る

ちなみにこのボックスのコードは以下のとおりです。（コードの意味は分からなくても大丈夫）

<div style="max-width: 280px; border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<ul style="margin-left: 20px; padding-left: 0px;">
    <li style="margin-bottom: 1em;">箇条書き1</li>
    <li style="margin-bottom: 1em;">箇条書き2</li>
    <li style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div>

「margin: 0 auto;」のコードを追加すると、下記のように中央に寄りますね。

囲み枠のメリット
  • 記事が読みやすくなる
  • 読者の印象に残りやすい
  • サイトの素人感が減る

真ん中に配置した時のコードは下記のとおりです。

<div style="max-width: 280px; border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<ul style="margin-left: 20px; padding-left: 0px;">
    <li style="margin-bottom: 1em;">箇条書き1</li>
    <li style="margin-bottom: 1em;">箇条書き2</li>
    <li style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div>

赤線が追加したコードで、方法は同じです。

幅を調整したボックスは、中央寄せする方が見やすい場合があります。ちょっとした工夫が大事ですね。

あめっくま
コードが複雑なボックスは「うまくいかない」場合もあるかもしれません。困ったら記事下コメント欄から質問して下さいね。

当サイトではアメブロ向けのボックスを、数多く用意しています。

全てコピペでだけで簡単に使えるので、「読みやすい記事」・「印象に残る記事」にするために使いましょう。

関連記事
【素材数No.1】アメブロ用の囲み枠・ボックス厳選300種
この記事ではアメブロ用の囲み枠・ボックス・フレーム枠のデザインを提供しています。素材は約300種類（色も選べる）・コピーして貼り付けるだけ（HTML・CSSの知識不要）シンプル・かわいい・かっこいいな囲み枠を用意しています。囲み枠を使っておしゃれなブログにしましょう。
nk-media.org

]]> https://nk-media.org/img-center/feed/ 0 877