ライフハック

コピペでOK!WordPressテーマ「Stinger Plus」で固定ヘッダーを実装する方法

2018/04/08

Stinger
マッキー
こんにちは。マッキー@ミニマリスト(@mackey7_net)です。

WordPressの無料テーマとしては最強のStinger。私も愛用させて頂いていますが、ヘッダーが固定式だったら今時のメディア風で良かったなと個人的には思っています。

そこで、自力でそれを実現させてみましたのでコードをシェアさせていただきます。同じようにしたい、という方には役に立つかと思います。具体的には以下の画像のようになります。

Stinger

CSSのみでやっておりまして、完全コピペで行けますので、HTML/CSSの知識が乏しい人でもなんとかいけるかと思います。
(私はコーダーではないので、コードが汚い、もっといいやり方がある、という場合はお伝えください。)

*Stinger Plusは、2016年7月時点で配布されているものを使っています。

カスタムCSSのプラグインをインストール

CSSを簡単に編集できるように、まずはCustomizer Custom CSSというプラグインをインストールします。

「プラグインの新規追加」で、「Customizer Custom CSS」と検索するとインストールできます。

これで、「外観のカスタマイズ」の画面に、「カスタムCSS」という項目が出てきます。

固定ヘッダー用のCSSをコピペ

ロゴ画像を設定している方は、削除してください。

そして上記の「カスタムCSS」という画面に、以下のCSSをコピペします。

これで冒頭の写真のような固定ヘッダー、モバイルメニューになるはずです。(タイトルの部分は、サイトタイトルで設定した名前になります。)文字や背景の色、フォントサイズ、幅などはcolor,backgroundといった各項目をいじることで変えられます。

-ライフハック