カスタムHTMLの画像などを中央寄せする方法

慣れたら5秒で完了できる

最近、オートパイロットプロジェクトやメルマガ塾セブンスについての話が続いていましたが、ちょっと小休止。

今回は、WordPress使用歴15年目である私の得意分野のひとつ、ブログカスタマイズについて。

えりかさんというフォロワーさんが、ブログ記事で楽天の商品リンク付き画像を中央寄せできない、と投稿されていました。

えりかさん以外にもご存知ない方がいたら参考にしてもらえるかなと思い、Xで中央寄せの解説を投稿しました。

せっかくなので、メルマガでも共有しておきますね。

この方法、慣れたら5秒で作業完了できます。

HTMLやCSSの知識は不要。誰でも簡単にできますよ。

カスタムHTMLを中央寄せする方法

それでは、カスタムHTMLを中央寄せする方法です。

楽天の画像バナーだけじゃなく、テキストリンク、Googleの地図、その他HTMLコードなど、カスタムHTMLに貼り付けるコードなら何でも中央寄せができちゃいます。

私のX投稿をそのまま貼り付けておきます。

順番に作業していけばOKです。

注意点

この方法は、WordPressのブロックエディタでの設定方法となります。

旧バージョンであるクラシックエディタだと、できないんじゃないかな。

クラシックエディタ、使ってたのはずいぶん前だから、もう忘れちゃいました。

余談ですが、クラシックエディタを現在もお使いの方、一刻も早くブロックエディタに移行したほうがいいですよ。

クラシックエディタは、いつ廃止になるか分かりませんからね。

ブロックエディタ、すぐ慣れます。そして圧倒的に便利です。

ブロックエディタじゃない人のやり方

上で紹介した中央寄せの方法を使えない人、

たとえば

という方々の場合は、

HTMLタグを直接修正すれば中央寄せができます。

たとえば楽天の商品画像のHTMLコードは、ザックリ書くとこんな感じです。

<a href="◯◯◯◯" 他省略>
<img src="△△△△" 他省略>
</a>

これを中央寄せにするには、コードの最初と最後にコードを追加するだけ。

赤文字で表示している箇所が追加分です。

<div style="text-align:center;">
<a href="◯◯◯◯" 他省略>
<img src="△△△△" 他省略>
</a>
</div>

見やすくするため改行させてますが、本来は1行のコードになってると思いますので、修正後のコードも1行でOKです。

<div style="text-align:center;"><a href="◯◯◯◯" 他省略><img src="△△△△" 他省略></a></div>

うまく中央寄せされなかった場合は、HTMLコードの部分が全角文字になっていないかをご確認ください。

特にダブルクォーテーション「”」はコピペすると勝手に全角文字へと変換されてしまう場合があります。半角文字で入力し直してみてください。

それでも、どうしてもうまくいかない場合は、このブログにある「お問い合わせ」ページからお問い合わせくださいね。

すぐには対応できない時もありますが、なるべく早くお返事するようにします。

あとがき

前回のメルマガを配信した後、オートパイロットのWebセミナー動画を視聴しました。

私が入塾した20期のときも特典が豪華だったんですけど、今回の21期も特典がエグいです。

21期生さん、どのくらい増えるんでしょうね。

セブンスに所属する者として、楽しみでなりません。