難病女子の心の裏側日記

難病と闘いつつ、好きなことを楽しむブログです☆

【はてなブログ】上に戻るボタンをオリジナル絵(画像)で設置してみる

 

こんにちは、木ノ下コノキ(@kinoshitakonoki)です。

 

 

PCからこれを見ている人は見れていると思うけど、ページをスクロールしていくとサイドバー側にコノキの絵がひょこんと現れると思うのです。

(ちなみに3/24現在はレスポンシブデザインにしてるのでスマホでも見られます。指を画面左に滑らせれば、右端にひっそりといます)

 

先日、Twitterで出してみたところ、思わぬ反響があったので、今回記事にします。

 

こんな風に。

 

上に戻るよって、コノキキャラがスクロールするとひょこんと現れます( *´艸`)

ここをクリックすれば、ページトップに戻ります。

 

 

じつはこれ、私の大好きな絵師さん兼ブロガーさんの、漆うしるさん(漆うしる (@UrushiUshiru) | Twitter)のまねっこなんですよね。

www.itjigoku.com

昨年(2018年)5月、上記の記事をアップしていたうしるさん。

 

この記事見て「はっわー、可愛い♡」となったと同時に、「自分もこれやってみたいーーーー」とコメントしてから早10か月。

 

やっと先週にやれましたわ。

やってしまいましたわ。

 

そして今回記事にもさせて貰いました。

タイトルも似たようになってごめんなさい...

 

さて長ーい前置きははやめてさっそく作り方いきますね

 

まずは画像から作っていきましょうか。

 

 

画像の作り方

1. 画像編集ソフト、イラストソフトなどがあれば好きにイラストを描いてみましょう

(コノキはCLIP STUDIO PAINT PROを使用しています)

 

300×300px 350dpiで用紙を用意します。そこに、上に戻るボタンだと分かるように絵を描きましょう

 

f:id:kinoshitakonoki:20190324101023j:plain

2. 色を入れたいところすべてに色を入れます

 

白にしたいところも白を入れてください。あとから背景透過したときに中身も透過されてしまいます。

f:id:kinoshitakonoki:20190324101804j:plain

じゃないとこーんな風に口の中も洋服も透過されちゃうよ(笑)コノキがこの状態ですね

(※この画像は例として出すためにトーンを貼っています)

f:id:kinoshitakonoki:20190324102302p:plain

 3. 背景透過させる

 

さて背景透過させたら、次はブログの編集に移りましょうか。

 

「デザイン」→「カスタマイズ(スパナマーク)」→「デザインCSS」を開く

 デザインCSSに下記のCSSをコピーして貼る

 /* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:0px;
right:0px;
color: #ffffff; /* 文字色 */
font-size:0px;
text-decoration:none;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 0px 0px;
border-radius: 50%; /* ボタンの丸み */
opacity: 1.0; /* ボタンの透明度 */
z-index: 99;
}
/* ページトップへ戻るボタン:ホバー時 */
#pagetop:hover {
color: #ffffff; /* 文字色 */
opacity: 0.7; /* ボタンの透明度 */
}
#pagetop img {
width:150px;
height:150px;
}

 

「デザイン」→「カスタマイズ(スパナマーク)」→「フッタ」を開く

 フッタに下記のHTMLをコピーして貼る

<!-- 上へ戻るボタン -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
/** ページトップ処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置が200を超えた場合
if ($(this).scrollTop() > 200) {
$('#pagetop').fadeIn();
} else {
// ページトップへをフェードアウト
$('#pagetop').fadeOut();
}
});
// ページトップクリック
$('#pagetop').click(function() {
// ページトップへスクロール
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
})(jQuery);
</script>

<a id="pagetop" href="#top" class="page_top" style="display: none;"><img src="貼りたい画像URL" aria-hidden="true"/></a>

このときの注意点 

最後の「貼りたい画像URL」の調べ方は画像を記事に貼り付けHTML編集に切り替えると見ることが出来ます。赤字の部分(リンク)がコノキの画像URLです。ここを自分の画像URLに変えてくださいね。

<a id="pagetop" href="#top" class="page_top" style="display: none;"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kinoshitakonoki/20190315/20190315230413.png" aria-hidden="true"/></a>

画像URLの調べ方を詳しく知りたい方は、こちらの記事もチェックしてみてくださいね。

www.kinoshitakonoki.com

 

うまく設置できたら 

「変更を保存する」をします

今までの苦労が水の泡にならないように、CSSとHTML貼ったらしっかり保存しましょう。

 

そして、ここで安心しちゃだめ。

 

自分のブログに行って、上に戻るボタン押してみましょう。

 

そうです、最終確認ですね。

 

これでうまく作動すればOKです。

 

お疲れさまでした。

 

 まとめ

オリジナル画像使って上に戻るボタンを設置する方法を書いてきましたが、いろいろな画像で試したくなりますね。

 

今回は300×300pxで作りましたが、大きくも小さくも出来ますので、お好きなサイズで楽しんでくださいませ。

 

では、今回はこの辺で。

 

またね( *´艸`)

 

 

読者登録励みになります。

 

ブログ村に参加しています。

よろしかったらポチッと応援よろしくお願いします(*´艸`*)

 ↓ ↓ ↓

にほんブログ村 病気ブログ 難病(特定疾患)へにほんブログ村 病気ブログ 高安動脈炎へ
にほんブログ村

 

スポンサーリンク

 

Copyright © 2017 木ノ下コノキ All Rights Reserved.