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

スマホ固定フッター
スマホ用フッターエリア

 

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

 

スマホ用固定フッター以外のTHE THORのカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに?・THE THORのTOPページは、なにからカスタマイズすればいい? Chi[…]

トップページカスタマイズ

 

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

 

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

 

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

 

TOPへボタンは必ず表示されるようになっていますので、最大5つのボタンが表示されます。

 

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

 

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

 

THE THORサポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 

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

 

スマホフッター表示
スマホフッター非表示
シャドウシャドウ
ボーダーボーダー
なしなし

 

the thor スマホ
項目1項目2項目3項目4項目5
ホーム自由リンク

表示なし

SNSシェア自由リンク表示なしメニュー自由リンク表示なし電話自由リンク表示なしTopへ

 

 

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

 

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

 

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

 

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

 

シャドウシャドウ
ボーダーボーダー
なしなし

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー スマホ
カスタマイザー スマホ

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

選択してカスタマイザー公開 をクリック

 

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

 

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

 

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

 

項目1項目2項目3項目4項目5
ホーム自由リンク

表示なし

SNSシェア自由リンク表示なしメニュー自由リンク表示なし電話自由リンク表示なしTopへ

 

 

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

 

THE THORスマホ用固定フッターエリア項目1ボタンは、左端のボタンです。ホーム・自由リンクボタン・表示しないの3つから選ぶことができます。

 

固定用フッターホームボタン

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

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー スマホ
カスタマイザー スマホ

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

選択してカスタマイザー公開 をクリック

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

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

 

アイコン
アイコン名がわからないときは、アイコン一覧をクリックすると一覧が表示されるので、アイコンを選んでアイコン名をコピーペーストします。

 

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

 

THE THORスマホ用固定フッターエリア項目2ボタンは、左から2番目のボタンです。SNSシェアボタン・自由リンクボタン・ボタンを表示しないの3つから選ぶことができます。

 

フッターSNSシェア
フッターSNSシェア

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

シェアボタンは、タップするとSNSのリンクボタンがが表示され、それぞれのSNSボタンをタップすると運営者のSNSにつながる仕組みになっています。

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

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー スマホ
カスタマイザー スマホ2

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

選択してカスタマイザー公開 をクリック

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

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

 

アイコン
アイコン名がわからないときは、アイコン一覧をクリックすると一覧が表示されるので、アイコンを選んでアイコン名をコピーペーストします。

 

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

 

THE THORスマホ用固定フッターエリア項目3ボタンは、中央のボタンです。メニューボタン・自由リンクボタン・ボタンを表示しないの3つから選ぶことができます。

 

メニューボタン
メニューへ

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

メニューボタンは、タップするとメニューが表示されるようになっています。

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー スマホ
カスタマイザー スマホ3

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

選択してカスタマイザー公開 をクリック

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

 

アイコン
アイコン名がわからないときは、アイコン一覧をクリックすると一覧が表示されるので、アイコンを選んでアイコン名をコピーペーストします。

 

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

 

THE THORスマホ用固定フッターエリア項目4ボタンは、右から2番目のボタンです。電話ボタン・自由リンクボタン・ボタンを表示しないの3つから選ぶことができます。

 

電話
電話

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

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

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー スマホ
カスタマイザー スマホ4

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

選択してカスタマイザー公開 をクリック

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

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

 

アイコン
アイコン名がわからないときは、アイコン一覧をクリックすると一覧が表示されるので、アイコンを選んでアイコン名をコピーペーストします。

 

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

 


 

おつかれさまでした。

 

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

 

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

 

わからないことや、ご相談は、お気軽にお声がけください。

 

お問い合わせはこちら

 

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

Chiharu