rko-book.com ~おススメのミステリー小説を紹介するブログ~

2018年11月よりスタートした、これまで読んだおススメ小説を紹介するブログ。ほぼネタバレなしで紹介します。

【まとめ】はてなブログ初心者の私が最初の1週間で行ったカスタマイズ10選


f:id:rko-3rdgeneration:20190106163022j:plain

 

ブログを開始して2週間経ちました♬

こんにちは、RKOです。おかげさまでブログをはじめて2週間が経ちました。これもひとえに皆様のご支援の賜物です。ありがとうございます。<(_ _)>

本日は、はてなブログを始めて右も左もわからない中、多くの先人の記事を参考にしながら、ある程度のブログカスタマイズを行いましたのでこちらをまとめさせていただきます。

恥ずかしながらこの辺りの知識がないもので、多くのサイトからコードを引用させていただきました。つまり、私のようなプログラミングの知識がない方でもはてなブログであれば気軽に始められるということです。まさに「巨人の肩の上に立つ」ですね。これからはてなブログを始められる方、始めたばかりの方の一助になれば幸いです。

それでは、いきましょう♪

 

0.カスタマイズの方法

 基本的には、<デザイン>⇒<カスタマイズ>(中央アイコン)から、ヘッダ、フッダ、デザインCSS等の覧にコードをコピペしていく事で反映していきます。これから紹介する10項目の内、1のブログテーマインストール以外の2~10は全てこちらのカスタマイズ画面から変更が可能です。

f:id:rko-3rdgeneration:20181206222537p:plain

デザイン⇒カスタマイズ

 

1.ブログテーマのインストール♬

まず、壁にぶつかったのはスマホのレスポンシブデザイン。通常、PCはPCで画面設定、スマホはスマホで画面設定とデザインをそれぞれ設定する必要があります。この設定を行うとPCで設定するだけでスマホも自動でデザインバランスを調整してくれる(はず)だったのです。

でも、スマホでみると( ゚Д゚)ってなりました。

そこで、はてなブログのテーマストアで、「テーマ」をインストールしました。私の場合、スマホでも調整してくれるテーマである「Innocent」をインストール。これで一々変更する必要はなくなりました。

※ちなみに、インストール時にCSSなどデザインを少しいじっている方は一度消えてしまいます。注意しましょう。 

 

↓作者様、ありがとうございます。

moonnote.hateblo.jp

 

2.ナビゲーションバーの設定♬

ちなみにこの「Innocent」、ナビゲーションバーもデフォルトで入っております。これが非常に助かる!こういうやつです。

 

f:id:rko-3rdgeneration:20181206212752p:plain

ナビゲーションバー

 

 これもこちらの作者様サイトを参考にさせていただきました。

moonnote.hateblo.jp

 

なお、色合いに関してはこちらのサイトから好きなのを選びました。私はシックなもので統一したかったので全体的に深い色合いを意識しています。

www.colordic.org

 

3.ヘッダー画像の作成♬

ヘッダー画像はブログの顔ですよね。こちらもシンプルにしようという事で以下の内容を自分で作成しました。

f:id:rko-3rdgeneration:20181206193412j:plain

ヘッダー画像

こちらを作成したのは、無料で編集できるWebサービス、PIXLR EDITOR。これ、非常に使いやすくて便利でした。ちなみに横1000Pxで縦200Pxです。ココ重要。

 

やり方は以下のサイト様が素晴らしく、参考にさせていただきました。スマホだと枠が合わないという問題も解決方法を教えていただきました。

www.imaichido.com

 

4.ブログ上部に人気記事を貼付け♬

こちらも「Innocent」だからなんですが、上部に人気記事を貼付けることができます。

以下のようなイメージです。

f:id:rko-3rdgeneration:20181206214040p:plain

人気記事を上部に貼付け

これにより、サイトを見た方が人気記事をみやすくなると考えました。と、偉そうに言っておりますがこちらも以下の作者様サイトを参考に。

moonnote.hateblo.jp

 

5.見出しにも気を遣う♬

次は文章です。見出しもやはりブログのデザインやテーマに関係しますので、自分にあったものを選びました。こちらのサイトはとてもわかりやすく紹介されており、すぐに導入が可能です。

 

saruwakakun.com

 

6.蛍光マーカーを「見たままモード」で簡単に♬

私はブログ初心者ですので最初は赤文字とか青文字を多用していたんですが、少し見づらいかなと思い、蛍光マーカーを導入。

 

arishin.hatenablog.com

 

7.会話形式の吹き出しを追加♬

こちらは好みにもよりますが、吹き出しも追加。

こういうやつです。

あった方が特色が出るかなという安易な理由で追加。(始めたばかりですから笑)

以下のサイト様がとってもわかりやすく解説してくれたおかげですぐに導入できました。ありがとうございます。

 

www.notitle-weblog.com

 

8.「引用」をオシャレ形式に♬

引用に関しては、小説レビューブログですので必要だなと思い導入。デフォルトで使えるものはあるのですがオシャレな方がいいかなと思いました。

こういうやつです。

超有名ブログ、サルワカさんの記事から使わせていただきました。

 

saruwakakun.com

 

9.リンクを強調できるように変更♬

これも開始1週間でやる必要があるかはわかりませんが、導入してみました。

 

とてもわかりやすい記事です。こちらを参考にさせていただきました。

www.notitle-weblog.com

 

10.読者になるボタンを強調♬

 ブログを始めたら、やっぱり皆さんに読者になってほしいと思うでしょう。私もそうでしたので、「読者になる」という小さいボタンを少し大きくしてみました。

 

最後に

まだまだ私も2週間ですのでトライアンドエラーでやっておりますが、先人の記事を参考にすればコピペでできますので、簡単に変更することができました。皆さま本当にありがとうございました。もしブログの作成自体にご興味があれば私でもできましたので、「はてなブログ無料版」から始めるとスタートダッシュが切れると思いますよ。