【WordPress】ブログに自分の広告バナーを設置してみたよ

とっちゃん@nyanco! です。

今回はWordPressのブログに自分の広告バナーを設置してみたよというお話です。

ふと、このブログに自分のLINEスタンプの広告バナーを貼ってみようと思い、調べてみるととても簡単にできたのでやり方とサンプルコードをご紹介します♪

筆者と同じように、自分のLINEスタンプなどのPRをしたい人には参考になるかも知れません。

完成形はこちら

まず、完成形をお見せします。

超シンプルなバナーです ^^;

遊び心で、マウスホバーするとイラストがちょっと回転しながら拡大する動きをつけてますので良かったらマウスオンしてみてください。

▼サンプルです。ちょっと拡大して主張します w

LINEスタンプ作成時に作った背景が透明のpngデータがあれば、同じように再現できるはずです。

ちなみにパソコンなどのスクリーン幅が広いデバイスでないと表示されないようになってます（恐らく設定で変更可能だと思います）。

それにしても最近は、JavaScript不要でCSSの記述だけで色んなアニメーションができるようになってて楽しいですね〜♪

設置方法

特にテーマやプラグインに依存せず、WordPressの基本機能で実装できます。

ウィジェットの「カスタムHTML」を追加する

「ウィジェット」という機能を使います。
「ウィジェット」とは、webページのパーツのようなイメージですね。

①WordPress管理画面左メニュー「外観」>「ウィジェット」をクリック。
②「利用できるウィジェット」の項目にある「カスタム HTML」を探してクリック。
③「サイドバー」にチェックが入っているのを確認し、「ウィジェットを追加」をクリック。

カスタムHTMLを編集する

④「タイトル」に任意のテキストを入力。見出しになります。空白でもOKです。
⑤「内容」の欄に表示させたいHTMLを記述します。

サンプルとして、本ブログに貼り付けているHTMLを掲載しておきます。

<section class="myad_area">
	<p class="myad_copy1">
		＼ お好きなテキスト ／
	</p>
	<!-- バナー -->
	<a href="リンク先のURL" target="_blank">
		<div class="myad_block">
			<img src="画像パス" alt="">
		</div>
	</a>
</section>

良かったらコピペして自由にカスタムして使ってください♪

CSSを編集する

「カスタムHTML」のhtmlに直接style指定しても良いですが、やはりCSSは別ファイルにしておく方が管理しやすいので筆者は以下にCSSを追記しました。

WordPress管理画面左メニュー「外観」>「テーマエディター」>「スタイルシート」。

CSSのサンプルを掲載しておきます。

/* myad style ここから */
.myad_area div img{
 transition: all 0.5s ease 0s; /* ふわっとアニメーションさせる */
}
.myad_area div img:hover{
 transform: scale(1.4) rotate(15deg); /* 拡大＆回転させる */
}
.myad_copy1{ /* バナー上テキスト設定 */
 text-align: center;
 font-size: 0.9rem;
 font-weight: bold;
}
.myad_block{
 background: #ffe4b5; /* バナーの背景色 */
 border-radius: 30px; /* バナーの角丸設定 */
 display: flex; /* .myad_block img を天地左右中央にする */
 justify-content: center; /* 左右中央にする */
 align-items: center; /* 天地中央にする */
}
.myad_block img{
 width: 50%; /* 画像の大きさ設定 */
}
/* myad style ここまで */

こちらも良かったら自由にカスタムして使ってください♪

おわりに

アクセスもまだあまりないサイトに自分の広告バナーを設置して、果たして効果があるのかは不明ですが、簡単に設置できてしまうのはさすがWordPressですね〜。

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧