[WP]Simplicityで画面端にSNSなどの固定/追従ボタンを設置する方法

2019.07.13 2016.10.15

Simplicityはほんとカスタマイズしやすいテーマだと思います、えむ氏（@mlog_xyz）です。

前回記事でも書いたとおり、友達のサイトをWordpressで作っていますが、SimplicityはWordPress管理画面で「サイトタイトルの中央寄せ」という項目があります。これで簡単にサイトタイトルを中央に寄せることできます。サイトタイトルをロゴ画像にすれば、ちゃんとしたサイトっぽくなります。

ただここで1つ問題が。サイトタイトルを中央寄せにしてしまうとトップにあるSNSのフォローボタンは表示されなくなってしまいます。

まあそういう仕様なので仕方ないのですが、SNSのボタンができれば欲しいし、中央寄せにしたタイトルの両端にぽっかりとスペースが空いてしまうし…と悩んだ結果、その辺りに自分でボタンを作ってしまおうという結論にいたりました。

ボタンの作り方
まとめ

ボタンの作り方

ボタンの作り方ですが、そんなに難しくありません。使うのはSimplicityの子テーマに既に存在する「before-main.php」というテンプレートです。

ここに記述されたものは通常、ヘッダーのナビメニューとメインカラムの間に表示されることになりますが、ボタンの位置はCSSで指定してしまうので、記述する場所はどこでもいいんです。

「before-main.php」はデフォルトでは何も書かれていないので、失敗してテーマがおかしく表示されてしまっても、書いたところを消すだけで簡単に戻せます。そういう意味で安心で、ちょうど良いテンプレートです。

Twitterボタンを作ってみる

今回は例として画面左端、タイトルロゴ画像あたりの高さに表示されるTwitterボタンを作ってみます。

完成図はこれ。

ボタンのアイコンは「Font Awesome」を使います。Font Awesomeを使うには「Font Awesome Icons」というプラグインを入れるのが簡単かな。

まず「before-main.php」テンプレートに以下のコードを記述します。

<!-- ロゴ左ボタン -->
<div class="logo-side-left">
<a class="logo-side-button" href="http://twitter.com/mlog_xyz">
<i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
</a>
</div>

わかりやすく改行して記述しています。2行目と6行目がボタンを設置するスペース、3行目と5行目がリンク、4行目がFont Awesomeのアイコンです。

Font Awesomeのアイコンはfa-twitter、大きさを2で設定しています。3行目のURL、4行目は作るボタンに応じて変えましょう。

スタイルシートで位置の指定、ボタンの装飾

このままでは、ただメニューとメインカラムの間にTwitterアイコンが表示されるだけです。

こんな感じにね。

スタイルシートで位置の指定、ボタンの装飾をしなければいけません。

スタイルシート（style.cssかresponsive.css）に下記のコードを記述します。

/* ロゴ左ボタンスペース *********************************/
.logo-side-left {
    position: absolute;
    top: 50px;
    left:0;
    text-align: left;
}

/* ロゴサイドボタン **************************************/
.logo-side-button {
    display: inline-block;
    padding:10px;
    text-align: center;
    text-decoration: none;
    outline: none;
}
.logo-side-button,
.logo-side-button::before,
.logo-side-button::after {
    -webkit-transition: all .3s;
    transition: all .3s;
}
.logo-side-button {
    background-color: #55acef;
    color: #fff;
}
.logo-side-button:hover {
    background-color: #86c3f2;
    color:#fff !important;
}

4、5行目でボタンの場所を指定しています。左端なのでleft:0px、上から50pxの場所にしていますが、数字を変えてお好きな位置に配置しましょう。

10～16行目で、アイコンをテキストではなくボタンにしています。

17～22行目でマウスオーバーした時にボタンの色が（さっと変わるのではなく）じわっと変わるようにしています。CSS3のtransitionプロパティというやつですかね。

23～26行目でボタンの色と文字（アイコン）の色を、27～30行目でマウスオーバーした時のボタンの色と文字（アイコン）の色を設定しています。好きに変えてください。

ここまででとりあえずボタンは完成です。

ちなみに今のところボタンは画面をスクロールするとスクロールした分移動します。追従させるには、3行目の「position: absolute;」を「position: fixed;」に書き換えるだけです。

これで画面をスクロールしても、ずっとボタンは画面の左上にいます。

画面幅によって非表示にする

ボタンは完成なんですが、もう1つ気にするところがあります。それは画面幅によってボタンを表示するか非表示にするかということです。

例えば、スマホで見た時にボタンがあると文字などに被って邪魔な時があります。

なので、画面幅によってボタンの表示/非表示をスタイルシートに記述します。

/* モバイル画面でロゴサイドボタン消去 ********************/
@media screen and (max-width:1110px){
    .logo-side-left {
        display:none;
    }
}

この画面幅の設定はSimplicityのヘッダーのナビメニューが消えて、モバイルメニューボタンが表示される幅と同じに設定しています。

まとめ

今回はTwitterのボタンを作ってみましたが、考え次第でどんなボタンでも作れます。アイコンはFont Awesomeを使わなくてもテキストでもいいし画像を使ってもいいですしね。あとは、右側にもボタンを配置してみてもいいし、画面端じゃなくてもいいし、何個もボタン作っちゃってもいいし。

ボタンの位置や大きさをこだわればオリジナルボタンが作れますので、ぜひやってみてください。

ボタンの作り方

Twitterボタンを作ってみる

スタイルシートで位置の指定、ボタンの装飾

画面幅によって非表示にする

まとめ

コメント