MENU

名無しさん

「おすすめのゲーム」や「ゲームの作り方」などを分かりやすく解説していきます。

お問い合わせは こちらから

最新記事

アクセスカウンター

  • 総閲覧数: 40553PV

  • 総訪問者数: 35104

アーカイブ

初めての方はこちらから

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

この記事のURLをコピーする

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

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

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

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

カスタマイズの内容

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

アップデート内容は…

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

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

\ 神アプデ /

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

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

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

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

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

カスタマイズ前

カスタマイズ後

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

カスタマイズをする前に

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

カスタマイズするには “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にしてください。

参考 SANGOで現在の見出しを上部に追従させるサルワカ風カスタマイズこじかログ

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

library > css > transheader.css

にあります。

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

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

できているか確認

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

何度もテストするとなるとやはり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で確認するには少し手間がかかりますね…

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

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


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

この記事のURLをコピーする

コメントを残す

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

CAPTCHA