東京在住ぽんひろプロフィールはこちらWebデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成!当ブログは2019年2月START!デザインと動物が大好きなアラサーおじさん。!】Cocoonトップページをスッキリとサイト型へカスタマイズ!2019.08.042019.12.11【Cocoon】ヘッダーメニューをオシャレに!上部に固定追従!2019.06.262019.12.19どこよりも簡単にJINのトップページをサイト型にカスタマイズ!2019.08.072020.01.29【Cocoon】プロフィールをオシャレで可愛くしてみた!2019.06.242020.02.01【Cocoon】全40通り!おしゃれなリスト(箇条書き)を作る!コピペOK!2019.02.182019.06.11Twitterはこちら仕事依頼はこちらJINのスマホメニューをカスタマイズ!アイコン付きでわかりやすく!TwitterFacebook0はてブ0Pocket5LINE2020.02.02JINのスマホメニュー、今回はグローバルナビをカスタマイズしていきます。スマホのグローバルナビをこんな感じにします。ボックス分けされたナビを作る!回遊率をアップしよう!ボックス分けされたナビを作る!回遊率をアップしよう!区分けされたナビゲーションをHTMLとCSSで作ります。単純なグローバルナビゲーションよりも視認性が高く、スマホでタップしやすいのでユーザーに優しいインタフェースになっています。HTMLとCSSがわからない初心者向けでコピペで簡単に作れるようにしました!ponhiro.com2019.09.19「わかりやすく、そして押しやすく」なるため、ユーザーの使いやすさ向上に繋がるかと思います。fontawesomeのアイコンだけでなく、画像をアイコンに変更することも可能です。導入済みのブログ紹介させてください他にもコピペカスタマイズやってますJINのスマホメニューをカスタマイズ!手順は以下の通りです。手順STEP1CSSコピペstyle.cssにコードをコピペします。STEP2JavaScriptコピペ対象場所にJavaScriptをコピペします。管理画面でメニューを設定します。STEP1:CSSをコピペCSSをコピペしていきます。メモ「外観→テーマエディター→style.css(子テーマ)」。「外観→カスタマイズ→追加CSS」に貼り付けてください。CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。ボックスナビの記事に書かれている下記CSSをコピペします。導入済みの方は飛ばしてください。*/display:inline-block;}次にメニューの調整用のCSSをコピペします。*/と書いてある箇所のカラーコードを変更してください。STEP2:JavaScriptをコピペJINには子テーマにJavaScriptを入力できる場所がないのでHTMLタグ設定ページに入力していきます。WordPressの管理画面→HTMLタグ設定ページを開いてください。【bodyタグの終わり】に下記コードをコピペします。nav.fixed-content").addClass("p-nav");</script>以上でOKです。STEP3:メニューを設定あとはメニューを設定するだけです。外観→メニューを開いてください。グローバルメニューを作成済みの方はそれを開き、作ってない方は新規で作ってください。例では新規で作成します。メニュー名を入力してメニューを作成を選択します。メニューを作成していきます。作成の仕方はここでは省略します。次に入れたいアイコン、もしくは画像を入れていきます。FontAweosome編アイコンはFontAweosomeから選択します。JINのオリジナルアイコンは今のところ非対応です。FontAweosome公式Freeのアイコンを選びます。WordPressのメニュー設定画面に戻り、ナビゲーションラベルを変更します。class=”p-nav-title”></span>が追加されています。同様に全てのメニューにタグを入れていきます。PCで見たときにアイコンを非表示にしたい場合はCSSに下記コードを追記してください。}}入力を終えたら、メニュー設定のグローバルナビゲーションにチェックを入れメニューを保存で終了です。画像をアイコンにしたい人はimgタグを挿入していきます。メディアから画像を選び、リンクをコピーしてください。コピーしたURLを下記コードと組み合わせればimgタグができます。メニュー編集画面を開き、ナビゲーションラベルを変更していきます。class=”p-nav-title”></span>が追加されています。同様に全てのメニューにタグを入れていきます。入力を終えたら、メニュー設定のグローバルナビゲーションにチェックを入れメニューを保存で終了です。[酸味]|インドア派、そとに出る。YB125SPとの思い出ご連絡お待ちしております!他にもコピペカスタマイズやってます他にもコピペでできるカスタマイズをやっているので良かったらご覧ください。あわせてJIN限定カスタマイズあわせてコピペでできるブログカスタマイズまとめコピペでできるブログカスタマイズまとめ【HTML&CSS】ブロガー、アフィリエイターに役立つブログやサイトのカスタマイズをまとめていきます。HTML、CSSがわからなくてもコピペ可!WordPress(Cocoon、JIN、SANGO、Affingerなど)、はてなブログなど一部機能を除けば誰でも利用可能です。コメントをキャンセルメールアドレスが公開されることはありません。東京在住ぽんひろプロフィールはこちらWebデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成!当ブログは2019年2月START!デザインと動物が大好きなアラサーおじさん。