【Twenty Sixteenカスタマイズ】トップに戻るボタンを追加する

今回は、2015年末に公開されたWordpressの最新デフォルトテーマの「Twenty Sixteen」のカスタマイズTIPSです。

よくサイトを見ていて「トップにもどるアイコン」が設置されているのを見かけることはないでしょうか？

PCで便利なのはもちろんのこと、スマホでもこういったユーザーが使いやすくなる要素は非常に重要になってきています。

今回は、こういった上に戻るボタンが簡単に設置できる方法をお伝えします。

 

フォントの変更や、余白調整、スライドショーの挿入、固定ページをトップページにする方法などは過去の記事をご参考ください。

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は？
【Twenty Sixteenカスタマイズ】フォントを変更する方法
【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法
【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法
【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ（段落）を装飾する方法
【Twenty Sixteenカスタマイズ】コピーライト表記を書き換える方法

 

プラグインを使用して戻るボタンを配置する

トップに戻るボタンの実装方法として、最も簡単・かつポピュラーなやり方はプラグインを利用する方法です。

今回は、「Scroll Back to Top」というプラグインを利用します。

「プラグイン」＞「新規追加」より「Scroll Back to Top」をインストール、有効化してください。

インストールしたら、「設定」＞「Scroll Back to Top」を開いて下さい。

色々英語の項目が出てきますが、変更する可能性がある場所はほんの少しです。

■ Background Color* Background Hover Color*

ボタンの背景の色です。サイトカラーに合った色を選ぶとよいでしょう。

Hoverはマウスカーソルが乗った場合の色です。

■ Foreground Color* Foreground Hover Color*

ボタンのアイコンの色です。こちらもサイトカラーに合った色を選ぶとよいでしょう。

Hoverはマウスカーソルが乗った場合の色です。

■ Horizontal Alignment*

Rightならサイトの右に、Leftなら左です。

■ Label Type*

ボタンのアイコンの内容です。CustomTextを選択した場合は任意の文字列を表示可能です。

 

設定すべき内容はこの程度だと思います。

また、あまりにもアイコンサイズを大きくしてしまうとスマートフォンで見た際にコンテンツと被ってしまう可能性がありますのでデフォルトサイズくらいにしておいたほうが無難です。

 

これで無事に戻るボタンが実装されました。

今回のTIPSは以上になります。

 

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は？
【Twenty Sixteenカスタマイズ】フォントを変更する方法
【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法
【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法
【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ（段落）を装飾する方法
【Twenty Sixteenカスタマイズ】コピーライト表記を書き換える方法