瀬戸内ことり公式サイトのPCフッターSNSボタンユニットとスマホフッターボタンの作り方

本記事は広告を含みます。

ことり

WordPress テーマ 「Lightning (有料版)」 ユーザー向けの記事です。

パソコンでの閲覧を推奨いたします。

初めましての方も、ふだんから仲よくしてくださっている方も。

もちろん、アドベンドカレンダー2023の記事を読んで初めて私のことを知ってくださった方も。

ご訪問いただき、ありがとうございます。

ことり

WordPress 歴12年目、三度の飯より WordPress が好きな瀬戸内ことりです。

2024年12月11日のアドベントカレンダー記事を読んでくださった方から・・・

ベクトルアドベントカレンダー2024参加中!

本記事は「Vektor WordPress Solution Advent Calendar 2024」の12月20日(金) の記事です。

今年は 12/11 (水)、12/19 (木) と合わせて3本の記事を公開しています。

ことり

他の2記事もぜひ読んでみてください!

ベクトルアドベントカレンダー2023の記事

2023年より、ベクトルさんのアドベントカレンダーに参加させていただいております。

Vektor WordPress Solution Advent Calendar 2023」の12月24日(日) の記事もぜひ読んでみてくださいね!

私がなぜ Lightning を選んだのか、なぜ Lightning を激推しするのか、その理由を述べています。

ことり

2024年11月、ベクトル公式テクニカルパートナーに認定いただきました。ありがとうございます (号泣)

ことりさんのウェブサイト (PCビュー) のフッターにある (スクロールしたら右から出てくる) SNS ボタンってどうやってるんですか?

PC 右下に表示される この子のことです。

ことりさんのスマホサイトのフッターに出てくるメルマガ登録ボタン、ステキですね。よかったらやり方を教えてください!

スマホ最下部に表示される この子のことですね。

・・・というお問い合わせをそれぞれ複数の方から頂きました。

ことり

ご関心をお寄せいただきありがとうございます♪

フッターアレンジのご相談、承ります。

そんなわけで、本記事では PC フッターに右から現れる SNS ボタンユニットスマホフッターに表示されるメルマガ登録ボタンの作り方をお伝えいたします。

私がゼロから CSS を書いたわけではなく、ベクトルさんがご提供くださっているブロックパターンライブラリに登録されているパターンをアレンジして使わせていただいています。

ことり

ベクトルさん、いつもありがとうございます!

ことり

このカスタマイズに必要なものは以下。

必要なもの

※ Vektor Passport には「VK Blocks Pro」「Lightning G3 Pro Unit」が含まれています。

使わせていただいたブロックパターン

フッターに表示させる要素を準備します

Lightning Block Templete Parts を開きます

「新規投稿を追加」をクリックします

任意のタイトルを付けます

パターンをコピーします

この下に表示されているアコーディオンブロック「パターンをコピーする」を開き、「このパターンをコピーする」ボタンを押します。

パターンをコピーする

本文の欄に貼り付けます

うまく行かないときは

  1. 右上のトリコロンを押します
  1. コードエディターを開きます
  1. 「テキストまたは~」と表示されている欄に貼り付けます
  1. 「コードエディターを終了」します

このようになれば OK

このサイトでは「ページトップへ戻るボタン」を有効化しています。

「ページトップへ戻るボタン」を表示させない場合は右余白が広すぎると思いますので、各自で調整してください。

ことり

完成ーーー!

完成イメージ

PC のフッターに右から現れる SNS ボタンユニット

完成イメージ

スマホのフッターに出現するメルマガ登録ボタン

ことり的とりまとめ

ことり

このカスタマイズに必要なものをおさらい。

必要なもの

※ Vektor Passport には「VK Blocks Pro」「Lightning G3 Pro Unit」が含まれています。

ブロックパターンライブラリに登録されている以下のパターンをアレンジして使わせていただいています。

使わせていただいたブロックパターン

ブロックパターンライブラリのパターンを存分に利用させていただき、ブロックの入れ子構造をぜひマスターしてください。

さほど難しいコードを書かずとも、幅広いアレンジが楽しめるようになりますよ♪

ことり

フッターアレンジのご相談、承ります。

最後までお読みいただき
ありがとうございました!

アドベントカレンダー参加中!

本記事は「Vektor WordPress Solution Advent Calendar 2024」の12月20日(金) の記事です。

今年は 12/11 (水)、12/19 (木) と合わせて3本の記事を公開しています。

ことり

他の2記事もぜひ読んでみてください!

大澤さんにバトンをお渡しします!

アドベントカレンダー2023の記事

2023年より、ベクトルさんのアドベントカレンダーに参加させていただいております。

Vektor WordPress Solution Advent Calendar 2023」の12月24日(日) の記事もぜひ読んでみてくださいね!

私がなぜ Lightning を選んだのか、なぜ Lightning を激推しするのか、その理由を述べています。

ことり

2024年11月、ベクトル公式テクニカルパートナーに認定いただきました。ありがとうございます (号泣)

ことり

2024年11月、ベクトル公式テクニカルパートナーに認定いただきました。ありがとうございます (号泣)