[WP]Simplicityの「トップへ戻るボタン」・「メニューボタン」にテキストを入れる方法

SimplicityのTOPに戻るボタン・モバイルメニューボタンにテキスト(文字)を入れる方法

最近、ひとさまのWordpressのテーマを作っています、えむ氏(@mlog_xyz)です。

自分のブログのテーマをカスタマイズしようとしていた矢先、友達のホームページデザインをお願いされ、自分のブログそっちのけで、そればっかりやっていました。

僕のブログのテーマはわいひらさんSimplicityを使っていまして、それに慣れているので、そちらでもSimplicityを使ってカスタマイズをしました。

友達がWordpressでサイトを作ると言ったとき、有料テーマを買おうとしていたんだけど、高い金出して有料テーマ買わなくてもいいんじゃないか、Simplicityでも良いサイト作れるよ、何なら僕が作るよと、ということになりました。

Simplicityは商用でも使えますし、無料で利用できるし、SEOも考慮してるし、カスタマイズしやすいし、レスポンシブなので、言うことなしのテーマです。

スポンサーリンク
レクタングル(大)広告

「トップへ戻るボタン」のカスタマイズ

Simplicityでは、Wordpress管理画面から「トップへ戻るボタン」の色、背景色を変えたり、アイコンをFont Awesomeから選択できたりアイコンを画像に差し替えたり、簡単に変更できます。

だけど一つ簡単にできないことが、それがテキスト(文字)を入れること。「トップへ戻るボタン」ってアイコンだけじゃなく、「TOP」とか「PAGE TOP」とか「TOPへ戻る」とかのテキストも入ってたりするでしょ。友達のサイトにはぜひ入れてあげたくなったので、やってみました。

「トップへ戻るボタン」は「button-go-to-top.php」の中に

まず、「トップへ戻るボタン」を表示するためのテンプレートは「button-go-to-top.php」になります。ですので、テーマの編集から「button-go-to-top.php」をいじるのですが、直接いじっていしまうと元に戻せなくなるので、子テーマをインストールして、その中に「button-go-to-top.php」をFTPクライアントソフト等でコピーして、そちらをいじるといいと思います。

「button-go-to-top.php」の中身

テーマの編集から「button-go-to-top.php」を見てみると、以下の箇所があります。ここら辺にテキストをいれます。もう少し上は「トップへ戻るボタンに画像が指定されている場合」なので、いじりません。

「トップへ戻るボタン」にテキストを入れる方法

アイコンの下にテキストを入れる

まずはアイコンの下に「TOP」というテキストを入れてみます。こんな感じになります。

WP Simplicity TOPに戻るボタンにテキストを挿入

コードは下記のように書き換えました。アイコンの後ろで改行して、「TOP」というテキストを入れただけです。

アイコンの右にテキストを入れる

他のパターンとして、アイコンの右に「PAGE TOP」というテキストを入れてみます。こんな感じになります。

WP Simplicity TOPに戻るボタンの横にテキストを挿入

コードは下記のように書き換えました。アイコンの前にテキストを入れて、アイコンは以前より小さくしました。

「トップへ戻るボタン」を丸くする

ついでにボタンを丸くする方法も紹介します。こんな感じのボタンにします。

WP Simplicity TOPに戻るボタンを丸くする

これはスタイルシート(CSS)をいじって変えます。

ちなみにデフォルトの「トップへ戻るボタン」のCSSは以下の通りです。

このCSSがSimplicityの親テーマのスタイルシート(style.css)に記述されています。ここを書き換えてもいいですが、「button-go-to-top.php」のテンプレートと同じように、子テーマに記述したほうがいいでしょう。

記述する場所は子テーマ内のスタイルシート(style.css)、完全レスポンシブな人は「responsive.css」に記述します。

スタイルシート内に下記を書き加えます。子テーマに記述したものは親テーマより優先されます。

「メニューボタン」にテキストを入れる方法

モバイル画面のメニューボタンにもテキストを入れてみます。こんな感じです。

WP Simplicity モバイルメニューボタンにテキストを挿入

「メニューボタン」を表示するためのテンプレートは「button-menu.php」ですので、「button-go-to-top.php」のときのように、親テーマから子テーマにコピーして、それをいじります。

「button-menu.php」の中に上記の箇所があります。この箇所を下記のように書き換えました。アイコンの前に「MENU」というテキストを入れてその後ろで改行しだけです。

このままでもいいいんですが、「トップへ戻るボタン」とボタンの大きさが違ったり、余白が違ったりするので、スタイルシートで「トップへ戻るボタン」に合わせてみました。

こんな感じのボタンになります。

WP Simplicity モバイルメニューボタンをスタイルシートでカスタマイズ

ちなみにデフォルトの「メニューボタン」のCSSは以下の通りです。

このCSSがSimplicityの親テーマのスタイルシート(style.css)に記述されていますが、前回と同じように子テーマのスタイルシートに下記を追加記述します。

まとめ

ちょっとしたカスタマイズですが、Simplicityっぽさから脱却できるかもしれませんよ。

スポンサーリンク
レクタングル(大)広告

フォローする

[WP]Simplicityの「トップへ戻るボタン」・「メニューボタン」にテキストを入れる方法
この記事をお届けした
えむ氏のログの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク
レクタングル(大)広告
トップへ戻る