ブロ子そんな考えを持っていると勝手に想像している管理人の「ちゃん」（@cyan_customizer）です。
昔よりは、スマホ画面もワイドで縦長になっているので、見える範囲は広くなっています。
賢威8のフッターパネルを表示させると、画面の紫色で囲った部分が隠れてしまう範囲になります。赤色が可視範囲になりますが、私はどうしても「画面を広く見せたい派」なので、少しカスタマイズしてみました。
- ユーザー数は27,000を超える
- SEOノウハウが凝縮された完全プロ仕様
- WordPress初心者でも安心のサポート体制
| おすすめ度 | カラム数 | 言語 |
|---|---|---|
| 5.0 | 3パターン | HTML5及びPHP |
| サーバ環境 | WPのバージョン | バリエーション |
| PHP 7.1以上 MySQL 5.6 以上 | WordPress 4.9.8 以上 | 1種類 （自由に色を設定可能） |
気になる賢威の評判はこちら
賢威8のニョキっと出てくるシェアボタンをそのまま使いたい
ちゃんフッターパネルを削除する機能もあるので、簡単に消せますが、そうしてしまうとSNSボタンを下から出す機能も無くなってしまいます。
私が、シェアボタンだけを書き出してクリックしても出てこなかったので、確認済みです。
賢威8のフッターパネルとシェアボタンをそのまま利用する手順
前の項目で書いたように、フッターパネルをそのまま使わないとSNSボタンが出てこないので、パネルを表示のまま消す必要があります。
ちゃん1からカスタマイズすれば何でも出来ると思いますが、難しいことは私もイヤなので簡単に出来る方法でシェアボタンを移動させたいと思います。
- 元ある機能をそのまま使う
- CSSをカスタマイズする
デザインのカスタマイズだけだと「追加CSS」で大丈夫ですが、phpコードも少しカスタマイズしたいので子テーマを利用してください。
ワードプレスのデザインで悩んでいませんか？初心者でもcssを簡単に触ることができる「追加css」があります。追加cssのメリットやデメリットと合わせて、子テーマでしかカスタマイズできないことも解説しています。
手順1：フッターパネル内のコードを消す
フッターパネルは使わないけど、フッターパネルに付随しているSNSボタンは使いたいので、まずは設定から必要ないコードを削除します。
「賢威の設定 ＞ 賢威の設定」の手順で進むと、賢威の基本的な設定を触ることが出来ます。その賢威の設定にフッターパネルの機能をカスタムすることが出来ます。
賢威の設定項目には様々な機能が備わってしますので、賢威8の使い方で詳しく解説しています。
賢威のバージョンをアップデートしたり、他のWordPressテーマから賢威に移行された際に、賢威8の設定が分かりづらいと感じてませんか？ WordPress初心者なら「この項目にどんな効果があるのか？」「項目自体の意味が …
赤枠で囲った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ボタン」です。
ちゃん手順3：CSSをカスタマイズしてフッターパネルを画面の外に移動する
ちゃん先ほどの項目でわざわざコピペしてもらった条件分岐した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ボタンは出てくる」という矛盾をカスタマイズしたいと思います。
ここで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;
}
目次ボタンを右下固定で表示するように、私が以前にカスタマイズしているので、そのボタンよりも上に表示するように下からの距離が大きく指定しています。
「bottom:95px」のところを小さな数字に変えれば、スマホ画面の下の方に近づきますので、いいポジションまでカスタムしてください。
まとめ
無事にカスタマイズすることが出来ました。
なるべく賢威8で整えられている機能を触りたくないし、簡単にカスタム出来ることを考えて試してみました。
1画面に色々な情報を詰め込んでしまうスマホですので、なるべくスッキリ分かりやすいようにシェアボタンを配置しています。
良かったら一度、フッターパネルから右下固定のシェアボタンのカスタマイズを試してください。
また、賢威8のフッター全体のカスタマイズ方法は、下記の関連記事で解説していますので参考にしてください。
ブログ最下部に表示されるフッターは、上手に活用すれば訪問者の回遊率やブログへの信頼性を高められる重要なエリアです。 そこで、賢威8のフッターの設定方法やカスタマイズ方法を解説します。 賢威8のフッターを利用するための設定 …
