賢威8フッターパネルのシェアボタンを右下固定にカスタマイズ〜スクロールで追従するボタン

ブロ子

賢威8のスマホ表示のフッターパネルがあると、コンテンツの見える範囲が少なくなるからイヤ！でもパネルのシェアボタンはそのまま使いたいけど無理なのかな？

そんな考えを持っていると勝手に想像している管理人の「ちゃん」（@cyan_customizer）です。

昔よりは、スマホ画面もワイドで縦長になっているので、見える範囲は広くなっています。

賢威8のフッターパネルを表示させると、画面の紫色で囲った部分が隠れてしまう範囲になります。赤色が可視範囲になりますが、私はどうしても「画面を広く見せたい派」なので、少しカスタマイズしてみました。

賢威8のニョキっと出てくるシェアボタンをそのまま使いたい

ちゃん

賢威8はフッターパネルのシェアボタンを押すと、色々なSNSボタンがしたからニョキッと出てきます。

フッターパネルを削除する機能もあるので、簡単に消せますが、そうしてしまうとSNSボタンを下から出す機能も無くなってしまいます。

私が、シェアボタンだけを書き出してクリックしても出てこなかったので、確認済みです。

賢威8のフッターパネルとシェアボタンをそのまま利用する手順

前の項目で書いたように、フッターパネルをそのまま使わないとSNSボタンが出てこないので、パネルを表示のまま消す必要があります。

ちゃん

なんか矛盾してますね(汗)

1からカスタマイズすれば何でも出来ると思いますが、難しいことは私もイヤなので簡単に出来る方法でシェアボタンを移動させたいと思います。

ここでするカスタマイズ

元ある機能をそのまま使う
CSSをカスタマイズする

デザインのカスタマイズだけだと「追加CSS」で大丈夫ですが、phpコードも少しカスタマイズしたいので子テーマを利用してください。

ワードプレスの追加CSSでデザインをカスタマイズ〜子テーマでしか出来ないこともあるよ｜ちゃんブロ工房
https://cyan-blog.com/wordpress-tsuika-css/
ワードプレスのデザインで悩んでいませんか？初心者でもcssを簡単に触ることができる「追加css」があります。追加cssのメリットやデメリットと合わせて、子テーマでしかカスタマイズできないことも解説しています。

手順1：フッターパネル内のコードを消す

フッターパネルは使わないけど、フッターパネルに付随しているSNSボタンは使いたいので、まずは設定から必要ないコードを削除します。

「賢威の設定＞賢威の設定」の手順で進むと、賢威の基本的な設定を触ることが出来ます。その賢威の設定にフッターパネルの機能をカスタムすることが出来ます。

赤枠で囲ったulタグ内のコードすべてを削除します。シェアボタンやトップへ戻るボタンが書かれた部分です。

その下のdivタグで囲われた内容は、ニョキッと出てくるSNSボタンの内容なので消さないようにしてください。

フッターパネルを「表示する」に設定していても、ulタグを削除すると、上の画面のようにパネルは表示されなくなります。

ちゃん

消えてしまったけど、次の項目で出てくるようになるので安心してください。

footer.phpにコードを挿入する

賢威8のテーマフッター「footer.php」をカスタマイズしていきますが、親テーマを直接カスタムするのではなく、子テーマを作って、その中に「footer.php」を作るようにしてください。

親テーマのfooter.phpをそのままコピペすれば良いので、簡単です。

レンタルサーバーのファイルマネジャーで作るか、FTPソフトで予め作ったfooter.phpをアップロードするかは、環境によってどちらでも作成出来ます。

テーマフッターの下の方に「」というコードがありますので、そのコード直前に前の項目で削除したシェアボタンのulタグを挿入します。

ulタグ内の「topへ」を表示するliタグは削除して構いません。それが下記のコードになります。合わせてスマホ（タブレットも含む）表示だけでシェアボタンを表示させたいので、条件分岐も付け加えています。

<?php if ( wp_is_mobile() ) : //モバイル表示のとき ?>
<ul class="utility-menu">
<li class="btn_share utility-menu_item"><span class="icon_share"></span>シェア</li>
</ul>
<?php endif; ?>

上のコードを付け加えると、スマホ表示の最下部にシェアボタンが追加されます。

コードを追加したことで、何も書かれていない消えていたフッターパネルが表示されました。そのフッターパネルの下に、赤丸で囲った部分にシェアボタンが隠れています。

あと1つ隠れているのが、フッターパネルの後ろにニョキッとと出てくる「SNSボタン」です。

ちゃん

まだCSSをカスタマイズしていないだけなので、心配しないでください。

手順3：CSSをカスタマイズしてフッターパネルを画面の外に移動する

ちゃん

先に1つだけ謝っておきます。すみません。

先ほどの項目でわざわざコピペしてもらった条件分岐したulタグのコードですが、装飾しやすいようにカスタマイズします(汗)

新たなコードは下になります。

<?php if ( wp_is_mobile() ) : ?>
<div class="utility-menu">
<div class="btn_share utility-menu_item"><span class="icon_share"></span><p>シェア</p></div>
</div>
<?php endif; ?>

フッターに追加されたボタンをクリックすると、動画のように無事にSNSボタンがニョキっと出てきました。

ちゃん

SNSボタンは出てきても、フッターパネルが常に表示されているのはジャマですよね。

ここで、「フッターパネルを消してもSNSボタンは出てくる」という矛盾をカスタマイズしたいと思います。

ここでCSSをカスタマイズしますが、子テーマに「base.css」を作成してください。

追加するCSSは下のコードになります。

.keni-footer-panel{
	position: relative;
	min-height: 0; /*43pxから0に変更*/
	padding: 0;
}

フッターパネルの高さを「0」にすることで、画面下にSNSボタンも一緒に隠れてくれるようになります。

隠れているSNSボタンが画面の下から無事に出てくるようになっています。

手順4：CSSをカスタマイズしてシェアボタンを右下固定に移動する

いきなりCSSコードを載せたいと思います。

/*シェアボタン*/
.utility-menu{
	position: fixed; /*固定表示のために「fixed」を指定*/
	bottom:95px; /*下からの距離*/
	right:1em; /*右からの距離*/
	width:66px; /*枠の幅*/
	height:66px; /*枠の高さ*/
	border-radius:50%; /*丸いボタンに変更*/
padding-top:10px; /*ボタン内の上の余白*/
	background:#00acee; /*ボタンの色*/
	color:#fff; /*文字の色*/
	z-index: 11;/*重なる順番「大きい数字ほど上」*/
	text-align:center;
}

＼　after　／