こんばんは、会社の忘年会・バーベキューでコキ使われる氷太です。
今日も記事を見て頂いてありがとうございます。
髪切った女の子が、それに気づいて欲しい心理が分かったような今日この頃。
単刀直入に聞く、オレのブログ何か変わった所ねーかな？
いつも通りのクソブログだって？
ちっと体育館裏まで来いや。
意地悪言うなよ・・・ほら隅々まで見ておくれよ。
ほら、何か違くないか？
う～ん・・・・。
記事のクオリティが最悪・・・かな。
いやそれは元々か・・・。
コレだよコレ！右下のオオカミさん！！
上に戻るボタンとも言われていますね。
PCで見ている人にはあんまり恩恵ないかもしれませんが・・・。
スマホユーザーの事考えるとあった方が良いハズ！
でもよくある矢印じゃ物足りない！
世界でただ１つの「トップに戻る」ボタンにしたいの！！
・・・そんな虫唾が走るようなワガママさん必見のカスタマイズですよ！
画像付きの「TOPに戻るボタン」のカスタマイズ
まず画像を用意しよう！
自分のプロフィール画像に沿った物が好ましいかと思います。
オレの場合だと、プロフィール画像は狼男なので同じくオオカミで作成しました。
今の世の中便利な物ですね。
凄いクオリティの高いイラストもフリーで使用できるなんて・・・。
動物好きな人はこちらのサイトお勧め。
こんな可愛いクマさんもフリーで使用できます。
ここも可愛いかな。
動物のイラスト | かわいいフリー素材が無料のイラストレイン
例えばこのペンギン。
90度回転させて使用すれば、スクロールする時に滑ってるみたいで面白いかも。
画像を透過pngに変換しよう！
透過pngって何ぞ？って方居ると思います。
画像って普通、余白の部分がありますよね。
こんな感じで上に戻って行きます。
ダ・・・ダセー！！
ブログの背景が黒の場合は凄く目立ちます。
画像が上に行くと言うより、四角いボックスが登っていきます。
モロ画像をそのままペーストしてるって感じ丸出しですね。
「アタシのブログの背景は白だから、大丈夫だもんっ！」
っていうそこのマシュマロ系女。
相変わらず詰めが甘いな貴様は。
残念だがスクロールする際に、被さった文章やサイドバーが隠れる為モロバレだ。
悪い事は言わない、超簡単だから大人しく画像を透過png化しよう。
WEBブラウザ上で簡単に透過PNG画像を作成できるツール - PEKO STEP
このウェブツールで簡単に、色を指定して透過できます。
出来上がった画像をリサイズしよう。
ペイントでサイズを調整しましょう。
ブログにもよりますが・・・。
恐らく60～90pxの幅でOKかと思います。
オレのオオカミさんは幅90px縦132pxになってます。
下のお話じゃなくって、「上に戻るボタン」のオオカミさんのサイズですよ。
ご参考に。
ただこのままだと「何だこのオオカミは・・・。」で終わるかな？と思ったので、腹の部分に「上へ」という文字を付け足しました。
CSSを書き足す
こちらのサイトを参考に、コードを入力して行きます。
1箇所いじる必要があります。
//トップに戻るボタンの設定 <div id="page-top"> <a id="move-page-top"><i class="fa fa-arrow-circle-o-up fa-5x"></i></a> </div>
【はてなブログ】「トップへ戻る」ボタンをつけてみた - いつかギャフンと言わせたい
この部分ですね。
この部分を画像URLと書き換える必要があります。
「記事を書く」で透過png化した画像を貼ります。
HTML編集を開き、<p></p>で閉じられた部分をコピーします。
コピーしたコードを
//トップに戻るボタンの設定 <div id="page-top"> <a id="move-page-top"><i class="fa fa-arrow-circle-o-up fa-5x"></i></a> </div>
【はてなブログ】「トップへ戻る」ボタンをつけてみた - いつかギャフンと言わせたい
この赤文部分のコードを消して、ペーストして下さい。
お疲れ様でした、これで完成ですよ！
まとめ
自己満足・・・に留まらない効果を持っているのではないでしょうか？
TOPに戻るボタンって結構目に付きますから。
「何か変なオオカミがおる・・・！！」
と認識して貰えます。
大体訪問する人ってプロフィールに目を通してないと思うんですよ。
PCユーザーならまだしも、スマホユーザーだと尚更。
結構下の方にありますしね・・・。
でもこのオリジナリティのある「TOPに戻るボタン」があれば、世界が変わるかもしれません。
書き手が誰か認識されてなかったとしても、再度別の記事で訪問してくれた時に
「あ・・・！あの時のブログの人かコレ！！」
となるかもしれません。
俺のブログの場合
「あ・・・！社畜でウンコ漏らしで足臭い奴のブログかコレ！！」
って所でしょうか。
・・・やっぱこのオオカミ消そうかな？
ゆくゆくは上に戻るボタン押すとオオカミがロケットに乗って、1番上まで行ったら花火になる・・・って感じにしたいなー！！