Ver1.3.1をリリースしました(11/22)

ウィジェットの設定をしよう:広告の貼り方も解説

ウィジェットの設定をする

参考

ページタイトルサイト名

SANGOには以下の13種類のウィジェットがあらかじめ用意されています。

SANGOのウィジェット種類一覧

  1. サイドバー 必須
  2. 追尾サイドバー(PCのみ)
  3. ナビドロワー(ハンバーガーメニュー)
  4. トップページ下
  5. フッターウィジェット左
  6. フッターウィジェット中
  7. フッターウィジェット右
  8. 記事タイトル下広告(モバイル)
  9. 記事タイトル下広告(PC)
  10. 記事中広告 アドセンス
  11. 記事下広告(モバイル)
  12. アドセンス 記事下広告(PC)
  13. アドセンス関連記事型広告

このページでは、各位置のウィジェットの役割を解説していきます。

ウィジェットの設定の仕方

WordPressでのウィジェットの設定は[外観]⇒[ウィジェット]から行います。設定方法も簡単。表示させたいものを、表示させたい位置にドラッグするだけです。

ウィジェットの設定

ドラッグした後にはそのウィジェットのタイトル(空欄でもOK)と、内容を入力します。このあたりは実際にやってみるのが早いかもしれませんね。

 


サイドバー

サイドバーの位置

いちばん重要な部分ではないでしょうか。SANGOでも他のWordPressテーマと同様に「カテゴリー」や「最新記事」「テキストウィジェット」などをサイドバーに配置できます。

人気記事をプラグインなしで挿入できる

人気記事を表示

SANGOでは、人気記事ウィジェットがデフォルトで使用できるようになっています。通常だと「WordPress Popular Posts」というプラグインを使うことが多いかと思うのですが「重い」という声も聞かれるので、今回の実装に至りました。PV数や順位を表示させることもできます。

スマホ表示では、サイドバーはページ下に

画面が一定よりも小さくなるとサイドバーはページの下に表示されるようになります。

モバイルだけ非表示にすることも

「モバイル表示ではサイドバーは非表示にしたい」という場合には、カスタマイザーの「詳細設定」から1クリックで設定できます。詳しくはこちらの記事を参考にしてみてください。

カスタマイザーでデザイン設定
カスタマイザーでデザインや細かな設定をしよう

追尾サイドバー

追尾サイドバーは、一定以上スクロールした場合に固定されるウィジェットです。

目次を追尾させる例

通常のサイドバーの下に配置され、おもむろにピタッと止まります。使い方は簡単。「追尾サイドバー」に固定したいウィジェットをドラッグして入れるだけ。

TOC+(Table of Contents Plus)という目次プラグインを使っている場合には、目次を固定することもできます(TOC+ウィジェットを追尾サイドバー内にドラッグするだけ)。

MEMO
スマホでは追尾サイドバーは表示されません。

ナビドロワー(ハンバーガーメニュー)

ナビドロワーはモバイル(スマホ〜中サイズタブレット)でのみ設置されるメニューのことです。ハンバーガー型のメニューをタップすると表示されます。「×」もしくは「画面右側の暗くなった部分」をタップすると閉じます。

ナビドロワー

個人的なおすすめはウィジェットの一番上に[検索]を配置することです(タイトルは無しにしましょう)。

手前味噌
このナビドロワーにはJavascriptは使われていません。HTMLとCSSで動いています。

フッターウィジェット(左・中・右)

フッターウィジェットは、全ページの最下部に表示されます。

フッターウィジェット

閲覧デバイスのサイズによってレイアウトは変わり、PCサイズで見ると3列のウィジェットが横に並び、スマホサイズだと縦に並びます。

なお、フッターウィジェットの色はカスタマイザーの「色」メニューから変更できます。詳しくはこちらの記事をご参照ください。

色の設定をする
色の設定をしよう

広告を貼る時の注意点

ここからは主にサイトに広告を貼り付けたいときに活用できるウィジェットスペースになります。広告を貼るときには、カスタムHTMLウィジェットを配置し、[内容]欄に広告コードを貼りつけます。

Googleアドセンスの広告などで「スポンサーリンク」といった表記が必要なときにはタイトルに記入すればOKです(小さめに表示されるようになっています)。

トップページ記事一覧上 ver1.3〜

トップページの記事一覧上にのみ表示されます。広告などを設置するのが良いかと思います。SANGO ver1.3〜対応しています。

MEMO
パソコンとモバイル(スマホ/タブレット)で表示を切り替えたいときには「モバイルだけで表示するショートコード」や「PCだけで表示するショートコード」をご利用ください(ショートコード解説へ)。

トップページ記事一覧下

こちらに設置したウィジェットは、トップページの記事一覧の下にのみ表示されます。広告を設置するためなどにご活用頂ければと思います。

記事一覧下


記事タイトル下広告

記事ページのタイトル(とアイキャッチ画像)下のスペースに広告を設置できます。カスタムHTMLウィジェットを配置してご利用ください(もちろん広告以外をのせてもOKです)。

「モバイル用(スマホ/タブレットでのみ表示)」と「PC用(PCでのみ標示)」を用意しています。必要に応じて広告を貼り分けてくださいませ。

MEMO

モバイル用にAdsenseの「ラージモバイルバナー(320px・100px)」を使うときには、余白調整のために以下のタグで囲って頂くと、広告が画面からはみ出ることが無くなります。

<div style="margin: 0 -15px">
広告のコードをここに
</div>

記事コンテンツ後広告

記事本文後&シェアボタン前のスペースに表示されます。こちらもPCとモバイル両方を用意しているので、必要に応じて別の広告を貼って頂ければと思います。

記事コンテンツ後広告


記事中広告

こちらに設置したウィジェットは、記事本文内の1番最初のh2見出し前に表示されます。


関連記事広告

最近よく見かけるようになったGoogleアドセンスの関連記事型広告の設置用スペースです。

関連記事広告

関連記事広告は、シェアボタンなどの下に配置されます。こちらもカスタムHTMLウィジェットを配置し、コードを貼り付けるだけで設定は完了です。タイトルは空欄でも「関連記事」などとしても良いでしょう。

この記事にもぬるっと関連記事広告を設置してみました。SANGOテーマから少しカスタマイズしてあるので、デザインはやや異なりますが、イメージは掴めるのではないかと思います。

18 Comments

プログラミングど素人

いつも勉強させて頂き、ありがとうございます。
googleのadsense広告コードをトップページ記事下一覧、記事コンテンツ後広告(モバイル)、記事コンテツ後広告(PC)の3箇所に貼り付けたのですが、PC、ipad,iphoneで確認しても表示がされてなかったり、おかしな表示になっていたりするのですが、何が悪いのか全くわかりません。お手数ですがご教示頂けますか?ご確認よろしくお願いします。

返信する
プログラミングど素人

すみません。PCは問題なく表示されていました。ipadとiphoneでChromeで見るとサイドバーとヘッダー、フッターの変な場所に広告が現れるようなのですが・・・どちらもSafariで見た場合は問題ありません。ご確認よろしくお願いします。

返信する
サルワカくん

変な場所とは具体的にどこでしょうか。
見たところ記事下の「Sponsored Link」の下あたりのコードが変なことになっています。
(そもそも「Sponsored Link」という文字はどのように入力されましたか?)
何かカスタマイズされましたか?

また、キャッシュ系のプラグインを入れているのであれば、一度オフにしてください
(というより全てのプラグインを一度停止してみてくださいますか?)
本来のテーマでは起こり得ない現象なのですが…。

返信する
プログラミングど素人

わかりました!
記事下の「Sponsored Link」の下あたりのコードが変なことになっています。で修正できました。
お騒がせ致しました。
ありがとうございますm(_ _)m

返信する
よろしくお願いします。

始めまして。ウィジェットにアドセンス広告を設置していますが、特定ページには広告を設置しないことはできますか?

返信する
サルワカくん

SANGO Ver1.3〜は、投稿編集画面で「この記事には広告を表示しない」というチェックボックスが表示されるようになりました。こちらにチェックを入れるとその記事には表示されなくなります。

返信する
土井仲

はじめまして。このページを参考にして追尾サイドバーに目次を配置したのですが、目次のタイトル部分だけが表示できません。これは何が原因なのでしょうか?
参考資料としてこの現象が発生しているサイト(記事のページ)を載せます。

返信する
土井仲

確認したのですが入力しています。具体的には「目次の上にタイトルを表示」のチェックボックスを入力し、その下にあるテキストボックスに「目次」と入力しています。

返信する
サルワカくん

それはTOC+の設定でしょうか。
ウィジェット設定のタイトルは入力していますか?
管理画面⇒外観⇒ウィジェット⇒追尾サイドバー⇒TOC+のタイトル欄です。

返信する
土井仲

解決しました。タイトルが表示されなかったときは、ライブプレビューで管理→ウィジェット→追尾サイドバー(PCのみ)から設定しました。この時「エラーが発生しました。リロードしてもう一度お試しください。」とエラーメッセージが出ていたのですが、管理画面⇒外観⇒ウィジェット⇒追尾サイドバーから設定するとタイトルを表示できました。ありがとうございました。

宜しくお願い致します

お世話になっております。
サイドバーにアドセンスの広告を入れたいのですが、ウィジェットの「カスタムHTML」を使用すればよろしいのでしょうか。
その場合、上下左右の空白を調整するとしたら、どのように行えばよろしいのでしょうか。
どうぞ宜しくお願い致します。

返信する
サルワカくん

はい。カスタムHTMLをご利用ください。
上下左右の余白を調整するのであれば、ウィジェットには
<div class="sidebar-ads">
ここにAdSenseコード
</div>
と書き、クラス「.sidebar-ads」に対して、CSSのpaddingかmarginで余白調整をします。
paddingとmarginの書き方はこちらで解説しています。
https://saruwakakun.com/html-css/basic/margin-padding

返信する
宜しくお願い致します

早速の返信ありがとうございます。
「カスタムHTML」に

ここにAdSenseコード

と記述し、SANGO子テーマのスタイルシートに教えて頂いたページを参考に
.sidebar-ads {
margin: 5px
}
と記述したところ、上左右に余白は取れたのですが、どうしても下に余白が取れません。
{margin: 10px 10px 10px 10px}という方法でも試してみましたが、上手くいきませんでした。
アドセンスの広告は「レスポンシブ」を使っております。
アドバイスを頂けますよう、宜しくお願い致します。

返信する
宜しくお願い致します

お世話になっております。
.sidebar-ads {
padding: 2%
}
とだけ記述したところ、無事に空白が入りました。
ありがとうございました。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です