サイドバーに広告を表示されたい
こんにちはティロといいます
よくサイドバーに広告が貼ってあるサイトを見ますよね．
今回はTHE THORというテーマを使用して広告をサイドバーに表示する方法を紹介します．
正直，THE THORじゃなくても大丈夫です．
THE THORは標準で広告を表示されるウィジットが用意されています．
THE THORに用意されているウィジット
THE THORに用意されているものは広告のタイトルと広告タグを入れるだけです．．．
入力して表示させてみると
うーん，ちょっと寂しくないですか？
タイトルをもう少し大きくしたいですし，タイトルの下にちょっとしたアピールポイントを書きたいですよね．
そこで今回はこんな感じにしてみたいと思います．
カスタマイズ方法
カスタマイズ方法はとても簡単です．
まずIcons | Font Awesomeのアイコンを使用します．
このアイコンの使い方はこちらの記事で紹介しています．
関連記事
ティロこんにちは！理系大学生のティロといいます。 グローバルナビゲーションにアイコンをつける方法を簡単に紹介します。今回はアイコン界で有名なFont awesome iconを使います。[…]
外観のウィジットを開き，カスタムHTMLをサイドバーエリアにセットしてください．
タイトルは書かなくて大丈夫です．
内容のところに以下のコードを張り付けてください．
1 2 3 4 5 | <div class= "ad_sidebar_content"> <!--ここに広告タグを挿入 --> <p class ="ad_sidebar_title"> タイトル</p><!-- 例だとここにアイコンを入れている--> <div class ="ad_sidebar_des"><span>マーカー</span><p>説明文</p></div> </div> |
次に外観のカスタマイズから追加CSSを開いてください．
以下をコピペしてください．
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .ad_sidebar_content { padding: 10px; font-size: 18px; text-align: center; } .ad_sidebar_des { text-align: left; font-size: 14px; padding-top: 10px; line-height: 2.5rem; } .ad_sidebar_des span { background:linear-gradient(transparent 60%, #6cf 60%); font-size: 16px; } |
以上で完成です．
お疲れまでした．