ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

【ワードプレス】簡単なCSSでヘッダーにウィジェットを設置する方法

ワードプレスを使っていて、ヘッダーの中にウィジェットが置けたらな、と思ったことはありませんか?

例えば、このウェブチルサイトのヘッダーにも、サイトロゴ・キャッチフレーズ以外に、テキストやCTAなどを設置しています(ページによって異なります)。

これらは、実はウィジェットを使っています。その方法について紹介しましょう。

この記事でわかること

ウィジェットをCSSでヘッダー内に設置する方法(手順)として

①ウィジェットでコンテンツを作成
②ウィジェットをCSSのpositionプロパティを使ってヘッダー内に配置する
③レシポンシブ対応の調整をする

とこれだけです。具体例として電話番号をヘッダー内に表示させます。

テーマはLuxeritasを使用しますが、他のテーマでも参考になるかと思います。

目次

ヘッダー内に表示するコンテンツ例

下記のようにヘッダー内に電話番号を表示させていきます。

ヘッダー内電話番号設置例

ちなみに、サイトデザインとしてはテーマLuxeritasをインストールして記事を少し投稿した、ほとんど生に近い状態です。

ヘッダー内左にはサイト名”practice”とデフォルトキャッチフレーズJust another WordPress siteの表示があるだけです。

具体的な手順

①ウィジェットでコンテンツを作成する

テキストウィジェットをヘッダー下に設置して、コンテンツ(電話番号)を入力していきます。

1.テキストウィジェットをヘッダー下ウィジェットに配置

ダッシュボードメニュー 外観>ウィジェット と進めて操作します。

テキストウィジェットをヘッダー下に設置

2.設置したテキストウィジェットにコンテンツを入力する

テキストウィジェットの内容を入力

すると、サイト表示は以下の通りとなります。

ヘッダー下にウィジェットが表示される

②CSSでウィジェットの位置をヘッダー内に配置する

カスタムCSSを使っていきます。カスタムCSSについては次の記事を参照ください。

1.ウィジェットのidを確認する(CSSのセレクターとする)

Google Chromeの開発者ツールを開いて、今回設置したウィジェットのidを確認します。

ウィジェットのidを確認

すでに使用したウィジェットの状況等により、idは異なりますので必ず個別に確認しましょう。

上の例では、id=text-2ですので、このウィジェットを指定するCSSのセレクターはdiv#text-2となります(または#text-2だけでもよい)。

2.CSSでウィジェットをヘッダー内に配置する

position:absoluteでウィジェットを元の場所(ヘッダー下)から浮かし、toprightプロパティでヘッダー内の右上に配置します。

CSSを記述してウィジェットの位置を変更

子テーマのstyle.cssに記述するのが推奨です。

div#text-2 {
    position: absolute;
    top: 36px;
    right: calc((100vw - 1280px)/2);
}

すると、ウィジェットは指定位置に移動してヘッダー内に配置されます。

ヘッダー内に移動したウィジェットの様子

top:36pxでブラウザの上から36pxの位置を指定。
right:calc(100vw – 1280px)/2 で、コンテンツのcontainerの右端と同じ位置に揃える。

ただし、コンテンツの幅はLuxeritasの場合、レシポンシブ対応によりブラウザ幅によって以下のように変化します。

ブラウザ幅container幅
1310px以上1280px
1200px以上1140px
992px以上960px
720px以上720px
720px未満100%

container幅は、当然使用テーマによって異なります。

③レシポンシブ対応に調整する

上記のcontainer幅を参考に、レシポンシブ対応するようにCSSを追記して完成させます。

div#text-2 {
    position: absolute;
    top: 36px;
    right: calc((100vw - 1280px)/2);
}

@media screen and (max-width:1309px){
	dic#text-2 {
		right: calc((100vw - 1140px)/2)
	}
}


@media screen and (max-width:1199px){
    div#text-2 {
        right: calc((100vw - 960px)/2);
    }
}

@media screen and (max-width:991px){
    div#text-2 {
        right: calc((100vw - 720px)/2);
    }
}

@media screen and (max-width:719px){
    div#text-2 {
        right: 0;
    }
}

@media screen and (max-width:479px){
    div#text-2 {
        display: none;
    }
}

ブラウザ幅が479px以下(すなわちスマホ表示)では、サイト名やキャッチフレーズと干渉するため表示させない仕様としました。

結果としてサイト表示は以下の通りとなります。

レシポンシブ表示1(1680pxと1309px))
レシポンシブ表示2(1199pxと991px)
レシポンシブ表示3(480px)

※今回479px以下のスマホ表示では非表示としましたが、ヘッダー画像を縦長に変更してヘッダー内下部に表示するなど、好みによってはいろいろと選択肢はあります。実際、このウェブチルサイトではそうしています。

position:absoluteでウィジェット位置を変更する注意点

今回は、元々のウィジェットの位置をヘッダー下に置いたものを使いましたが、それには理由があります。

Luxeritasのヘッダー下ウィジェットは、その親要素にはpositionプロパティが適用されていないため、position:absoluteをかけるとブラウザの一番上が基準位置となるからです。

例えば、フッター内に設置したウィジェットにposition:absoluteをかけても、フッター内からウィジェットが出ていきません。フッター内ウィジェットの親要素となるフッターエリアにはposition:relativeがかかっているからです。

position:absoluteとposition:relativeの使い方については次の記事を参照ください。

したがって今回の手順は、テーマで準備されているウィジェットの配置位置の中で、親要素にpositionプロパティがかかっていないものを使う、のが条件となります。

とはいえ、仮に親要素にposition:relativeがかかっていたとしても、その親要素が基準位置になるだけですので、topやrightの指定方法を変えればヘッダー内に配置することはできますよね。

まとめ

position:absoluteで簡単にウィジェットをヘッダー内に配置する方法について紹介してきました。

ウィジェットをヘッダー内に設置するには本来、functions.phpとheader.phpの中にウィジェットを設置する記述をする、というのが正論だと思います。しかしこの場合、テンプレートファイルを変更する必要があるので、テーマのアップデートの際のメンテナンスが必要、など面倒なこともあるのですね。

でもカスタムCSSを使えば、テンプレートファイルを書き換える必要がないのでおすすめの方法だと思います。

また、次の記事で今回使用したテーマLuxeritasのおすすめ機能をまとめていますので参考にしてくださいね。

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる