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

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

MENU

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

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

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

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

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

まず簡単な所から。

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

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

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

blog.minimal-green.com

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

Minimal Green - テーマ ストア

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

Simple Gray - テーマ ストア

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

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

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

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プランじゃないとできないのかな、と 思っていたので嬉しい。デフォルトだと行間が開きすぎ&文字が少し大きくて、1行あたりの文字数が少なすぎるので、少し調整してある。

@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;
}

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

ただ、実際の所、日記ブログな私はほとんど使う機会はないかと思う・・・ むしろ、文字の大きさ<span style="font-size: ○%">文字</span>と太字<b>タグの方が出番が多いため、辞書登録してある。

まずはここまで。

続く。