Flamin-GO

その時々で興味のあることや気になったことを徒然なるままに書き綴るブログ

ゼロから始める はてなブログ #2 「テーマを選び、見やすくカスタマイズする」 

ゼロから始める はてなブログ #2

さて、はてなブログの登録も終わったし記事を書くか!と意気込んでいるところ、すみません。

記事を書く前に最低限の準備をしておいた方が後々楽になるので、まずはその辺りの説明をしたいと思います。今回は「記事を書く前の事前準備」というテーマで説明していきます。

f:id:Florist87:20200702195559p:plain

前回の記事です。

 

なぜ、はてなブログ超初心者の人向けに記事を書こうと思い立ったかと言いますと、私も超初心者で、右も左も分からずサイトのデザインや記事を書き始めて、大変だったからです。特にサイトのデザインで一回失敗し、一からやり直すという経験をしたので、記事を書く前にくじけそうでした。

基本的なステップが説明されて、順を追ってやっていけば一応ブログを始めることができると便利だなと思い、今後ブログを始める方の参考になればと思います。

デザインに関しては本当にたくさんの方が、自身のサイトに方法や手順を載せておられるので、あまり考えずコピー&ペーストしていけば大丈夫です。記事がたまり、要領が分かってきたら、さらにサイトをカスタマイズしていけばいいと思います。

 

記事を書く前の下準備

サイトのテーマを選ぶ

 登録が終わって、ブログのページが出てきましたが、なんか地味!と感じたかもしれません。ですので、サイト全体の雰囲気を変えるため、テーマを選びましょう。

 左上のサイトの名前(最初は○○blogとなっていると思います)をクリックし、デザインを選びます。

f:id:Florist87:20200703095353j:plain

サイトの名前の部分をクリックします。これは今後よく使います。 

すると、色々なテーマが表示されますが、下にスクロールすると「ストアでテーマを探す」とあるので、そこをクリックするといろいろなテーマを見ることができます。

 

自分の好きなのテーマを選びたいと思いますが、ここは「Minimalism」をおすすめします。自分の好きなのを選ばせてよ!とおっしゃられるのもごもっともです。ですが、私自身がテーマ選びで失敗した(最初にカスタマイズされすぎているものを選ぶと、後で自分で手を加えた時おかしくなることがあります。)ので、シンプルで後々デザインをカスタマイズしやすい「Minimalism」をおすすめします。あと使ってる方も多いのでカスタマイズ方法を検索すればたくさんでてきます。下のリンクでMinimalismテーマのページへ移動してください。

 

 サイトに移動したら、「プレビューしてインストール」をクリックします。すると「適用するブログを選択」と出るので、自分のサイトをクリックします。すると、テーマが適用されるので、「このテーマをインストール」をクリックします。これで完成です。

f:id:Florist87:20200703095406j:plain

Minimalismのテーマページ

 文字の色や大きさをカスタマイズ

「Minimalism」はシンプルでいいテーマなのですが、少し文字が小さいのと文字の色が薄いなと感じます。見る人も、読むのに疲れると見てくれなくなりますし。

ということで、その部分に手を加えてみましょう。

文字サイズ

「Minimalism」のフォントは15pxで、かなり小さめなので、文字サイズを変えるだけで文章が読みやすくなります。

先ほどテーマを選ぶときにクリックした手順と同じく、左上のサイトの名前をクリックし、デザインを選びます。そして、スパナみたいなマークをクリックし、一番下のデザインcssをクリックします。

すると、真っ白なウィンドウが出てくると思いますが、そこに下のコードをコピーして貼り付けてください。

/*フォントサイズ*/
.entry-content p {font-size: 17px;}

 font-sizeの後ろの数字17を変更してフォントサイズを変えることができます。

 

行の高さ

行と行の間隔が広い、または狭いと感じる場合は、行の高さを変更できます。

先ほどと同じくデザインcssに、下のコードを貼り付けてください。

/*行の高さ*/
.entry-content {line-height:2.2em;}

 line-height の後ろの数字2.2を変更して行の高さを変えることができます。

 

文字の色

次は文字の色です。薄い色も見にくいのですが、白の背景に真っ黒な色も見にくいので、墨の色を選びました。

先ほどと同じくデザインcssに、下のコードを貼り付けてください。

/*本文文字色*/

.entry-content {

color: #212222;

}

 color: #の後ろの数字(上のコードでは212222)を変えることによって、色が変わります。

今後、色を変更したいと思ったときは、#の後ろの数字を変えると色が変わるということを覚えておくと便利です。

 

色を選ぶとき以下のサイトをよく使っています。黒色も何色もあるんだなと知りました。

 この色好きだなという時に、色を調べられて便利です。

 

変更を保存する 

変更した内容をしっかりと保存しておかなければ、元の状態に戻ってしまいます。デザインの上の部分に「変更を保存する」という青色のボタンをクリックします。

すると、先ほど行った変更が保存され、ブログのページに反映されます。

今後、デザインを変えた後は保存するのを忘れないようにしてください。

f:id:Florist87:20200703103403j:plain

変更を保存するをクリック

 

サイト名を変える

一番上に表記されているサイトの名前は「○○blog」という感じになっていると思います。これを、自分のサイト名に変更しましょう。

右上の「ダッシュボード」をクリックして、設定をクリックします。

サイト名やブログアイコン、ブログの説明の部分を自分の好きなように編集しましょう。

f:id:Florist87:20200703104713j:plain

 

スマホからも見れるように設定する

スマホからブログを見てくれる人が多くなっています。ですので、スマホ用にカスタマイズを充実させたいところですが、有料プランでないと十分にカスタマイズできません。

しかし、「Minimalism」のテーマはスマホにも自動で対応できるようになっています。

設定は簡単です。デザインからスマホマークをクリックし、詳細設定レスポンシブデザインにチェックを入れます。

これで、何も考えずにパソコンからでも、スマホからでも、それぞれにあったページが表示されるようになります。「変更を保存する」をお忘れなく!

f:id:Florist87:20200703105326j:plain

レスポンシブ設定

 

これで、基本的な設定は終わりました。

「Minimalism」でできる他のカスタマイズに関しては以下にまとめてあります。

 

他のサイトを見るとかっこよかったり、おしゃれなのでカスタマイズを続けたいと思うかもしれませんが、記事がないとだれも見に来ません

ということで、カスタマイズはいったん終わりにして、次はいよいよ「記事を書く」ことを始めたいと思います。

 

 

本気でブログを始める人におすすめしたい本

初心者向きです

 

 ブログを続けていくうえで、なるほどということが説明されていました。

 

 まだ早いかもですが、ブログをずっと続けていく気なら必読です。