株式会社シスアナコム

情報システムに関することなら、どんなことでも適切に助言いたします!

この投稿は1年以上前に公開されました。
現在では状況や内容が変わっている可能性があります。
ご注意下さい。m(_ _)m

STINGER5のメニューとアドセンス広告をカスタマイズ

      2014/11/25

シスアナコム社長の杉山です。

ゼロからの週末プログラマーにSTINGER5を適用したので、早速カスタマイズすることにしました。

それにしても、1日に2度もひとことを投稿するなんて初めて。

それだけSTINGER5は使ってみたいと思わせるワードプレスのテーマなのです!

メニューをカスタマイズ

STINGER3と同様にSTINGER5もシンプルなメニューを採用しています。

メニューはドロップダウンリストのように階層化したいのでカスタマイズしました。

STINGER3の記事はこちら

以下を「style.css」に追加しました。

/* メニューをドロップダウンリストのように階層化 */

.menu li {
  float: left;
  width: 162px;
  height: 40px;
  padding: 0;
}

.menu li a {
  text-align: center;
  display: block;
  padding: 10px 0;
  width: 100%;
  background: royalblue;
  color: white !important;
}

.menu li:hover > a {
  background: darkblue;
}

.menu li ul li {
  overflow: hidden;
  height: 0;
  padding: 0;
}

.menu li ul li a {
  background: darkblue;
  padding: 10px 0;
}

.menu li:hover ul li {
  overflow: visible;
  height: 30px;
  z-index: 1;
}

メニュー内の「menu」というクラス名に対してカスタマイズした方が効率的だと分かったので、STINGER3の時から変更しました。

STINGER3とほぼ同じですが、違うのは最後の「z-index」の部分。

レスポンシブデザインになったので、メニューとサブメニューが重なることがあります。

その際に、サブメニューを上に表示させています。

あと、少し問題が残っています。

画面の幅が小さくなるとスマホ用のメニューが表示されますが、2行×3列になったときにドロップダウンリストが全て表示されません。

これぐらいは許容範囲かな。

2014年11月25日:追記

スマホでのメニュー表示も考慮した改良版の記事を書きましたので参考にして下さい。

アドセンスの広告表示をカスタマイズ

次はトップページのグーグルアドセンスの広告表示をカスタマイズします。

STINGER3の記事はこちら

STINGER5のフォルダから、子テーマのフォルダに「home.php」をコピー。

その後、ワードプレスの管理メニューから外観→テーマ編集で「home.php」を修正します。

まずトップページ画面の下方、ソーシャルボタンの下あたりにアドセンスの広告を表示させます。

</article>タグの上に5行。

レスポンシブデザインになったので、広告をセンタリングするようにしました。

スマホの場合はサイドバーで2個広告が表示されるので、この広告は表示しないようにしています。

      <?php if(!is_mobile()) {?>
        <div align="center">
        <?php get_template_part('ad'); ?>
        </div>
      <?php } ?>
      </article>
    </main>
  </div>
  <!-- /#contentInner -->

次に最初の記事の直下にアドセンスの広告を表示させます。

STINGER5のフォルダから、子テーマのフォルダに「itiran.php」をコピー。

その後、ワードプレスの管理メニューから外観→テーマ編集で「itiran.php」を修正します。

  <?php if( $wp_query->current_post == 0) { ?>
    <dl><div align="center">
    <?php get_template_part('ad'); ?>
    </div></dl>
  <?php } ?>
  <?php endwhile; else: ?>
  <p>記事がありません</p>
  <?php endif; ?>
</div>

<?php endwhile; else: ?>の上に5行です。

これで、トップページにグーグルアドセンスの広告が3箇所表示されます。

2014年8月21日修正

スマホで確認したら、アドセンス広告が4箇所表示されていました。

これだと規約違反になるので、ソーシャルボタン下の広告はスマホの場合は表示しないようにしました。

 - ひとこと, ひとこと(ワードプレス)

↓ブログランキングに参加しています!


ネット・PC(全般) ブログランキングへ
にほんブログ村 IT技術ブログ ITコンサルティングへ
にほんブログ村

Comment

  1. 森 茂雄 より:

    初めまして、STINGER5のメニューとアドセンス広告をカスタマイズをそのまま使わせて頂きました。 PCは問題なく、メニューはドロップダウンリストのように階層化表示されますが、スマホでは、第一階層メニューのみ表示されます 恐れ入りますが、原因をご教示して頂ければ幸いです。

    • sysana より:

      森さん コメントありがとうございます。 スマホの場合、メニューの上に「マウスカーソルを重ねる」という操作ができません。 なので、第一階層を表示させる事しかできないので、今のところあきらめています。 私も他のサイト等を色々と見て、何か良い操作方法がないか考えてみます。 もし良い方法が見つかったら、報告します。 あまりお役に立てずすみません。

    • sysana より:

      新しくスマホでの表示も考慮した改良版メニューの記事を書きました。 親テーマのプログラムを少し変更する必要があるのがネックですが、参考になればと思います。

      • 森 茂雄 より:

        早速のご教示ありがとうございます。 試してみます。

        • 森 茂雄 より:

          返信遅れて申し訳ありません。 ご教示どおりに試したところ、問題なく表示されました。 ありがとうございます。

Message

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