【SANGO】PORIPUの新機能 固定ヘッダーにスライドメニューを追加

どうも、名無し ( @7shi321) です。

今回はつい先日アップデートが行われた有料のWordPressテーマ “SANGO” の公認子テーマ、“PORIPU” のカスタマイズを紹介します。

PORIPUのアップデートの詳細は こちら

前置きが少し長いので今すぐカスタマイズしたい方は目次の2をクリック。

カスタマイズの内容

つい先日、”SANGO” の公認子テーマ “PORIPU” のアップデートが行われました。

アップデート内容は…

【久しぶりのアプデ】
スマホでヘッダーを固定表示する機能を追加しました。

閲覧時の圧迫感・読者のストレスを少しでも和らげるため、ヘッダーは縮小させてます。細かいですが、伝わりますでしょうか。

Boothより最新版v1.21をダウンロードしてご利用ください。https://t.co/N0Wc46wwpS pic.twitter.com/IXJlXHe7XT

— PORIPU（ポリプ）公式アカウント (@Poripu_wp) May 20, 2019

動画を見ていただけたら分かる通り、ヘッダーを固定するというものです。

しかも、ただ単に固定するだけでなく、見ている方のストレスにならないように、下へスライドすると固定ヘッダーが小さくなるのです。

\ 神アプデ /

私もこの通り、SANGOとPORIPUには非常にお世話になっていて、今回のアップデートもすごくうれしかったです。

そんなうれしいアップデートが到来したPORIPUですが、ツイッターでこんなツイートを発見しました。

https://twitter.com/AikaAimemo/status/1130418394249932800

どうやらPORIPUの作者 ( 詳しくはこちら) さんはスライドメニューを使わない派だったそうで、モバイルのスライドメニューにチェックを入れているとカスタマイズが崩れてしまうそう。

そんなわけで、今回はPORIPUのスライドメニューにチェックを入れていてもカスタマイズが崩れないようにするカスタマイズを紹介したいと思います。

カスタマイズをする前に

カスタマイズするには “CSS” というスタイルシート言語を使用します。

今回は特定の.cssファイルを編集するため、追加CSSでの説明はしていません。

コード追加方法は3つある

初めてCSSを使ったカスタマイズをする方は “追加CSS” をおすすめします。

カスタマイズに挑戦

style.cssにコードを追加

テーマエディターまたはFTPソフトでコードを追加する場合、以下のコードをstyle.cssに追加してください。

追加したら保存してください。

transheader.cssのコードを編集

次にtransheader.cssの12行目 (height) と14行目 (padding) の最初の値をどちらも83pxにしてください。

また、こじかログさんの紹介している追従見出し、SANGOサポーターの固定見出しを使用している方はtransheader.cssの43行目 (top) の値を62pxにしてください。

編集し終わったら保存してください。

できているか確認

モバイル用なので実機で確認できますが、実機だとキャッシュの削除が面倒だったりします。

何度もテストするとなるとやはりPCで確認できた方が良さげですよね。

以下の方法でPCでモバイルの状態を確認できちゃいます。

モバイル用のカスタマイズなのでPCで確認するには少し手間がかかりますね…

慣れればすぐにできちゃうので覚えましょう！

こうなっていれば成功です。