カスタマイズ備忘録、ここもコピペでできるが、知っていると便利な事。続き。
ページ上部に戻るアイコン、どうやって付けるの?!
ページ上部へ戻る、アイコン。画面をある程度スクロールさせると、スーッと右下(右下以外のサイトもあるけど)に現れて、クリックすると一気にページの先頭へ画面が上がっていく「アレ」だ。
テンプレートによっては、実は最初からCSSに見込まれているものもあるようだが、はてなブログの場合は、デザイン設定でフッター部分と、CSS部分の2カ所に手を加えて、はじめて表示されるようだ。
使用しているテンプレートによって、そのテンプレートに依存の設定もあるようだが、このやりかたが、どのテンプレートにもきちんと対応できているので、この方法を使わせていただいている。
まず、アイコン表示の下準備としてFontAwesomeを使うので、管理画面ページの「headに要素を追加」の所にこれをコピペ。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
デザイン設定の「フッター」にこれをコピペ
<div id="page-top"> <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-4x"></i></a> </div> <script> $(window).scroll(function(){ var now = $(window).scrollTop(); if(now > 700){ $("#page-top").fadeIn("slow"); }else{ $("#page-top").fadeOut("slow"); } }); $("#move-page-top").click(function(){ $("html,body").animate({scrollTop:0},"slow"); }); </script>
アイコンの種類を変えたければfa-chevron-circle-upの部分を好きなものに変えれば良い、アイコンの大きさはアイコン名の後ろの数字(こでは4)を変えれば良い。
そして、CSSにこちらをコピペ
#page-top { display:none; position:fixed; right:10px; bottom:20px; margin: 0; padding: 0; text-align:center; } #move-page-top{ color:rgba(0,0,0,0.4); text-decoration:none; display:block; cursor:pointer; } #move-page-top:hover{ color:rgba(0,0,0,0.6); } @media only screen and (min-width: 400px){ #page-top{ right:50%; margin-right: -450px; } }
中の数字を変える事によって、どの位画面がスクロールしたらボタンが表示されるか(このページだと700)、クリックした際にページ上部にスクロールする速度を任意で決められる(ここではslow)
こちらのページを参考にさせていただきました。いくつもあるサイトの中で一番分かりやすかった。
azanaerunawano5to4.hatenablog.com
これで「ページ上部に戻る」ボタンが設置される。
できた!と喜んでいたら、自分のスマホでは表示できない、画面を横方向にするとボタンは表示される。なぜだ・・・
コピペCSSを確認すると、私のスマホの画面が小さい(4.7インチ、画面解像度320×480pxかな?)のが原因と思われ、メディアクエリを自分のスマホの横幅320px用でも表示できる設定に直せばいいのかな?
と言うワケで、
@media only screen and (max-width: 320px){ #page-top{ right:50%; margin-right: -450px; } }
これで私の小さなスマホの縦画面でもページ上部ボタンが表示されるようになった。
きちんと表示された時は、ちょっと感動&安心した(笑)
レスポンシブルに対応しているかと思いきや・・・スマホで画面がほんの少し横揺れしている!!!
ここからは、スマホのレスポンシブルに関する事。
基本的には、レスポンシブル対応のテンプレートは、スマホで見ると、いい具合にレイアウトを変えて、例えば2カラムのテンプレートは1カラムとなり、レイアウト崩れを起こさず表示できるはずで、パッと見はOKかと思われた。
しかし、画面をスクロールしていると、ほんの少しだが右方向に横揺れを起こしている・・・もうガッカリorz・・・
ヘッダーの横幅と本文の横幅がビミョーに合っていないのが原因というのにはすぐ気づいた。どうしてそんな事に・・・? よーく見てみると、画像の枠が悪さをしているように思えてきた。一旦PC画面から「検証」でチェックしてみると、やはり画像の枠がはみ出しの原因のよう。
直し方を調べるも、うまくいかずずいぶん時間を無駄にした。
知りたい事ピンポイントでヒットしたサイトに基づいて、やってみた。
一番簡単な方法はこれ?
/*スマホ横揺れ対策*/ iframe { width : 100% ; }
しかし、これで問題解決せず悩む・・・今度は、画面の右端が少ーし見きれているよおおぉぉぉ(涙)
画像の横幅widthに対して100%にしても、枠を入れることでボーダー(線)やパディング(内側の余白)の計算が入っていないため、そのぶんグラグラ横揺れしてはみ出してしまうよう。画像のみレスポンシブで枠は無視されているよう。枠も含めて画像と認識してもらって、ピッタリ幅に収まるようにしたい・・・
box-sizingを理解する必要があるようで・・・で、「box-sizing: border-box;」にすると良いようで・・・
/*画像右端途切れ対策*/ img { max-width: 100%; height: auto; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; }
直ったよ・・・直った瞬間1人でガッツポーズ(笑)こういう作業ってホント、イライラするけど、バシッとはまった時は嬉しいですね(笑)
ページ構造のCSSをもう一度きちんと理解していれば、そんなに難しい問題じゃないのだろうけども、ここら辺りだと、コピペだけではどうにもできない問題なんだよなぁ。
疲れちゃった。でも、スッキリ。
助かりました、どうもありがとうございました。
リンクカラー変更
これも簡単にできると思っていた。 minimalgreenさんのカスタマイズのページに、リンクカラー一括変更のページがあったので、そのままコピペでいいかな、と思ったのだが、意図しないところが変わっていたり、リンクカラーの項目が多いため、意外と苦労した。 特に、サイドバーモジュールも、項目によって、リンクなしだったりリンクありで設定が分かれていたりする(リンク・最新記事・最近のコメント・月別アーカイブ・カテゴリモジュールは .hatena-urllist という共通の class が振られます、と言う事だそう)ので、どこを直すと反映されるのか、一つずつ確認しながら作業するのが疲れた・・・
一度設定してしまえば、そう変える事はないと思うので、備忘録としてメモしておく。
- 本文リンクカラー 裏日記#0f5373 メインブログ#1487bd
- 本文マウスオーバー時 裏日記#2e83ab メインブログ#0f5373
- サイドバー(urllist モジュール) リンクカラー 裏日記#303030 メインブログ♯1487bd
マウスオーバー時 裏日記#0f5373 メインブログ#0f5373 アンダーラインあり - 日付の○の色 裏日記#77a0b3 メインブログ#f39c12
リンクカラーだが、後で背景をつけたら、ページ最後のフッター部分のブログタイトルとpowered by Hatena Brogの部分が背景色に消されてしまい、どこを直したら良いかしばらく悩んだ。デフォルトは薄いグレーのようなので、ここの色を濃い色に・・・
minimalgreen さんのサイトにテンプレートのCSSが全て公開されているので、じーっと見ていくと・・・あった。
/* footer調整 */ #footer { padding: 30px 0; text-align: center; color: #333333; line-height: 1.5; font-size: 80%; } #footer p { margin: 0; } #footer a { color: #333333; }
リンクカラーを濃い色にする事ができた。
ここまできて、あとは、ヘッダー画像の挿入と、グローバルメニュー設置かな、コピペで行けるだろうと軽く考えていたが・・・
続く。