supote blog

ブログサイト日々精進中!過去記事のリライトは少しずつ行なっていくのでお待ちください

STINGER8 WordPress ブログ技術 固定メニュー

[WordPress] スマホ画面下に固定メニューの追加方法「プラグイン」

投稿日:2020年6月29日 更新日:

テーマSTINGER8を使って行っています。

他のテーマの方もできると思いますので参考にしてやってみてください。

あくまでも使ったものの備忘録です。参考程度にご利用ください。

スポンサーリンク

プラグインを使ったメニュー

やれること各URLリンクの貼り付け

参考記事:https://blog.riverforest-wp.info/fixed-bottom-menu/

画面下に固定メニューを作成するプラグインが検索したところこれしかなかったため、最初Fixed Bottom Menuを使いました。

もっと上手く検索すればあるかもしれません。

プラグインの追加

Fixed Bottom Menuと検索しましょう。

※作成者やインストール数をちゃんと確認しましょう

スポンサーリンク

メニューの設定

項目を何個にするか

デフォルトは5個になっています。イメージ画像はこちら

列数で、何個作成するか選択しましょう

リンク先の登録

URL欄にURLを入力していきましょう。Twitterやyoutube等でも構いません。

HOME/オススメ記事の固定ページ//Twitter/YouTube/プロフィール

で私は設定しました。

アイコンの設定

アイコンはhttps://fontawesome.com/を使用しています。

※STINGER8の方は既に使えるようになっています!

アイコンの変更はDashiconの中身を変える必要があります。

Dashiconをクリックしてください

fontwesomeのサイトに飛ぶのでお好きなアイコンを選択してください

選択した後、赤い枠の中のdashicons-admin-mediaの文字、admin-media

をコピーしてください

※アイコンによって文字列は異なります

その後、先ほどの

Dashiconの欄に貼り付けて設定を保存すればアイコンが変更されます。

変更前 画像 変更後 画像

メニュー2番目カレンダーの部分が変更されています。

メニューの幅や色の設定

フォントのサイズや、背景の色、テキストの色などが変更できます。

オーバーレイとはパソコン等でカーソルが当たっている状態のことです。

オーバーレイ状態になると、メニューの色が選択した色に変化します。

は「css3 カラーコード」と調べると出てきますので好きな色に変更してください。

幅の上限を設定することで、一定以上の幅を超えると表示されなくなります。

スマホのみに表示させたい場合はこちらを調整してみてください

スポンサーリンク

-STINGER8, WordPress, ブログ技術, 固定メニュー

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ssh接続設定方法[エックスサーバー]

目次1 使用機材2 接続方法2.1 概要2.2 秘密鍵、公開鍵の作成2.2.1 ターミナルの起動2.2.2 ファイル移動2.2.3 鍵を作成2.3 エックスサーバーの設定2.4 ssh接続を許可2.4 …

はてなブログはやめとけ!「Google Adsense]審査通過まで道のり

目次1 Google Adenseに通過までの流れ1.1 概要1.2 審査について1.3 Adsense,Analyticsなどの設定1.4 10万PV&100記事1.5 はてなブログは無理1 …

[WordPress] スマホのサイドバー有効活用!サイドバー折りたたみ式「sidr.js」

目次1 前提条件2 完成形2.1 スマホ画面2.2 PC画面3 一週間使用してみた変化4 手順4.1 sidr.jsのダウンロード4.2 ファイルのアップロード4.3 cssファイルを呼び出す4.4 …

はてなブログからWordPressに移行しましたpart1[日記][備忘録]

目次1 私の初期状態2 サーバー選び3 サーバー契約4 ドメインの設定4.1 XSERVERでの独自ドメイン設定4.2 名前ドットコムのネームサーバー変更5 SSLの設定6 WordPressのインス …

6月4日のブログ発展[日記]

目次1 固定ページについて1.1 固定ページを作成1.2 ssh接続設定1.3 固定ページのサイドバー削除1.4 固定ページフッターの固定記事一覧削除1.5 固定ページにカテゴリー新着記事一覧表示2 …