賢威8のフッターパネルの設定方法|中級者向けカスタマイズ
賢威8のフッターパネルの設定方法|中級者向けカスタマイズ
賢威8 には、スマホでサイトを見た際に下記のような「フッターパネル」を表示させる機能があります。

賢威8のフッターパネル

賢威8のフッターパネル

今回は、このフッターパネルの設定方法を解説します。

フッターパネルの設定方法

WordPressのダッシュボード左メニューにある『賢威の設定』をクリックします。

WordPressのダッシュボード左メニューにある『賢威の設定』をクリック

WordPressのダッシュボード左メニューにある『賢威の設定』をクリック

設定画面が開きます。

下の方にある「スマートフォン向けフッターパネル」という項目までスクロールしましょう。

スマートフォン向けフッターパネル

スマートフォン向けフッターパネル

上部の『表示する』のラジオボックスにチェックを入れます。

『表示する』のラジオボックスにチェック

『表示する』のラジオボックスにチェック

これで、スマホでサイトを見た際にフッターパネルが表示されるようになります。

賢威8のフッターパネル

賢威8のフッターパネル

アイコンの変更方法

賢威8のインストール直後のデフォルトの設定では、「コンテンツ」欄に下記のHTMLコードが記述してあり、

下記4つのボタンが表示されるように構成されています。

  • シェア
  • 電話
  • お問合わせ
  • TOPへ

このアイコンの変更方法を解説します。

使用できるアイコンのclass名を確認する

フッターパネルでは下記のアイコンを使用することができます。

使用したいアイコンのclass名を確認しておきましょう。

アイコンclass名
ポイントicon_point
注意icon_caution
別ウィンドウicon_blank
矢印上icon_arrow_up
矢印右icon_arrow_right
矢印下icon_arrow_down
矢印左icon_arrow_left
ダウンロードicon_download
PDFファイルicon_pdf
ZIPファイルicon_zip
メールicon_mail
ショッピングカートicon_cart
虫眼鏡icon_search
ホームicon_home
フォルダーicon_folder
時計icon_time

HTMLコードを編集する

フッターパネル用のHTMLコード書き換えます。
アイコンを変更したいボタンのspanタグのclassを、上記で確認したclass名に差し替えましょう。

例えば、デフォルトで表示されている「電話」ボタンを「ホーム」ボタンに変更する場合は、下記のようなコードになります。

 スマホで見た際、「ホーム」ボタンをタップしてもトップページに遷移しない場合は、変更したHTMLコードの「<a href="/">」箇所のスラッシュ「/」を、ブログのトップページのURLに書き換えてください。
HTMLコードを編集したら、ページ最下部にある『変更を保存』ボタンをクリックして、設定を反映させましょう。

『変更を保存』ボタンをクリック

『変更を保存』ボタンをクリック

下記のようにボタンが変更されていれば、アイコンの変更は完了です。

アイコンを変更したフッターパネル

アイコンを変更したフッターパネル

アイコンサイズの変更方法

アイコンサイズを変更したい場合は、下記のコードを子テーマの「base.css」に追加しましょう。

〇〇の部分には任意の数字を入力してください。

例えば下記のように記述すると、デフォルトよりもアイコンサイズを大きくすることができます。

アイコンサイズを大きくしたフッターパネル

アイコンサイズを大きくしたフッターパネル

アイコン色の変更方法

アイコンの色を変更したい場合は、下記のコードを子テーマの「base.css」に追加しましょう。

〇〇の部分には任意のカラーコードを入力してください。

例えば、アイコン色をオレンジ(#FF9900)にする場合は、下記のように記述します。

これで、アイコン色を変更することができます。

アイコン色をオレンジにしたフッターパネル

アイコン色をオレンジにしたフッターパネル

まとめ

今回は、賢威8のフッターパネルの設定方法を解説しました。

フッターパネルを設定することで、スマホで見た際のサイトのユーザビリティを上げることができるので、ぜひ設定しておきましょう。

スポンサーリンク

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事