柴犬おこめにひとめぼれ しあわせおむすび日記

わが家にしあわせを結んでくれる柴犬「おこめ」の物語

MENU

はてなブログカスタマイズ備忘録 第二章、ページ上部に戻るアイコン設置・リンクカラー変更、そして スマホ画面横揺れ対策に苦戦

カスタマイズ備忘録、ここもコピペでできるが、知っていると便利な事。続き。

ページ上部に戻るアイコン、どうやって付けるの?!

ページ上部へ戻る、アイコン。画面をある程度スクロールさせると、スーッと右下(右下以外のサイトもあるけど)に現れて、クリックすると一気にページの先頭へ画面が上がっていく「アレ」だ。

テンプレートによっては、実は最初から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画面から「検証」でチェックしてみると、やはり画像の枠がはみ出しの原因のよう。

f:id:okomepower:20180406185002p:plain

直し方を調べるも、うまくいかずずいぶん時間を無駄にした。

知りたい事ピンポイントでヒットしたサイトに基づいて、やってみた。

一番簡単な方法はこれ?

/*スマホ横揺れ対策*/
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;
}

f:id:okomepower:20180406185048p:plain

直ったよ・・・直った瞬間1人でガッツポーズ(笑)こういう作業ってホント、イライラするけど、バシッとはまった時は嬉しいですね(笑)

ページ構造のCSSをもう一度きちんと理解していれば、そんなに難しい問題じゃないのだろうけども、ここら辺りだと、コピペだけではどうにもできない問題なんだよなぁ。

疲れちゃった。でも、スッキリ。

bibabosi-rizumu.com

助かりました、どうもありがとうございました。

リンクカラー変更

これも簡単にできると思っていた。 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;
}

リンクカラーを濃い色にする事ができた。

ここまできて、あとは、ヘッダー画像の挿入と、グローバルメニュー設置かな、コピペで行けるだろうと軽く考えていたが・・・

続く。