【THE THORスマホ用固定フッターのカスタマイズ】初心者向けに画像付きで解説

the thor スマホフッター

 

Chiharu
Chiharu
今回は、WordPressテーマ「THE THOR(ザ・トール)」スマホ用固定フッターのカスタマイズについてお伝えします。

 

THE THORのスマホ用固定フッターとは

 

THE THORは、スマホ専用のフッターを表示できます。スマホは1ページが長いため、ページ途中での移動に固定フッターがあると便利です。

 

スマホ用固定フッターに表示できるのは、ホームボタン・SNSシェアボタン・メニューボタン・電話ボタン・自由設定ボタンの中から、最大4つまで。

 

TOPへボタンは必ず表示されるので、最大5つのボタンが表示されます。

 

THE THORスマホ用固定フッターカスタマイズの手順

 

  1. サンプルを見てカスタマイズする内容を決める
  2. それぞれのカスタマイズをする
    1. スマホ用固定フッターの表示・非表示
    2. スマホ用固定フッターのボタン

 

THE THORスマホ用固定フッターのカスタマイズサンプル

 

the thor スマホフッター表示
the thor スマホフッター非表示

 

the thor スマホフッター 区切り線シャドウシャドウ
the thor スマホフッター 区切り線ボーダーボーダー
the thor スマホフッター 区切り線なしなし

 

the thor スマホフッター
項目1項目2項目3項目4項目5
the thor スマホフッター ホームthe thor スマホフッター フリー
表示なし
the thor スマホフッター snsthe thor スマホフッター フリー
表示なし
the thor スマホフッター メニューthe thor スマホフッター フリー
表示なし
the thor スマホフッター 電話the thor スマホフッター フリー
表示なし
the thor スマホフッター トップ

 

 

 

【カスタマイズ1】スマホ用固定フッターボタンの表示・非表示・区切り線

 

THE THORスマホ用固定フッターのボタンは表示・非表示を選択できます。

 

the thor スマホフッター固定フッターエリア表示
the thor スマホフッター固定フッターエリア非表示

 

スマホ用固定フッターの区切り線は、なし・シャドウ・ボーダーから選ぶことができます。

 

the thor スマホフッター 区切り線シャドウシャドウ
the thor スマホフッター 区切り線ボーダーボーダー
the thor スマホフッター 区切り線なしなし

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー スマホフッター共通エリア設定>固定フッターエリア(スマホ専用)設定>スマホ用固定フッターの設定

選択して公開 をクリック

 

【カスタマイズ2】スマホ用固定フッターボタン

 

THE THORスマホ用固定フッターを表示すると、ボタンの種類を選べます。

 

ボタンを表示する位置は決まっているので、項目ごとになにを表示するのかカスタマイズします。

 

項目1項目2項目3項目4項目5
the thor スマホフッター ホームthe thor スマホフッター フリー
表示なし
the thor スマホフッター snsthe thor スマホフッター フリー
表示なし
the thor スマホフッター メニューthe thor スマホフッター フリー
表示なし
the thor スマホフッター 電話the thor スマホフッター フリー
表示なし
the thor スマホフッター トップ

 

 

【カスタマイズ2-1】項目1ボタン

 

THE THORスマホ用固定フッターエリア項目1ボタンは、左端のボタンのこと。

 

ホーム・自由リンクボタン・表示しないから選択できます。

 

the thor スマホフッター ホーム

選べるボタン
・ホーム:トップページが表示
・自由リンクボタン
・表示しない

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー スマホフッター共通エリア設定>固定フッターエリア(スマホ専用)設定>スマホ用固定フッターの設定項目1の設定

選択して公開 をクリック

自由設定リンクボタン:ボタンに表示するタイトル・リンクするURL・アイコン名を入力

ボタン非表示:自由リンクボタンを選択して空欄にする

 

the thor アイコン
アイコン名がわからないときは、左上アイコンオプション」をクリック
the thor アイコン
アイコン一覧が表示されるので、アイコンのコードをコピーしてください

 

【カスタマイズ2-2】項目2ボタン

 

THE THORスマホ用固定フッターエリア項目2ボタンは、左から2番目のボタンのこと。

 

SNSシェアボタン・自由リンクボタン・ボタンを表示しないから選択できます。

 

the thor スマホフッター sns
the thor スマホフッター sns

選べるボタン
・SNSシェアボタン
・自由リンクボタン
・ボタンを表示しない

シェアボタンは、タップするとブログ運営者のSNSにつながる仕組みになっています。

(自分のSNSにつなげるには、カスタマイザーからSNS登録をする必要があります)

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー スマホフッター 項目2共通エリア設定>固定フッターエリア(スマホ専用)設定>スマホ用固定フッターの設定項目2の設定

選択して公開 をクリック

シェアボタン表示させたいSNSにクリックをしてチェック

ボタン非表示:自由リンクボタンを選択して空欄にする

 

the thor アイコン
アイコン名がわからないときは、左上アイコンオプション」をクリック
the thor アイコン
アイコン一覧が表示されるので、アイコンのコードをコピーしてください

 

【カスタマイズ2-3】項目3ボタン

 

THE THORスマホ用固定フッターエリア項目3ボタンは、中央のボタンのこと。

 

メニューボタン・自由リンクボタン・ボタンを表示しないから選択できます。

 

the thor スマホフッター メニュー
the thor スマホフッター メニュー

選べるボタン
・メニューボタン
・自由リンクボタン
・ボタンを表示しない

メニューボタンは、タップするとメニューが表示されます。

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー スマホフッター 項目3共通エリア設定>固定フッターエリア(スマホ専用)設定>スマホ用固定フッターの設定項目3の設定

選択して公開 をクリック

ボタン非表示:自由リンクボタンを選択して空欄にする

 

the thor アイコン
アイコン名がわからないときは、左上アイコンオプション」をクリック
the thor アイコン
アイコン一覧が表示されるので、アイコンのコードをコピーしてください

 

【項目2-4】項目4ボタン

 

THE THORスマホ用固定フッターエリア項目4ボタンは、右から2番目のボタンのこと。

 

電話ボタン・自由リンクボタン・ボタンを表示しないから選択できます。

 

the thor スマホフッター 電話
the thor スマホフッター 電話

選べるボタン
・電話ボタン
・自由リンクボタン
・ボタンを表示しない

電話ボタンは、タップすると電話番号が表示され簡単に電話をかけられます。

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー スマホフッター 項目4共通エリア設定>固定フッターエリア(スマホ専用)設定>スマホ用固定フッターの設定項目4の設定

選択して公開 をクリック

電話ボタン:電話番号を入力

ボタン非表示:自由リンクボタンを選択して空欄にする

 

the thor アイコン
アイコン名がわからないときは、左上アイコンオプション」をクリック
the thor アイコン
アイコン一覧が表示されるので、アイコンのコードをコピーしてください

 

スマホ用固定フッターエリアのカスタマイズは完了です。

 


 

以上、【THE THORスマホ用固定フッターのカスタマイズ】初心者向けに画像付きで解説でした。

 

THE THORのデモサイトの中にスマホ用固定フッターが設定されていないデザインがあるので、ぜひ参考になさってください。

 

お読みいただき、ありがとうございました。

THE THORカスタマイズ

1人で悩んでいませんか?
設定やカスタマイズでお困りのときは
お気軽にご相談ください。

ご相談はこちらへどうぞ >