末っ子の気ままにのんびり

気ままにのんびり、みなさんに役立つ情報を書いていきたいと思います。

【スポンサーリンク】

はてなブログのデザインをMinimalismを使ってカスタマイズ!

【スポンサーリンク】

ブログをカスタマイズ!!

私は、はてなブログProを使用しています。いろんな人のブログをみていると、すてきな画像がブログのタイトル部分に貼ってあったり、見出しがかわいい色に変えてあったりとオリジナルなブログでいいなーと思っていました。

そこで、私もはてなブログを好きなようにカスタマイズしたいと思うようになりました。

はじめまして。私、なーさんといいます。ブログのカスタマイズによって生まれました!

なーさんはうちの娘です。そして私がかあさんです。

といった感じで、さりげなく新キャラを作ることにも成功しました(笑)

 ちなみにパソコンは少しタイピングができる程度で、HTMLやCSSといった言葉は知らず、ブログを始めてから知りました。

今の時代はありがたいことにネット上に情報があふれています。「はてなブログ カスタマイズ」って検索したら、いろんなサイトが出てきますし、どれも丁寧に説明してくれています。

そんなたくさんのサイトの中から、私がこのブログを作るにあたって参考にしたサイトを一部ご紹介したいと思います。

はてなブログのテーマストアでインストールしたMinimalismが無料なのに使いやすい!

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20190108/20190108221631.jpg

 

ブログのカスタマイズって素人からすると、「難しそう」とか「有料なんじゃない?」とかって思いますよね。

 でも、テーマストアをみると無料でかわいいデザインのものがたくさんあります。それをインストールするだけで、ブログ全体のカスタマイズができてしまいます!

本当にありがたい!!

 私は、このブログに設定しているテーマがテーマストアで無料でインストールできることを最近になって知りました(笑)たぶん、意外と私みたいに知らない人がいるのではないでしょうか?(知ってたらごめんなさい)

 

テーマストアでテーマをインストールする方法

デザインをクリックし、テーマ設定の一番下まで移動します。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20190108/20190108152258.png

 

テーマストアでテーマを探すをクリックします。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20190108/20190108210018.jpg

 

③ストアで好きなテーマ(このブログの場合は1位のMinimalism)を選んでクリックします。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20190108/20190108210733.jpg

 

Minimalismのテーマについてはこちらです。

blog.hatena.ne.jp

 

④すると右端にプレビューしてインストールというところがあるのでクリックし、適用するブログを選択というのが出るので、カスタマイズしたいブログのタイトルを選択します。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20190108/20190108210731.jpg

 

⑤画面をみていいなーと思ったら、左上にあるこのテーマをインストールをクリックすると、適用されます。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20190108/20190108210727.jpg

たったこれだけです!!すごく簡単ですよね。

 

ブログを好きなデザインにカスタマイズする方法

これだけでも十分おしゃれですが、自分の好きな色に変えたい、見出しをカスタマイズしたいなどの欲望が出てくると思います(笑)

そんな時にさらに親切なのが、このテーマを作ってくれた方が細かく使い方を説明してくれているということです!

例えばMinimalismをインストールするページをみると、使い方・注意事項という項目とURLが貼ってあります。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20190108/20190108211403.jpg

そこをクリックすると、こんな感じでカスタマイズ方法が細かく記載されているんです。そのため、初心者でも簡単にカスタマイズすることができるんですね!とても便利。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20190108/20190108211400.jpg

 

スマートフォンとパソコン、タブレットの表示を同じにするレスポンシブデザイン

とりあえず、好きなテーマをブログに設定できたら、スマートフォンとパソコン、タブレットの画面表示を同じにすることをおすすめします。この画面表示を同じにするには、はてなブログの管理画面のデザイン→スマートフォン→詳細設定のところにレスポンシブデザインというチェック項目があるのでそこにチェックを入れます。すると、表示画面が同じになります。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bloggk/20190108/20190108210024.jpg

この設定をすると、デザインをカスタマイズするときにパソコン画面の設定をするだけですべて同じデザインになるので楽です。ちなみに、私のもう一つのブログはパソコンとスマートフォンを別々に設定していたので、とても大変でした。

ただ、私が苦労したのはここからでした。Canvaというサイトで、はてなブログが推奨しているヘッダー画像サイズのW1000px×H200pxでヘッダー画像を作ったのですが、貼り付けるとスマートフォンからみた時になぜか画像がはみ出るんです。

絶望的。なんで!調べるしかないか。。。

てな感じで再び調べるとやっとみつかりました。いろいろなサイトを何時間も探しながらやったのに、全然画面が変わらなかったんです。たぶんどこか私のやり方が違ったんだと思うんですけど、違う場所がわからなくて。

そんな時に見つけたのがこちらのサイトです。本当に助かりました。ありがとうございます!

yuzumochi.com

 

まとめ

はてなブログには、無料でいろんなデザインテーマがあります。インストールするとすぐにブログに適用されるので、あっという間に好きなデザインにカスタマイズすることができてしまいます。

もし、まだブログのデザインを設定していないよーっていう方はおすすめなので、ぜひやってみてくださいね!