イントロダクション
何か今日は『トップに戻るボタン』を作るそうです。
パソコンのブラウザだと下にスクロールすると右下あたりに出現するボタンで、クリックすると最上部に戻るやつですね。
今回はこれを作成するとの事ですが、個人的には余りにもデザインがおかしくなければ別に無理にカスタマイズしなくていいような気がします。
まあ、他に休養期間中に短時間で出来るものがないようなので、余力がある内に作り込める所はやっておきましょう。
トップに戻るボタンを作成する
では、とりあえず作ってみましょう。
ゼロからデザインするのは無理なので、こちら↑のフリー素材を使用させて頂きます。
うん。なかなかに中二病的で私の琴線に触れまくりの良いデザインですね。
と、いう訳で5分後。紆余曲折ありましたが無事に完成しました。
……いや、完全に手抜きじゃねぇかっ！！！
って声が聞こえてきそうですが、元々のデザインが完成されてましたからね。
シンプルイズベストという言葉もありますし、あんまり手を入れて改悪するのもアレですので、これで勘弁して下さい。
TOPに戻るボタンを実装してみる
では、さっそく実装しましょう。
Cocoonの場合はトップに戻るボタンは120pixelにした方が良いらしいので、前項で作ったやつをクリスタで適当に縮小します。
で、次は設定の方です。ダッシュボードからCocoon設定をクリックして『ボタン』のタブを開きます。
下の方にあるボタン色で背景色を『#ffffff』に設定。
その下にあるボタン画像に、さっき作ったイラストを指定します。
最下部にある『変更をまとめて保存』ボタンを押して、今度はCSSの追加をしましょう。
今回、参考にさせて頂いたのは上記のサイト様です。
/* トップに戻るボタンカスタマイズ */
.go-to-top-button {
width: 120px;
height: 120px;
border-radius: 50%;
box-shadow: 2px 2px 4px darkgrey;
}Cocoonの子テーマのスタイルシートに上記のCSSを追記して、とりあえず完成です。
では、実際にどうなっているのかプレビューで見てみましょう。
おお、ちゃんと丸くなって影も付いてますね。
思ったよりもいい感じな気がします。
デザインをほとんどしなかったので、サクサク終わって良かったですわ。
今回の経費＆記事作成時間
記事作成時間：約2時間（TOPに戻るボタン作成作業込み）
デザインにこだわりさえなければ、意外と短時間で出来るカスタマイズですのでブログで書くネタがないという方はやってみても良いと思います。
では、恒例の累計出費＆記事作成時間を発表して今回は終わりにしましょう。
最後まで読んでくださった方はありがとうございました。
総制作時間：約105時間
累計支出：17,080円
※リライト作業済みの記事です。