【超簡単】カスタムHTMLで貼り付けた広告バナーを中央よせする方法

スポンサーリンク
広告バナーを中央よせする方法副業全般

アフィリエイトのバナーをカスタムHTMLで貼り付けると…

こんな感じで左よせになって見た目がイマイチ。

意外と引っかかってしまうポイントだったりしますよね。

実はこれ、コピペで下記のコードを貼り付けるだけで簡単に解決できます!

<div style=”text-align:center”> ここに広告コードが入る </div>
※右よせの場合はcenterをrightに変える

一手間加えるだけでブログの見た目も整い、ブログに長く滞在してもらえる可能性も高まります。

他の方法も色々試しましたが、この方法が一番簡単かつ表示もきれいですので、本日はその方法をサクッと解説していきたいと思います。

ふくち
ふくち

3分程度で読める内容です。

最後にはいちいちコピペしなくてもコードを呼び出せる「再利用ブロック」の登録方法も説明しますので効率化に役立ててくださいね!

ちなみにわたしのブログの環境ですが

  • WordPress利用
  • テーマはCocoon(コクーン)を使用
  • エディタはブロックエディタを使用

環境が異なるとうまくいかない場合もあるかもしれませんのでご理解ください。

スポンサーリンク

カスタムHTMLの広告バナーの配置を変える3ステップ

女性が階段をのぼっているイラスト

CocoonのカスタムHTMLは基本的に左よせになっています。

次の手順で中央よせや右よせに変えることができます。

カスタムHTMLで貼り付けたバナーの位置を変える3ステップ
  1. 編集の形式を「HTML」に変更
  2. HTMLの前後にコードを貼り付ける
    ・HTML前 <div style=”text-align:center”> ※右よせの場合はcenterをrightに変える
    ・HTML後 </div>
  3. 保存して記事をプレビュー画面で確認する
ふくち
ふくち

画像付きで解説していきます

編集の形式を「HTML」に変更

先ほどのAmazonオーディブルのバナーを例にとって説明します。

記事の編集画面でクリックすると…上部に短いバーが表示されます。

編集画面でカスタムHTMLをクリックした時の表示画面
カスタムHTMLクリック後の画面

プレビューの左にある「HTML」をクリックして編集形式を切り替えます。

編集画面でカスタムHTMLをクリックし、HTMLを選択した画面
カスタムHTMLをHTML表示にした画面

HTMLの前後にコードを貼り付ける

HTMLでの表示に切り替えたら、元々あるコードの前後(①と②の位置)に下記のコードを貼り付けます。

編集画面でカスタムHTMLをクリックし、HTMLを選択した画面
貼り付け位置の説明画像

中央に配置する場合

①の箇所に <div style=”text-align:center”>

②の箇所に </div>

をコピペします。

ふくち
ふくち

スペースなどが入らないよう注意しましょう!

\無事中央表示にできました/

編集画面でカスタムHTMLの表示を「プレビュー」に戻しても右よせの表示のままですが、一旦保存して記事のプレビュー画面で確認すると中央寄せになっているのがわかります。

画面右側に配置する場合

①の箇所に <div style=”text-align:right”>

②の箇所に </div>

をコピペします。

                 \今度は右よせにできました!/

保存して記事をプレビュー画面で確認する

必ず正しく位置の変更ができているか記事のプレビュー画面で確認をしましょう。

以下はプレビュー画面のコピーですがいい感じですね!

プレビュー画面のキャプチャ

おまけ:中央よせ・右よせのコードを毎回コピペせずに利用する方法

最後に手間を減らすためのちょっとした方法をお教えします。

バナー広告を使う機会が多い場合は毎回コピペするのも手間ですよね。

「再利用ブロック」に中央よせのコードを登録してしまいましょう!

今お時間がない方はこのページをブックマークしておいて、時間のある時に作業してみてくださいね♩

ふくち
ふくち

右よせはあまり使わないので中央だけで良いと思います。
右よせならcenterをrightへ変えるだけでOK。

手順は下記の通り

中央よせのコードを再利用ブロックに登録・利用する手順
  1. カスタムHTMLに中央よせのコードを貼り付ける
  2. 再利用ブロックに登録する
  3. バナーを貼りつける位置で再利用ブロックを呼び出す
  4. 通常ブロックに変換する
  5. コードの間にバナーリンクのHTMLを貼り付ける

カスタムHTMLに中央よせのコードを貼り付ける

カスタムHTMLのブロックにコードを貼り付けます。

貼り付け用のコード:<div style=”text-align:center”></div>

カスタムHTMLに中央よせのコードを貼り付けたイメージ
カスタムHTMLにコードを貼り付けたイメージ

再利用ブロックに登録する

再利用ブロックに登録します。

右の︙をクリックしましょう。

カスタムHTMLに中央よせのコードを貼りつけた画面

メニューが出てくるので「再利用ブロックに登録」をクリックします

再利用ブロックの登録を選択している画面

ご自身でわかりやすい名前をつけて保存します。

再利用ブロックの名前を入力している画面

バナーを貼りつける位置で再利用ブロックを呼び出す

バナーを貼り付けたい位置で再利用ブロックを呼び出します。

ブロックメニューから再利用ブロックを呼び出している画面

すると先ほどコードを貼り付けた状態のカスタムHTMLが呼び出せます。

通常のブロックへ変換する

下記の図の四角が二重に重なったマークをクリックし、再利用ブロックを通常ブロックへ変換します。

再利用ブロックを通常のブロックへ変更する画面

再利用ブロックのまま編集すると編集した内容が大元の再利用ブロックに反映され、再利用ブロックを利用した箇所全てのHTMLが書き変わってしまいます。

コードの間にバナーリンクのHTMLを貼り付ける

呼び出したブロックにASPなどで取得(コピー)したバナーのコードを貼り付けます。

< >のコピーが漏れると正しく表示されないので気をつけましょう。

通常ブロックに変換したカスタムHTMLにコードを貼り付けるイメージ画像

まとめ:広告バナーを中央・右よせで配置する方法

今回はバナー形式のアフィリエイト広告を中央よせや右よせで表示する方法を解説しました。

もう一度手順をおさらいしておきます。

カスタムHTMLで貼り付けたバナーの位置を変える手順
  1. 編集の形式を「HTML」に変更
  2. HTMLの前後にコードを貼り付ける
    ・HTML前 <div style=”text-align:center”> ※右よせの場合はcenterをrightに変える
    ・HTML後 </div>
  3. 保存して記事をプレビュー画面で確認する

ひと手間加えるだけで不揃いだったブログの見た目も整い、読みやすいブログになります。

そのほかにもWordpressテーマCocoonで記事を書く際に役立つ情報を紹介しておりますので、ブログの見栄え向上にお役立てください!

\話題の書籍 累計収入5億円ブロガーきぐちさんのブログ本/

ダイヤモンド社
¥1,760 (2022/07/30 15:28時点 | Amazon調べ)
ふくち
ふくち

わたしはブログ歴約9ヶ月ですが、ブログのレベルUP・モチベーションUPにもってこいの本です!これからブログを始める方にもわかりやすい内容でとってもおすすめです!

コメント

タイトルとURLをコピーしました