私はANAの修行僧★北海道在住OLのSFC/DIA修行ブログ

北海道好きな道産子OLブロガー♡旅行好きが高じてANAのSFC修行&DIA修行開始。ANA修行ルート♡滞在先の国内・海外旅行記♡陸マイル♡SPGアメックスでラグジュアリーなホテル滞在♡北海道観光&グルメ♡を発信しています。アメックスアンバサダーです❀SPGアメックスのご紹介できます♡お仕事依頼・SPGアメックス紹介のお問い合わせはTwitterのDMまたは当サイトお問い合わせフォームよりお願いいたします。

【スマホサイト用】はてなブログでオリジナル画像「上へ」ボタンを設置しよう!コピペでスタイルシート

スマホで上に戻るボタンを設定したい!

はてなブログスマートフォンで「上に」ボタンを設置したい。
でもスマートフォン用の「はてなの編集画面」にCSSの記入するところがない。
レスポンシブデザインに対応してないデザインを使っている。

さて上へボタンが設置できない困ったぞ!

なのでスマートフォン用にスタイルシートを書いて「上へ」ボタンをつけました。
参考になればと思い更新します。

私の作成したオリジナルキャラ「ニートちゃんTOPボタン」も自由にお使いください。
ご使用の際はコメントいただけたら嬉しいです。

 

目次

 

参考にさせてもらったブログの記事はこちらです。
PCバージョンはこちらのサイトのコピペで簡単にできました〜。
すごくわかりやすかったです。

 

画像の透過編集をしよう

私はiPhoneを使っているのでこちらの無料アプリ「背景透過」を使っています。細かい調整ができるのでオススメです。

これくらい精密に透過処理ができました。
保存はPNGでします。 

PNGは透過した画像保存に適しています。

  f:id:sfcsapporo:20180316030000p:image

私はmac使いなのでair dropで透過して保存した画像をmacに転送します。

f:id:sfcsapporo:20180316030332j:image

画像をアップロードしよう

 PCに保存した画像を日記の写真投稿からアップします。

f:id:sfcsapporo:20180316031456j:plain

 はてなフォトライクのページに飛んで
「フォルダ」内の Hatena blogをクリックして画像一覧を開きます。
使いたい画像をクリックして表示させてダブルクリックで画像のURLをコピーします。

f:id:sfcsapporo:20180316032229j:plain

 

実際にデザインhtmlとCSSを書き込みます

❶設定➡︎詳細設定➡︎headに要素を追加

❷デザイン➡︎フッタ➡︎フッタ
ページトップに戻るボタンを設定します。
太字のところを自分の画像のURLに変更します

<!-- 「ページトップへ戻る」ボタン -->
<div id="page-top">
<a id="move-page-top"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sfcsapporo/20180315/20180315153000.png?1521095421"></a>
</div>

<script>
$(window).scroll(function(){
var now = $(window).scrollTop();
if(now > 500){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
});
$("#move-page-top").click(function(){
$("html,body").animate({scrollTop:0},"slow");
});
</script>

同じくフッタに記入
<style></style>指定することでスタイルシートを設定してCSSを呼び出します。

<style>
/* ページトップへ戻るボタン */
#page-top {
display:none;
position:fixed;
right:15px;
bottom:10px;
margin: 0;
}

#move-page-top{
opacity: 0.7; /* ふだんのボタンの透明度 */
display:block;
cursor:pointer;
}

/* ポインタを重ねた時 */
#move-page-top a:hover{
opacity: 1.0; /* ポインタを重ねたときの透明度 */
}

#page-top img {
width:100px;
height:auto;
}
</style>

 

こちらをコピペするだけで簡単に「上へ」ボタンが設定できると思います。

f:id:sfcsapporo:20180315142815p:plain

念のために確認されてから保存ボタンを押してください。
自己責任でお願いします。

 

皆さまの旅行が快適になりますように( ^ω^ )私の残念女っぷりを読んで「ぷっ」って笑っていただけて心が和んでいただけたら嬉しく思います。

ポチッと応援お願いします→
 ブログランキング・にほんブログ村へ

✉️各種お問い合わせ
カード入会やその他お問い合わせはこちらのメールフォームよりどうぞ
メールフォーム