ブログ関連

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

はてなブログからMinimalismの記事のアイキャッチ画像

この記事では、はてなブログのテーマストアで無料でインストールできるMinimalismを使って、自分の好みに合ったブログを作成していく方法を書いています。

 

Minimalismは、シンプルなデザインであり、ブログのカスタマイズ方法も記載されているので、初心者でも簡単にブログをカスタマイズすることができておすすめです!

 

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

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

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

 

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

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

ブログの添削を受けた時の記事もありますのでぜひご覧ください。

ブログ添削の記事のアイキャッチ画像
【メリットしかない!】ブログの記事添削で読者が読みやすいサイトにみなさんは、自分のブログについて誰かに評価してもらったことはありますか? 私はこれまで、自分で「こうした方がいいのでは?」と試行錯誤し...

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

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

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

なーさん
なーさん
すごいな~
ママ
ママ
無料ってすごいよね!

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

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

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

Minimalismの記事の説明①出典:はてなブログのテーマストア

 

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

Minimalismの記事の説明②出典:はてなブログのテーマストア

 

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

Minimalismの記事の説明③出典:はてなブログのテーマストア

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

Minimalism – テーマ ストア

 

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

Minimalismの記事の説明④出典:はてなブログのテーマストア

 

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

Minimalismの記事の説明⑤出典:はてなブログのテーマストア

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

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

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

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

 

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

Minimalismの記事の説明⑥出典:はてなブログのテーマストア

 

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

Minimalismの記事の説明⑦出典:はてなブログのテーマストア

スポンサーリンク

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

とりあえず、好きなテーマをブログに設定できたら、スマートフォンとパソコン、タブレットの画面表示を同じにすることをおすすめします。

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

Minimalismの記事の説明⑧出典:はてなブログのテーマストア

 

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

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

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

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

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

【これで解決!】スマホ表示をするとタイトル画像の左右が切れる問題【はてなブログ】 | ゆずもちろぐ。

まとめ

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

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

Canvaでヘッダー画像を作る記事のアイキャッチ画像
【簡単!】Canvaではてなブログのヘッダー画像を作って設定してみた!ブログをしているみなさんは、トップページのヘッダー画像はもう作りましたか? この記事では、Canvaを使ったヘッダー画像の作り方を...
こちらの記事もおすすめ!
グーグルクロームのあとで読む機能の記事のアイキャッチ画像 ブログ関連

【時間がない人はこれを使え!】Google Chromeの「後で読む」機能がとても便利だった!

2019年1月18日
末っ子の気ままにのんびり
ブログを始めてから情報を集めるために、色々な人のブログを読んだり、ネットのニュースをみたりすることが増えました。 ところが読んでいると …