アフィリエイトのバナーをカスタムHTMLで貼り付けると…
このような形で左よせになって見た目がイマイチ↓↓
実はこれ、コピペで下記のコードを貼り付けるだけで簡単に解決できます！
<div align =”center”> ここに広告コードを入れる </div>
※右よせの場合はcenterをrightに変える
実際に上記のコードを使用したものがこちら↓↓
<中央よせ>
<右よせ>
ちなみにわたしのブログの環境ですが
別のブログでは有料テーマのSWELLを利用していますが、こちらもでも問題なく使用できています。
環境が異なるとうまくいかない場合もあるかもしれませんのでご理解ください。
カスタムHTMLの広告バナーの配置を変える３ステップ
CocoonのカスタムHTMLは基本的に左よせになっています。
次の手順で中央よせや右よせに変えることができます。
カスタムHTMLで貼り付けたバナーの位置を変える３ステップ
- ブロックからカスタムHTMLを選択
- HTMLの前後にコードを貼り付ける
・HTML前 <div align = “center”> ※右よせの場合はcenterをrightに変える
・HTML後 </div> - 保存して記事をプレビュー画面で確認する
ふくち
画像付きで解説していきます
STEP1: ブロックからカスタムHTMLを選択
ブロックから、「カスタムHTML」を選択します。
HTMLを編集をクリックする。
HTMLの前後にコードを貼り付ける
HTMLの入力ボックスに以下の通り入力し、最後に「更新」で保存します。
最初に <div align =”center”>
次にアフィリエイト広告のコードをコピーしたもの
最後に </div>
保存して記事をプレビュー画面で確認する
必ず正しく位置の変更ができているか記事のプレビュー画面で確認をしましょう。
まとめ：広告バナーを中央・右よせで配置する方法
今回はバナー形式のアフィリエイト広告を中央よせや右よせで表示する方法を解説しました。
もう一度手順をおさらいしておきます。
カスタムHTMLで貼り付けたバナーの位置を変える３ステップ
- ブロックからカスタムHTMLを選択
- HTMLの前後にコードを貼り付ける
・HTML前 <div align = “center”> ※右よせの場合はcenterをrightに変える
・HTML後 </div> - 保存して記事をプレビュー画面で確認する
ひと手間加えるだけで不揃いだったブログの見た目も整い、読みやすいブログになります。
そのほかにもWordpressテーマCocoonで記事を書く際に役立つ情報を紹介しておりますので、ブログの見栄え向上にお役立てください！
＼話題の書籍 累計収入５億円ブロガーきぐちさんのブログ本／
ポチップ
コメント