やまとろぐ

クロネコさんは関係ないです

【はてなブログ運営のあれこれ】行間・文字の大きさの設定

こんにちは。

 

今のところ2週間くらい?ぽつぽつと記事を書いてきましたが、私はまったくのブログ初心者です。初心者なりに、読みやすい記事を書けるようがんばってきた…ものの、ちょいちょい障害が立ちはだかってきました。行間の設定だとか、デフォルトの文字を少し大きくしたいだとか。

 

というわけで本題です。今日はそのへんの、私が今まで苦労させられた設定の類をささっと紹介しようかと思います。同じくブログ初心者の方には、何かしら役立つやもしれません。写真多めで説明するので、きっとどなたでも理解できるかと思います。

 

あ、PCで編集する前提です。スマホで編集する方法は…要望があれば追記します。

 

目次

1.改行したら空間が空きすぎるのを何とかしたい

2.読みやすい行間、文字の大きさに設定したい

 

 1.改行したら空間が空きすぎるのを何とかしたい

私が最初にぶつかった障害がこれです。がんばろうと意気込んで記事を書いたものの、

 

f:id:yamatodiary:20161017160658p:plain

 

この文章の場合、「例えば(1行改行)→このように(1行改行)→少しスペース」

と、入力しています。1行しか改行していないのに、空白がどうにも空きすぎる…これをなんとか設定できまいか?というわけです。

 

まずはブログの初期ページを開きます。そして画面の右上、「管理」をクリック

 

f:id:yamatodiary:20161017172041p:plain

 

そしたら、ダッシュボードとやらに画面が変わります。次は画面左の「デザイン」をクリック

 

f:id:yamatodiary:20161017173041p:plain

 

今度はこういう画面に。画面左に、小さいマークが3つ並んでいます。その真ん中、「カスタマイズ(レンチのマーク)」をクリックします。

 

f:id:yamatodiary:20161017173620p:plain

 

そしてまた次の画面へ。今度は「デザインCSS」をクリック。

 

f:id:yamatodiary:20161017174225p:plain

 

 変な英語が表示されるので、そこをクリック。すると

 

f:id:yamatodiary:20161017175442p:plain

 

なんか難しそう、帰りたい。と思ったのは私だけじゃない…と信じたいです。ここまでくればあと一歩なのでがんばりましょう。

 

この謎な画面は、デザインCSSの編集画面です。ここをあーだこうだといじくればデザインCSSを編集できるわけです。なんのこっちゃ。

 

というわけで、ここで少しだけ話をそらします。そもそも「デザインCSS」とは何なのか?です。定義はどうなのか知りませんが、私なりの解釈だと「ホームページのデザイン担当者」です。例えば、文字を大きくしてほしいだとか、ここに枠を作ってほしいだとか。そういったお願いを入力すれば、お安い御用さと叶えてくれるわけです。なんというイケメン。

 

というわけで、イケメンのお兄さんにお願いをします。ただそのお兄さんは日本人ではないので、特殊な言語でお願いをせねばなりません。今回の設定の場合、

 

先ほどの英語だらけの画面に、

*/.entry-content p { margin:0}/

と入力します。コピペでも構いません。こんな感じになるかと思います。

 

f:id:yamatodiary:20161017182235p:plain

 

このデザインCSSにおいては、改行やスペースは影響しません。なのでコピペは、3行目の「~system>」の後ろに貼り付けても何ら問題ありません。私は一応見やすいように改行してますけれども。

貼り付けたあとは、忘れずに「変更を保存する」をクリックしましょう。

 

 そして自分のブログを見ると、こうなります。

 

f:id:yamatodiary:20161017182842p:plain

 

今まで2行分?改行されていたのが、ばっちり1行分になりました。やったね!

 

ちなみに、なぜさっきの「*/.entry-content p { margin:0}/」を入力すれば問題が解決したのか。実は私にもよく分かりません(小声)他のサイト様を参考にして見よう見まねでやってみたらできちゃったというのが正直なところです。一応リンクを貼っておきます。気になる方はどうぞ。

 

web-ken.hatenablog.com

 

2.読みやすい行間、文字の大きさに設定したい

さっき設定したのは行間じゃないの?と今まで誤解していた馬鹿は私くらいだと思います。行間の設定とは、

 

f:id:yamatodiary:20161017190026p:plain

 

なんとも狂気じみてますけれども。改行しないで続けて文章を入力した際の、行と行との間隔の設定です。ついでにデフォルトの文字の大きさも少し変えてみます。…が、正直そこまで変わりません。別にされずとも問題ないかと思います。お好みでどうぞ。

 

というわけで早速始めます。手順はさっきと全く同じ!

メインページ→管理→デザイン→カスタマイズ→デザインCSS

忘れてしまった方は、先ほどの写真を見ながらすると分かりやすいかと思います。

 

何とかこの画面までたどり着きましょう。

 

f:id:yamatodiary:20161017182235p:plain

 

今回は、この謎な英語だらけの画面に

.entry-content {font-size:16px;line-height:1.8em;}

と入力、あるいはコピペします。個人的に一番読みやすいと思う、行間と文字の大きさの設定がこれです。

 

ちなみに、

font-sizeとは文字の大きさを、16pxとはその値を表します。

line-heightとは行間を、1.8emとはその値を表します。

気になる方は変更が可能です。それはまた後ほど説明します。

 

コピペしたら、こんな風になるかと思います。

 

f:id:yamatodiary:20161017193350p:plain

 

先ほど同様、忘れずに「変更を保存する」をクリックしましょう。自分のブログを見て、満足できたら設定はおしまいです。お疲れ様でした。

 

もし、もう少し行間を広くしたいだとか、文字を大きくしたいという方は。先ほどの数字を少しだけいじってみましょう。

 

大体違和感のないラインは、

font-size:15~17px

line-height:1.5em~2.0em

程度だと思います。自分の好みの値に置き換えられてください。

 

長くなりましたが、以上になります。よかったら参考にされてください。

 

実は他にも、

枠を作ってみたい

枠の中に背景をつけたい

デザインCSSの設定をスマホ表示にも反映させたい

 

という問題にも遭遇しました。でもこれ以上長くなるのもアレなので、それらは明日の記事で取り上げようかと思います。

 

 

ほいで、最後に余談を。このブログは本当に来訪者が少なく、

 

f:id:yamatodiary:20161017151638p:plain

 

ご覧のありさまです。この統計には私のアクセスも含まれているので、実際はもっと少ないんです。泣いてない。でも昨日はなぜか41アクセスも、なぜ?と思ってアクセス元を見てみると

 

f:id:yamatodiary:20161017151813p:plain

 

出ました、おもち様のブログ。なんとありがたい。神か。

 

ではでは