さいえんす ラボ

子育て、仕事、ブログ、健康に関することを実体験を元に書いて行きます。

はてなブログを初めて1週間で実施した初心者向けカスタマイズ5つ

f:id:life_of_dreams:20170423212222j:plain

ブログを起こしてから1週間が立ちました。
記事は8本投稿し、ありがたいことに4日目には初アクセスをいただきました!

先人たちのブログを拝見するに、1ヶ月はアクセス0だった、みたいな記事をよく拝見したので4日目から読者の方に見ていただいたのは嬉しいことでした。
(まぁその後あまりアクセスが伸びませんが、笑)

この辺がはてなブログがSEOに強いということですかね。

さて、今日はこの1週間で投稿しながらも実施してきたカスタマイズ項目を紹介したいと思います。
見事に初心者向けです。


サイドバーを変更してカテゴリーや最新記事を載せる様にする


最初に行ったのはサイドバーのカスタマイズです。

はてなブログのダッシュボード→デザイン→カスタマイズ→サイドバー

f:id:life_of_dreams:20170423214106p:plain:w200

を辿るとサイドバーを編集することができます。
色々な方のブログをみていてデフォルト設定のままじゃ恥ずかしいと思いまして。
デフォルトの項目を削除したり、表題を変更したり、なかったものを追加したりできます。

たけぽんがやったのは、関連記事・注目記事の追加と検索窓の消去でした。


見出しのデザインを変更する

デフォルトの見出しには、色が付いていませんでした。
だから、記事を見出しをつけて記事を書いても読みづらい、、、

そこで、早速見出しの変更です。

見出しのデザインを変更するには、記事ごとにhtmlで変更する方法とCSSで設定を変更する2種類の方法があります。
が、たけぽんは結局CSSに落ち着きました。

1回設定するだけで全部適用してくれるので、楽で良いですねぇ〜


CSSで参考にしたブログ
saruwakakun.com

ちなみに、僕はCSSの挿入場所にも迷ってしまったので念のため。
ここに貼り付けます。

はてなブログのダッシュボード→デザイン→カスタマイズ→{}デザインCSS

f:id:life_of_dreams:20170423223314p:plain:w200


引用のデザインを編集する

ブログで使用することの多い引用ですが、初期設定の引用はただ四角く囲まれるだだけで、それとはナカナカ判りづらかったのでカスタマイズすることにしました。
ちなみにこれもCSSです。

/* 引用のデザイン1 */
.entry-content blockquote {
padding: 20px 55px;
background: rgba(245,245,245,0.8);
color: #222;
position: relative;
border: solid 1px #fff;
margin: 0.8em 0;
}
/* 引用のデザイン2 */
.entry-content blockquote:before {
color: rgba(200, 200, 200, 1);
content: "“";
font-family: serif;
font-size: 600%;
left: 0;
line-height: 1em;
position: absolute;
top: 0;
}
/* 引用のデザイン3 */
.entry-content blockquote:after {
content: "”";
font-family: serif;
position: absolute;
bottom: 0;
right: 0;
font-size: 600%;
color: rgba(200,200,200,1);
line-height: 0;
}

これを貼り付けることで引用であることが明白になりました。
どんどん読みやすくなりますねぇ〜。


ブログの記述方式をはてな記法にする

ブログの記述は、ゆくゆくはキチンとしたエディタを使用することを考えていますが、いまのところWebで書いています。
最初は「みたまま編集」を使っていたのですが、知らない間にh3が量産されたり無駄な箇条書きが増えたりしていて、htmlに移動して編集するのも面倒だったので、はてな記法をしようしてます。

f:id:life_of_dreams:20170423225136p:plain:w200

エディタで編集するのが最も良いと思っていますが、今の所「見たまま編集」よりも記事を書くスピードはUPしました。


簡単なグローバルナビゲーションをつくる

ヘッダーの下についているやつです。
サイドバーにもカテゴリーはつけたのですが、やはりヘッダーの下につけるのではちょっとカッコ良さが違うと思います。

ブログサイトでは、トップページや検索されてきた読者が迷わずに、またはくまなくサイトの中を見れる様な動線設計が大事とされています。

↓参考にしたのはこのサイト
maroom.hateblo.jp

今はまだ初心者なのでこの簡易版を使っていますが、後々はもう少し立派なものを作りたいと思います。


最後に細々したTips

  • テーブルを作成する

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

  • 数式を入力する

nkdkccmbr.hateblo.jp

  • web版色見本

www.colordic.org


まとめ

いかがだったでしょうか。
ブログを既に始められている方だったら当たり前のことだとは思いますが、ナカナカまとまったサイトはないので備忘録としてまとめてみました。

今後も色々とカスタマイズする予定なのでまた追加記事を書きたいと思います。