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

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

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

テンプレートによっては、実は最初から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;
}

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

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

続く。

2018-04-04

はてなブログカスタマイズ備忘録第一章、画像に枠をつける、ドロップシャドウ、ページ調整、蛍光ペンでマーカーを引いたように見える加工

はてなブログの事

4月に入り、おこめのお迎えまであと少し･･･お迎えまでの休みもあと数える位だ。あっという間に当日を迎えるであろう。

さて、そろそろ裏日記も仕上げ。

はてなブログのテンプレートやらCSSをカスタマイズしてきたが、ここらで備忘録としてまとめをしてみようと思う。自分が後で「あれ?どう言う設定だったかな?」となった時に、ここに帰ればすぐに確認・修正ができるように･･･

うろ覚えの部分が多いが、カスタマイズを行ってきた順に記しておこうと思う。

まず簡単な所から。

一番はじめに行った事、テンプレート選び。
画像に枠を付ける、ドロップシャドウを付ける。
行間の調整
画像の余白を調整する
Responsive: yes にしておく
蛍光ペンで文字にマーカー線を引く加工

一番はじめに行った事、テンプレート選び。

カスタマイズ以前の話だが、まず、どのテンプレートで書くか。以前のFc2程バリエーションはなく、そして、シンプルというか、正直地味だ(笑)　1カラムか2カラムか、最近はスマホからの見え方を中心にレイアウトがなされてているものが多いのか、1カラムのものも多いようだが、やっぱり昔からのブログでやってきているので、2カラムを選んだ。

で、カスタマイズの手引きが詳しく書いてあるものを発見、minimal greenさんのテンプレートからスタートした。

blog.minimal-green.com

いろいろな方がテンプレートを作成しており、そのテンプレートのカスタマイズの手引きが書かれているが、minimal greenさんのカスタマイズ記事が、私は一番親切で分かりやすいと思う。 CSSも公開しているため、ピンポイントでの変更もできそうだし、いじりすぎて分からなくなった場合、いつでも基本に戻る事ができそうだ(笑) ベースのデザインも好みなので、末永く使わせていただきたいと思う。

Minimal Green - テーマストア

ちなみに、他にもいくつかカスタマイズ用のテンプレートをダウンロードしており、裏日記で使っているsimple grayもなかなか良い。

Simple Gray - テーマストア

ゆめごこちの時のテンプレートに似ており、レスポンシブルもキレイにするのでGOOD。
ただ、カスタマイズ方法の紹介は少なめで、minimal greenさんのカスタマイズ方法がsimple grayに必ずしも適応されないようなので、少々のカスタマイズに留めている。

画像に枠を付ける、ドロップシャドウを付ける。

画像に枠を付けたいな、と思っていた。今までのブログでも画像に枠を付けていたので、枠を、できればドロップシャドウも付けたいな、と思い、これはすぐにコピペで数秒で作業終了。

CSSに貼り付けではなく、headに要素を追加の所にコピペのようだ。適応の優先順位はheadに要素を追加>CSS変更のようだ。

<style type="text/css">
/* 画像の枠線 */
img.hatena-fotolife {
border:1px #cccccc solid;
 padding: 7px;
 box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;  }
</style>

これでOK。

ちなみに、この記事を書くに際し、記事にコードの挿入の仕方が分からず、調べた。
いくつかやり方があるようだが、markdownで入力している私は```(←shift@キー、バッククォートと言う名称らしい)cs改行コード改行 ```でコードの挿入ができ、なおかつコードが色づけされて見やすく表示されるようだ。シンタックスハイライトと言うカッコイイ名称のようだ(笑)

行間の調整

はてなブログを書いてていてすぐに気づいた。行間がすごい開いているのと、行間と段落間のバランスがなんかヘン?使っているテンプレートの影響を受ける部分かもしれないが、はじめ、「見たまま編集」で記事を書いていた時から気になっていた。最初の頃の記事と今で、大分見た感じが違うはずだ(笑)

line-heightを調整すれば良い。
一般的には1.7～1.9程度で適当なようで、後は文章メインのブログかどうか、その人のクセや好みに応じて、と言ったところで調整でよいのではないかと思う。

私は1.9にしてある。

p { line-height : 1.9 ; }

参考にさせていただいたサイト

yossense.com

naifix.com

ちなみに、スマホからの文字の見え方調整もできるようだ。proプランじゃないとできないのかな、と思っていたので嬉しい。デフォルトだと行間が開きすぎ&文字が少し大きくて、１行あたりの文字数が少なすぎるので、少し調整してある。

@media screen and (max-width: 480px) {
p {
width : 100% ;
font-size : 90% ;
margin : 0 0 1.8em 0 ;
line-height : 1.6 ; }
}

行間1.6、文字の大きさはデフォルトの90%にしてある、私の小さなスマホの画面解像度横320pxでも小さすぎず、1ページあたりの文字数もそれなりにあり、このあたりがいいかな、と思うけど、大きい画面のスマホからの見え方が分からないので、正直な所なんとも言えない。

画像の余白を調整する

画像の余白も付けてある。上下に少し余白ないと息苦しいですからね。まぁ、文章入力で空行挿入すれば解決する問題でもあるけど。
上10ピクセル、下5ピクセルにしてある。

img { margin: 10px 0px 5px 0px; }

Responsive: yes にしておく

/* Responsive: yes */

もちろん最初からレシポンシブル対応のテンプレートである、と言うのが大前提ねw

蛍光ペンで文字にマーカー線を引く加工

他の方のブログを見てこんな文字装飾もあるんだ～と少し感動して、調べてみると、簡単なコピペで設置ができる事が分かった。

/* 強調表示を蛍光ペン（ピンク）風に */
article strong{
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#fcfc60 !important;
    background:linear-gradient(to bottom, transparent 60%, rgba(255,153,255,1) 60%) !important;
}
/* bタグは太字 */
article b{
    font-weight:bold !important;
}

マークダウンで記入するとこうなる **柴犬おこめの裏日記**→柴犬おこめの裏日記

カラーコードを変えると好きな色を設定できる。%を変更すると、マーカーの太さを変更できる。

一色しか使えないのかな、と思ったら、3色位は設定できるよう。strong（強調）タグ、em（斜線）タグ、u（アンダーライン）タグに割り振りをすると言うやり方だ。

/* 斜体表示を蛍光ペン（黄）風に */
article em{
    font-weight:bold;
    font-style: normal;
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#fcfc60 !important;
    background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
/* iタグは斜体*/
article i{
    font-style:oblique !important;
}

*柴犬おこめの裏日記*→柴犬おこめの裏日記

/* アンダーライン表示を蛍光ペン（緑）風に */
article u{
    font-weight:bold;
    text-decoration: none;
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#fcfc60 !important;
    background:linear-gradient(to bottom, transparent 60%, rgba(102,255,204,1) 60%) !important;
}

アンダーラインはマークダウン記法ではできないようで、タグ打ちのようだ。 柴犬おこめの裏日記→柴犬おこめの裏日記

ただ、実際の所、日記ブログな私はほとんど使う機会はないかと思う･･･むしろ、文字の大きさ文字と太字タグの方が出番が多いため、辞書登録してある。

まずはここまで。

続く。

2018-04-03

佐久ラ咲く径、つぼみ。

裏日記

新年度スタート！今日は休み。

今日はちまちまと用足し、冬物をクリーニングに出し、タイヤ交換の予約をして、毛布をランドリーで洗って、お買い物して…

ホームセンターに行きたかったため、佐久のカインズに行った帰りに、佐久ラ咲く径に寄ってみた。

f:id:okomepower:20180403173810j:plain

今年は全国的に桜の開花が早く、この辺りだと、4月の中旬～下旬のはずなのだが、つぼみが膨らみはじめていた。

おこめが来る頃には散ってしまっているかなぁ。

そして、我らがホームの御影用水路もそろそろ景色が春になってきた。

f:id:okomepower:20180403173822j:plain

おこめを迎えて、またこの道を毎日歩くよ。

おこめ、早くおいで～

柴犬おこめの裏日記

急きょ我が家にやってきた柴犬のちかちゃん(おこめ)ただいまトライアル中!

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