【WPカスタマイズ】「ブログトップに戻る」ボタンを”オレサマライオン”に!

この記事は約325秒で読めます。

シェアしてねっ!

log-161208gotopbuttontop

ブログのカスタマイズって楽しくて止まらないですね(笑)。でもボクは素人なのでできる範囲であれこれ悪戦奮闘しているので、カスタマイズのたび「健忘録」的にこうして記事にしています。

今日のネタは、どんなブログでもよく目にする「トップへ戻る」ボタンをカスタマイズした話です!

「Simplicity」のカスタマイズで簡単設定

このブログは無料で提供されている「Simplicity」というテーマを使わせていただいていてそこからカスタマイズしていっていますが、「Simplicity」には「カスタマイズ」項目で簡単に「トップへ戻る」ボタンが設定できる様になっています。

log-161207gotopbutton01

「カスタマイズ」メニューの中から「レイアウト(全体・リスト)」を選択、その中の下の方に「トップへ戻るボタンに画像を指定」という項目がありますのでここで画像をアップロード→設定します。

設定完了!

log-161208gotopbutton01

たったこれだけの手間で設定が完了しました!

多くのブログで上向きの三角とか、矢印などシンプルなアイコンが採用されていますが、ボクはここで「オレサマライオン」を採用してみました。

え、オレサマライオンを知らない?

発売から約二年、Leo Miyanaga作のLINEスタンプ、「オレサマライオン」のお話
このブログの全身、「The Log」というブログでは制作から申請、承認までを紹介したことがありますが、およそ2年前にこの「オレサマライオン」というキャラを自作し、LIN...

↑知らない方はこちらの記事をどうぞ。

PC用とモバイル用の設定を追加

と、こんなに簡単なのですが、簡単な代わりに「カスタマイズ」機能内でイメージサイズをいじったり、PC用とモバイル用の差別化を設定することはできないのでさらにカスタマイズを続けます。

まずはPC用は、”設定&トライ”で見栄えがいい適度なサイズを決めて設定しました。大きすぎてもなんか邪魔だし、ちっさすぎたら文字が読めなくなったり、デザインバランスが微妙になります。

これは画像サイズをリサイズするだけなんでシンプルなのですが、問題はモバイル用です。

先ほどの「カスタマイズ」内で設定するとPCで見た場合の解像度に合わせるとモバイルで見たときに大きすぎるサイズになってしまう気がしてそれぞれで違う画像を設定したいなと思いましたが、その項目はテーマ内には用意されていません。

ということで、CSSをいじります。

「Simplicity」は子テーマも用意されていますが、子テーマの方の「mobile.css」に親テーマから下記の記述を探し、コピーします。

log-161208gotopbutton03

ここに記述を加えます。言い訳みたいですが、ド素人の素人知識でのカスタマイズなので余計な記述が残っているかも…。

log-161208gotopbutton04

この中で大事なのは「width」記述でこれでサイズを変えています。PC用の元サイズが100pxサイズなので20%サイズダウンさせています。

log-161208gotopbutton06

これは「iPhone 7」で見た状態です。微々たる差ですが、自分の感覚では右くらいの方が邪魔じゃないというか、しっくりおさまっている気がしています。

総括

「トップへ戻る」ボタンはそこまでこだわるポイントではないかも知れませんが細かいこだわりポイントとしてちょっといじって見ました。

このブログのアクセスは60%くらいがモバイルからの様ですので特にモバイルからの見た目を気にしましたが、いかがでしょうか?

よかったら感想お待ちしています〜!

この記事が気に入ったら
いいね!しよう

TwitterでLeo Miyanagaを

シェアしてねっ!

PR
気軽にコメントください!
書いてる人
シアトル生まれ、大阪育ち。第一言語は大阪弁。現在は日米行ったり来たり。EXSでは、留学や国際交流プログラムの企画を軸にキャリア支援、ライフプランニング事業を展開。フォトグラファー&心理家としても活動中。大阪に写真ギャラリーあり。主に風景と人物を撮っています。撮影依頼気軽にどうぞ!
PR
トップへ戻る