【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ですが、ツイッターでこんなツイートを発見しました。

ポリプの新機能しゅごい✧ ＼\ ٩( '神' )و /／ ✧
もしかしてヘッダーにカテゴリーメニュー入れてると良くないのかもしれない？(キャッシュも消した)

ヘッダーメニュー消そう😀 pic.twitter.com/bKx58zUV5S

— あいかꪔ̤̮ (@AikaAimemo) May 20, 2019

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

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

[yoko2 responsive][cell]

カスタマイズ前

[/cell][cell]

カスタマイズ後

[/cell][/yoko2]

[box class=”meritto” title=”カスタマイズのメリット”]

PORIPUのカスタマイズ崩れを修正
色を変えることでよりスライドメニュー感がでる (?)
スライドメニューを小さくすることで記事を見ていてもストレスにならない

[/box]

カスタマイズをする前に

[alert title=”注意”]投稿主自身、ブログを始めて間もない初心者なので、何か不備があるかもしれませんがご了承ください。[/alert]

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

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

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

追加方法	難易度
~~追加CSS~~
テーマエディター
FTPソフト

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

カスタマイズに挑戦

style.cssにコードを追加

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

/*--------------------------------------
モバイル固定スライドメニュー
--------------------------------------*/
.mobile-nav { /*スライドメニュー全体の設定*/
    overflow: hidden;
	background-color: #5E85F4; /*スライドメニューの背景色の変更*/
	box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3); /*スライドメニュー下部に影の追加*/
}

.mobile-nav li a { /*スライドメニュー内のテキストの設定*/
    display: inline-block;
    padding: 0 5px; /*メニュー内の項目と項目の間の調節*/
    font-size: 10px; /*テキストのサイズを調節*/
    font-weight: bold;
    vertical-align: middle;
    line-height: 5px; /*テキストの高さを調節*/
}

.mobile-nav, .mobile-nav li, .mobile-nav li a {
	height: 22px; /*スライドメニューの縦の幅の調節*/
}

/*--------------------------------------

モバイル固定スライドメニュー

--------------------------------------*/

.mobile-nav { /*スライドメニュー全体の設定*/

overflow: hidden;

background-color: #5E85F4; /*スライドメニューの背景色の変更*/

box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3); /*スライドメニュー下部に影の追加*/

}

.mobile-nav li a { /*スライドメニュー内のテキストの設定*/

display: inline-block;

padding: 0 5px; /*メニュー内の項目と項目の間の調節*/

font-size: 10px; /*テキストのサイズを調節*/

font-weight: bold;

vertical-align: middle;

line-height: 5px; /*テキストの高さを調節*/

}

.mobile-nav, .mobile-nav li, .mobile-nav li a {

height: 22px; /*スライドメニューの縦の幅の調節*/

}

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

transheader.cssのコードを編集

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

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

[sanko href=”https://kojikalog.com/sango_headline_fixed_to_pagetop/” title=”SANGOで現在の見出しを上部に追従させるサルワカ風カスタマイズ” site=”こじかログ”]

transheader.cssはPORIPUのテーマファイルの

library > css > transheader.css

にあります。

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

[alert title=”注意”]下手に他のコードをいじらないでください。カスタマイズが崩れてしまう恐れがあります。[/alert]

できているか確認

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

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

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

確認の手順 (Google Chrome)

カスタマイズコードを保存したことを確認
自分のサイトを開く
キャッシュを削除する
(Windowsは Shift+F5、MacはCmd+ Shift+R)
デベロッパーツールを開く
(WindowsはF12、MacはCtl+Cmd+I)
デバイスモードにする
(WindowsはCtrl+ Shift+M、MacはCmd+ Shift+M)

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

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

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

※映像内ではスライドメニューを小さくしていません。記事内で紹介したカスタマイズはスライドメニューを少し小さくしています。

[copy_btn]