ブログのカスタマイズって楽しくて止まらないですね（笑）。でもボクは素人なのでできる範囲であれこれ悪戦奮闘しているので、カスタマイズのたび「健忘録」的にこうして記事にしています。
今日のネタは、どんなブログでもよく目にする「トップへ戻る」ボタンをカスタマイズした話です！
「Simplicity」のカスタマイズで簡単設定
このブログは無料で提供されている「Simplicity」というテーマを使わせていただいていてそこからカスタマイズしていっていますが、「Simplicity」には「カスタマイズ」項目で簡単に「トップへ戻る」ボタンが設定できる様になっています。
「カスタマイズ」メニューの中から「レイアウト（全体・リスト）」を選択、その中の下の方に「トップへ戻るボタンに画像を指定」という項目がありますのでここで画像をアップロード→設定します。
設定完了！
たったこれだけの手間で設定が完了しました！
多くのブログで上向きの三角とか、矢印などシンプルなアイコンが採用されていますが、ボクはここで「オレサマライオン」を採用してみました。
え、オレサマライオンを知らない？
http://blog.leomiyanaga.com/event-activity/oresama-lion-line-stamp
↑知らない方はこちらの記事をどうぞ。
PC用とモバイル用の設定を追加
と、こんなに簡単なのですが、簡単な代わりに「カスタマイズ」機能内でイメージサイズをいじったり、PC用とモバイル用の差別化を設定することはできないのでさらにカスタマイズを続けます。
まずはPC用は、”設定＆トライ”で見栄えがいい適度なサイズを決めて設定しました。大きすぎてもなんか邪魔だし、ちっさすぎたら文字が読めなくなったり、デザインバランスが微妙になります。
これは画像サイズをリサイズするだけなんでシンプルなのですが、問題はモバイル用です。
先ほどの「カスタマイズ」内で設定するとPCで見た場合の解像度に合わせるとモバイルで見たときに大きすぎるサイズになってしまう気がしてそれぞれで違う画像を設定したいなと思いましたが、その項目はテーマ内には用意されていません。
ということで、CSSをいじります。
「Simplicity」は子テーマも用意されていますが、子テーマの方の「mobile.css」に親テーマから下記の記述を探し、コピーします。
ここに記述を加えます。言い訳みたいですが、ド素人の素人知識でのカスタマイズなので余計な記述が残っているかも…。
この中で大事なのは「width」記述でこれでサイズを変えています。PC用の元サイズが100pxサイズなので20%サイズダウンさせています。
これは「iPhone 7」で見た状態です。微々たる差ですが、自分の感覚では右くらいの方が邪魔じゃないというか、しっくりおさまっている気がしています。
総括
「トップへ戻る」ボタンはそこまでこだわるポイントではないかも知れませんが細かいこだわりポイントとしてちょっといじって見ました。
このブログのアクセスは60%くらいがモバイルからの様ですので特にモバイルからの見た目を気にしましたが、いかがでしょうか？
よかったら感想お待ちしています〜！
