2020/03/29 サイトデザインを変更しました

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

3 min 258 views

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

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

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

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

カスタマイズの内容

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

アップデート内容は…

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

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

\ 神アプデ /

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

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

どうやら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に追加してください。

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

transheader.cssのコードを編集

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

また、こじかログさんの紹介している追従見出し、SANGOサポーターの固定見出しを使用している方はtransheader.css43行目 (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)

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

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

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

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



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

[copy_btn]

7shi321

7shi321

(∀`*ゞ)エヘヘ

当サイトを運営しています名無しです。由来は名前が浮かばなかったので適当につけました。アイコンは「グッジョブ」と認識するか「表出ろ」と認識するかはお任せします。

FOLLOW

カテゴリー:

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA