どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【Stinger5】PCで記事下に2つ横並びの広告を表示する方法

      2015/11/07


WordPressでブログを運営していて、Stinger5のテーマを利用している人も多いですよね。

 
SEOに強いと言われるテーマであり、且つ収益化のための広告掲載も簡単に行えるという利点があり、広告もパソコンとモバイル表示で別々のレイアウトを利用する事が出来るのもうれしいところです。

 
Stinger5では、パソコンで表示した場合に記事下に広告を2つ縦並びに表示してくれる機能があるのですが、どうせなら「2つ横並びにしたい」と思う人も居る事でしょう。

 
Stinger5でパソコンで記事を表示した際に、記事下に2つ横並びの広告を表示する方法について簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 
【Stinger5】PCで記事下に2つ横並びの広告を表示する方法
 

 

Stinger5でPC表示の際に2つ横並びの広告を表示する方法とは

Stinger5でPC表示の際に2つ横並びの広告をする方法とは、Stinger5のテーマを利用している時にウィジット機能によって追加できる記事下のパソコン用の2つ縦並びになっている広告を横並びにテーマをカスタマイズする事です。

 
なお、Stinger5この方法ではテーマのプログラムコードやCSSを編集してテーマをカスタマイズしていきます。

 
2つ横並びの広告を表示するレイアウトの事を「ダブルレクタングル」と言います。

 
Stinger5で追加する事が出来るパソコン表示の際の記事下2つの縦並び広告をダブルレクタングルにするには、次のような流れで行う事が出来ます。

  • 投稿記事の横幅の調整
  • 広告の横並びCSSの追加
  • ダブルレクタングルCSSを広告に適用する

 
ちなみに、この方法は「STINGER5でアドセンスの配置を記事下ダブルレクタングルに変更してみました」の記事を参考にさせてもらいました、ありがとうございます。
それぞれ具体的に見ていきましょう。

 

 

 

 

投稿記事の横幅の調整

投稿記事の横幅の調整では、広告をダブルレクタングルで表示した際に広告によってレイアウト崩れが発生しないよう、あらかじめ適切な形で横幅を広げます。

 
投稿記事の横幅の調整では、Stinger5のデフォルトの横幅が980pxとなっていますが、これを1100pxに調整しましょう。

 
投稿記事の横幅の調整を行うには次の流れで修正を行いましょう。

  • style.cssの編集画面を開く
  • 修正箇所を探す
  • 投稿記事の横幅の調整を行う

 
Stingr5はテーマ全体の横幅として「980px」がデフォルトで指定されています。
対してサイドバーの横幅は「300px」がデフォルトとして指定されている為、記事部分の横幅はデフォルトで「680px」となります。

 
カスタマイズする事によってテーマ全体の横幅が「1100px」となります。
サイドバーの横幅は「300px」でデフォルトのままなので、記事部分の横幅はデフォルトで「750px」となります。

 
Stinger5の記事下2連の広告の推奨サイズは横幅が「336px」で純粋に二つ並べると「672px」が必要となります。
デフォルトの場合だとカツカツの表示となりますが、横幅を広げる事で余裕を持った広告表示とする事が出来るのです。

 
では、具体的に投稿記事の横幅の調整を行っていきましょう。

 

 

 

style.cssの編集画面を開く

style.cssの編集画面を開く
投稿記事の横幅の調整はWordpressの管理画面から「外観」->「テーマの編集」から「style.css」を選択して編集を行います。
style.cssの編集画面を開くには、Wordpressの管理画面から次のイメージのように、「外観」を選択し、テーマの編集を選びましょう。
style.cssの編集画面を開く-1

 
テーマの編集画面が開くと、デフォルトでstyle.cssの編集画面が表示されるはずです。

 
見出し画像の例では、実際にstyle.cssの編集画面を開いたイメージです。

 

 

 

修正箇所を探す

次に、style.cssから修正個所を探していきましょう。
style.cssで修正する場所は「レイアウト スマートフォン」の「#wrapper」と記述されている部分になり、横幅の調整で修正するのはこの一箇所となります。
行数で言うと大体985行目付近に記述があるはずです。

 
デフォルトでは次のような記述があると思います。

 

 

 

 

投稿記事の横幅の調整を行う

横幅調整の箇所がわかったら実際に投稿記事の横幅の調整を行っていきましょう。
横幅の調整は先ほど探した「#wrapper」内の「max-width」の値を修正しましょう。

 
元々の値が「980px」となっていると思いますが、この値を「1100px」に修正します。
修正した後の記述がこちらです。

 
横幅の調整が終わったら、「ファイルを更新」ボタンを押せば横幅の調整は完了です。
 

 

 

広告の横並びCSSの追加

Stinger5のパソコンの記事下2連の縦並びの広告はデフォルトの状態では、回り込みの指定がされていないので広告を回り込ませてダブルレクタングルの表示が出来るようにしていきます。

 
広告の横並びCSSの追加では「style.css」を編集し必要な要素を追加していきます。
style.cssは次の手順で修正していきましょう。

  • 修正箇所を探す
  • 広告の横並びCSSの追加

 
具体的に流れについて確認していきましょう。

 

 

修正箇所を探す

広告横並びCSSを追加する修正個所を探していきましょう。

 
広告横並びCSSを追加する修正個所は「@media only screen and (max-width: 780px)」のCSSが追加されている「/*media Queries タブレットサイズ」の直前に追加するようにしましょう。

 
行数で言うと大体1020行目付近が目安となります。
修正個所は広告横並びCSSを追加する前は次のような記述となっています。

 

 

 

広告の横並びCSSの追加

広告の横並びCSSを追加する修正個所が見つかったら、実際に広告の横並びCSSを追加しましょう。
CSSは2つ並びの広告を統括するCSSと、左に表示する広告の指定、右に表示する広告の指定を行っていきます。

 
今回追加したCSSは次の通りです。

 

 
修正を追加する箇所を更に全体として見てみると次のような記述になっていれば問題ないかと思われます。

 

 

 

ダブルレクタングルCSSを広告に適用する

広告をダブルレクタングルで表示する為のCSSをStinger5の広告表示を行うPHPに追加していきましょう。
Stinger5のパソコン記事下の2つの広告を表示する制御を行っているPHPは「single.php」です。

 
ダブルレクタングルCSSを広告に適用するには次の手順を行いましょう。

 

  • sigle.phpの編集画面を開く
  • 修正個所を探す
  • 広告にダブルレクタングル表示を適用する

 
では、それぞれの手順を具体的に見ていきましょう。

 

 

 

sigle.phpの編集画面を開く

sigle.phpの編集画面を開く
パソコン表示の際の記事下の二つの広告を制御するsigle.phpの編集画面を開いていきましょう。
投稿記事の横幅の調整はWordpressの管理画面から「外観」->「テーマの編集」から「sigle.php」を選択して編集を行います。
style.cssの編集画面を開くには、Wordpressの管理画面から次のイメージのように、「外観」を選択し、テーマの編集を選びましょう。
style.cssの編集画面を開く-1

 
テーマの編集画面が開くと、デフォルトではstyle.cssの編集画面が表示されているので「テンプレート」の一覧から「単一記事の投稿(single.php)」の編集画面のリンクを選択してsigle.phpの編集画面を開きます。

見出し画像の例は、sigle.phpの編集画面です。

 

 

修正個所を探す

広告をダブルレクタングル表示にする為、PHPの修正個所を確認していきましょう。
single.phpで修正する箇所は52行目から始まる「//アドセンス読み込み」のコメントがある付近です。

 
52行目~58行目までの広告を置き換えて、ダブルレクタングル対応の広告コード表示の処理を記述していきます。
修正前のsigle.phpの処理は次の通りとなります。

 

 

 

広告にダブルレクタングル表示を適用する

修正個所が見つかったら実際に広告にダブルレクタングル表示を適用しましょう。
広告にダブルレクタングル表示を適用するには次のPHPコードを利用します。

 

 

 
実際に適用した結果を全体的に前後の関係も踏まえてみてみると次のようなPHPコードになります。

 
修正が終わったら「ファイルを更新」ボタンを押して変更を保存しましょう。

 

 

 

 

パソコン表示で記事下の広告がダブルレクタングルになっているか確認する

パソコン表示で記事下の広告がダブルレクタングルになっているか確認する
CSS、PHPの修正が終わったら、実際にパソコンでブログにアクセスして、記事下の広告がダブルレクタングル表示になっている確認しましょう。
次の画像のようにこれまでの修正で見事、記事下の広告がダブルレクタングル表示になりましたね。

 

 

 

 

スポンサーリンク


Stinger5 PCで記事下に2つ横並びの広告を表示する方法 あとがき

Stinger5 PCで記事下に2つ横並びの広告を表示する方法 あとがき
Stinger5でパソコンからアクセスした際にダブルレクタングルで広告を表示する方法について紹介しました。
CSSやPHPを編集するので慣れていない人にはもしかすると大変な作業だったかもしれませんね。

 
記事下に縦に2つ広告を並べるか、横に二つ広告を並べるかでもしかすると広告の掲載効果が上がるかもしれませんが、実際どれほどの効果が上がるかは未知数ですが、一つ一つ広告を並べると左右の余白があいたりとスペースがうまく活用できていない感覚もあるので、ダブルレクタングル表示はそういった違和感を解消してくれるかもしれません。

 
広告はもはやコンテンツの一部と言っても過言ではないので広告だからと言ってレイアウトにこだわらないのはもったいないし、自分にとっても読者にとっても大きな機会ロスとなってしまう事も考えられるので適切なレイアウトで掲載していきたいですよね。

 
Stinger5でパソコンからアクセスした際にダブルレクタングルで広告を表示する方法を使って適切な広告の掲載を行っていってくださいね。

 

 

 

 

Stinger5 PCで記事下に2つ横並びの広告を表示する方法 まとめ

Stinger5 PCで記事下に2つ横並びの広告を表示する方法 まとめ
Stinger5でPC表示の際に2つ横並びの広告をする方法とは、Stinger5のテーマを利用している時にウィジット機能によって追加できる記事下のパソコン用の2つ縦並びになっている広告を横並びにテーマをカスタマイズする事です。

 
なお、Stinger5この方法ではテーマのプログラムコードやCSSを編集してテーマをカスタマイズしていきます。

 
2つ横並びの広告を表示するレイアウトの事を「ダブルレクタングル」と言います。

 
Stinger5で追加する事が出来るパソコン表示の際の記事下2つの縦並び広告をダブルレクタングルにするには、次のような流れで行う事が出来ます。

  • 投稿記事の横幅の調整
  • 広告の横並びCSSの追加
  • ダブルレクタングルCSSを広告に適用する

 
投稿記事の横幅の調整では、広告をダブルレクタングルで表示した際に広告によってレイアウト崩れが発生しないよう、あらかじめ適切な形で横幅を広げます。

 
投稿記事の横幅の調整では、Stinger5のデフォルトの横幅が980pxとなっていますが、これを1100pxに調整しましょう。

 
投稿記事の横幅の調整を行うには次の流れで修正を行いましょう。

  • style.cssの編集画面を開く
  • 修正箇所を探す
  • 投稿記事の横幅の調整を行う

 
Stinger5のパソコンの記事下2連の縦並びの広告はデフォルトの状態では、回り込みの指定がされていないので広告を回り込ませてダブルレクタングルの表示が出来るようにしていきます。

 
広告の横並びCSSの追加では「style.css」を編集し必要な要素を追加していきます。
style.cssは次の手順で修正していきましょう。

  • 修正箇所を探す
  • 広告の横並びCSSの追加

 
広告をダブルレクタングルで表示する為のCSSをStinger5の広告表示を行うPHPに追加していきましょう。
Stinger5のパソコン記事下の2つの広告を表示する制御を行っているPHPは「single.php」です。

 
ダブルレクタングルCSSを広告に適用するには次の手順を行いましょう。

 

  • sigle.phpの編集画面を開く
  • 修正個所を探す
  • 広告にダブルレクタングル表示を適用する

 

 
最後までお読みいただきありがとうございました。

スポンサーリンク





 - Wordpress , , ,

Message

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

  関連記事

【Autoptimize】JavaScriptを縮小化するAutoptimizeの基本設定 簡単設定!
【Autoptimize】JavaScriptを縮小化するAutoptimizeの基本設定 簡単設定!

Autoptimizeには基本設定と高度な設定があり、基本設定については初心者で …

【Quick Adsense】広告を掲載するページの種類を指定しよう
【Quick Adsense】広告を掲載するページの種類を指定しよう

Quick AdsenseでGoogle Adsenseや忍者Admaxといった …

【W3 Total Cache】ブラウザキャッシュのHTMLとXMLの設定
【W3 Total Cache】ブラウザキャッシュのHTMLとXMLの設定

WordPressでブログを運営している人でW3 Total Cacheを使って …

【Wordpress】HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize
【WordPress】HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize

WordPressでブログを運営していて、ブログの表示速度を高速化させるために、 …

W3 Total Cacheの設定方法と使い方とは
【W3 Total Cache】W3 Total Cacheの設定方法と使い方

WordPressで運営されるブログを高速化する上で今や必須となっているW3 T …

【W3 Total Cache】全体設定(General Settings)を設定しよう!
【W3 Total Cache】全体設定(General Settings)を設定しよう!

WordPressを運営していて、W3 Total Cacheを利用している人は …

【W3 Total Cache】ページキャッシュ(Page Cache)を設定しよう!
【W3 Total Cache】ページキャッシュ(Page Cache)を設定しよう!

WordPressのページキャッシュにW3 Total Cacheを使っている人 …

【TinyMCE Templates】TinyMCE Templatesで出来る便利なカスタマイズ
【TinyMCE Templates】TinyMCE Templatesで出来る便利なカスタマイズ

ブログの定型文や決まり文句、JavaScript等々、様々なものをテンプレートと …

【Wordpress開発環境】レンタルサーバからローカル環境にWordpressをコピーし開発環境構築!
【WordPress開発環境】レンタルサーバからローカル環境にWordPressをコピーし開発環境構築!

WordPressをレンタルサーバーを借りてブログ運営していると「レンタルサーバ …

【Wordpress】ブログの定型文を簡単挿入! TinyMCE Templates
【WordPress】ブログの定型文を簡単挿入! TinyMCE Templates

WordPressでブログ記事を投稿していると、いつも使っている言い回しや、定型 …