WordPress CSS ヘッダー領域にウィジェットを5分でカスタマイズ設置!

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
  • 0

WordPress CSSで、ヘッダー領域にウィジェットを設置出来ない、テーマにウィジェットエリアを、5分で簡単設置出来るようにするカスタマイズをご紹介します。

はじめに

このブログのテーマは「Simplicity」で作成しているのですが、「Simplicity」で設置出来るウィジェット領域には、ヘッダーエリアがありません。

このブログのタイトルと、グローバルメニューの間にはアドセンス広告がセットしてあります。それは今回ご紹介する、ヘッダー領域にウィジェットをセット出来るようにカスタマイズしたからです。

CSSカスタマイズ

追加するCSS

テーマのための関数 (functions.php)へ以下のコードを追加します。

ヘッダー (header.php)へ以下のコードを追加します。

ここがポイントロゴ

icon-check-square-o ヘッダー (header.php)へ上記のコードを追加する場所は下記。

icon-check-square-o上記の場所を探して、2行追加して下さい。

コードを追加するにあたっての留意点

ここがポイントロゴ

 icon-check-square-o テーマのための関数 (functions.php)への追加、ヘッダー (header.php)とも子テーマがあるテーマであれば、子テーマへ追加して、出来るだけ親テーマへはコードを入れないほうが良いです。

icon-check-square-o以前、ご紹介した、FTPで、親テーマから(header.php)をコピーして、(functions.php)とも子テーマへコードを入れましょう。

WordPress必須インストーラーFTPを5分で簡単設定。
WordPressで、必ず必要となるインストーラーFTPのご説明です。本当の初心者でも5分で簡単に設定出来ます。さらに、プラグイン一例をイン...

ヘッダーウィジェットエリア

これで、外観→ウィジェットから、ウィジェットを設置出来る場所にヘッダーウィジェットの項目が増えたはずです。

ヘッダーウィジェット02

おわりに

ヘッダー領域へウィジェットが設置出来ると、本当に便利になります。

このブログの場合は、アドセンス広告を設置してありますが、以前は、人気記事をカスタマズし、設置していた事もありました。

とにかく用途は多岐に渡りますので、ブログにあったウィジェットを設置してより便利にご使用下さい。

上記のCSSをコピペして頂ければ、すぐ使用出来ます。

ご参考・ご活用下されば幸いです。

以上、『WordPress CSS ヘッダー領域にウィジェットを5分でカスタマイズ設置!』の記事でした。

ご視聴ありがとうございました。

合わせて読みたい。

WordPress CSSカスタマイズ 回転するサムネイル画像3種
WordPress CSSで、このブログで使用している回転するサムネイル画像3種類のカスタマイズをご紹介します。コピペしてすぐ使用して頂けま...
WordPressブログカードと、TOC目次を1分で中央寄せに。
WordPressの、ブログカード(テーマ「Simplicity」の場合)と、プラグインTable of Contents Plusの目次タ...
アドセンス他広告プライバシーポリシー『ブログ用テンプレ』
Googleアドセンス広告を貼り付けてブログ及びサイトを運営していくには、プライバシーポリシーの設置が必要となってきます。今回は「なまたまご...
WordPressお問い合わせページを5分で作成。
WordPressでお問い合わせページをプラグイン、Contact Form 7、で5分で作成してしまうという記事です。
WordPressで広告を任意に設置するプラグイン
WordPressでアフィリエイトを、記事だけに設置して、固定ページ内には設置したくない、もしくはその逆とか任意に設置を指定出来るプラグイン...

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする


スポンサーリンク

コメント

  1. ワードプレス学習中 より:

    初めまして。ヘッダーにウィジェットを設置してアドセンス広告を表示する方法を探している時に、こちらのブログに行き着きました。

    内容通りの手順を踏み、ヘッダーにウィジェットを追加することはできたのですが、スタイルシートでのカスタマイズについて教えて頂きたい事があります。

    ウィジェットを使ってヘッダーにアドセンスを貼ると、アドセンス上部「キャッチフレーズ」、下部「グローバルメニュー」との隙間が開きすぎているので、アドセンスとの間隔を狭くしたいのですが、スタイルシートにどのように手を加えればいいのか分かりません…。

    お手数ですが、お時間のある際にでもご教授頂ければ幸いです。

    • なま たまご より:

      ご質問ありがとうございます。私もこのご質問の内容と同じところでつまずきましたので、すごくわかります(*_*;
      結論の解決法はこの隙間は、ウィジェットエリアのCSSをカスタムするのではく、グローバルメニューをカスタムすれば解決致します。
      下記に、カスタマイズするCSSを記述します。
      #navi ul {
      margin-top: -50px;
      }
      こちらを加えれば隙間がなくなります。このブログの場合はグローバルメニューの項目をホバーすると黄色く動くカスタマイズの中に組み込んでいます。
      取り立てて、隙間を無くすだけなら、これで大丈夫です。
      お役に立てれば幸いです。

  2. ワードプレス学習中 より:

    早速のご回答ありがとうございました。

    ご教授頂いたCSS記述で隙間を埋めることができました!

    お手数ながらもう一点教えて頂きたい点があります。

    ヘッダーウィジェットのアドセンスと貴サイトの場合ですとサイトロゴとの間の隙間ですが、こちらはどのようなCSS記述で隙間を調整することができるのでしょうか。

    私の場合、サイトのキャッチフレーズ下にアドセンスが入る形となるのですが、貴サイトのように間隔を狭めて左詰めにしたいと考えております。

    度々の質問で申し訳ありませんが、どうぞよろしくお願いします。

    • なま たまご より:

      解決出来たみたいでお役に立てれて嬉しいです(^^♪
      今度のご質問は、CSSカスタムではなく単純にテーマ「Simplicity2」の外観カスタマイズの機能で解決致します!
      このブログの場合は、実はキャッチフレーズを入れておりません。サイトのタイトルは入れてありますが、画像で隠しております。
      そして肝心のヘッダーウィジェットとの隙間は・・・外観→カスタイズ→ヘッダー→ヘッダーの高さpx(デフォルト:100)を0として隙間を無くしました。
      なので、このやり方がそのブログに合うやり方かはわかりませんが、いち解決法としてご参考にして下さい!

  3. ワードプレス学習中 より:

    度々のご回答ありがとうございます!

    私のブログでは外観カスタマイズで上手く行かなかったので、先に教えて頂いたグローバルメニューのカスタマイズを参考にし、スタイルシートに以下を記述することで解決できました。

    /* ヘッダーウィジェット */
    .ad-header-widget {
    margin-top: -20px;
    margin-bottom: -20px;
    }

    ただ、スマホ表示では反映されないので、まだまだ学習中です…。

    この度は色々と教えて頂きありがとうございました。

トップへ戻る