Migaru-Days

身軽に暮らす、考える。

【はてなブログ無料版】初めてカスタマイズしたことをまとめておきます。

スポンサーリンク

 

このブログははてなブログの無料版です。

 

無料版は有料版と違ってさまざまな縛りがあり、ブログデザイン、特にスマホページのカスタマイズはできません。

と、思っていましたが。

 

実は無料版でもカスタマイズができるんです!

 

そのことを知ってからは夜中にカスタマイズ系のブログを読み漁る日々でした。

 

この記事では、はてなブログの無料版でカスタマイズしたことをまとめています。

(追記*現在ははてなブログpro(有料版)に移行しています)

 

 

 

無料版でカスタマイズする方法

こちらの記事で、はてなブログの無料版でもカスタマイズできることを知りました。 

www.colmin.xyz

 

スマホページのトップページをいじることはできないけど、記事ページのカスタマイズができるとのことです。

 

(追記*レスポンシブデザインのテーマを選ぶことで割と簡単にカスタマイズできます)

 

 

カスタマイズしたこと

まずは6つのカスタマイズをしてみました!

 

もくじのデザインを変える

f:id:damarin:20171029004150j:plain

  • 文字を小さく
  • 目次の背景に色をつける
  • 小見出しは表示されないように
  • 真ん中に表示

元々の目次デザインがあっさりしすぎていたので、背景色を変えたりしました。

 

 

参考にしたのはこちら

文字の大きさ・背景色・小見出し表示なしなどはこちらの記事を参考に。初心者でも「フンフン」と、分かりやすいです。

www.yukihy.com

 

真ん中に表示する方法はこちらから。聞きなれないmaeginとpaddingのことが分かりやすく丁寧に説明されています。

saruwakakun.com

 

 

 

見出しをカスタマイズ

はてなテーマによっては、そのテーマの見出しが設定されているので、それをキャンセルするCSSを入れないといけないかもしれません。

 

テーマの見出しCSSをキャンセルする方法はこちらのブログで紹介されているものをそのままコピペしました。

 

現在の見出しはこんなかんじです

f:id:damarin:20171029004214j:plain

  • 大見出し(h3)と中見出し(h4)は文字サイズを少し大きく
  • 中見出し(h4)と小見出し(h5)は文字の前にアイコンフォントを使用
  • 小見出し(h5)のアイコンフォントの色を変更

  

見出しデザインを参考にしたのはこちら

たくさんの見出しとそのコードが紹介されています!

saruwakakun.com

アイコンフォントを使った見出しにするには、head内にFontAwesomeのコードを入力しておきます。

 

 

 

文字のサイズを少し大きく

はてなブログのスマホページの文字サイズは少し小さめ設定です。

 

もう少し大きめにしたかったのでこちらの記事を参考にCSSを入力しました。

www.tarappism.com

 

 

 

行間をリセット

文字サイズと同じく、スマホページの行間はちょっと読みにくいかなーという印象。それをリセットするといいかんじの行間になりました。

 

行間のことで参考にしたのはこちらの記事です。

yumasty.hatenablog.com

行間って大事ですね。

 

 

 

引用をカスタマイズ

f:id:damarin:20171029004241j:plain

  • 文字サイズを少し小さく
  • 文字を斜体ではなく普通の文字へ

 

引用のデザイン変更を参考にしたのはこちら

saruwakakun.com

サルワカさんは見出しのデザインでも参考にさせていただいていて、ブログデザインのことについて素人にも分かるように書かれているので読んでいて楽しいです。

 

 

 

アイコンを作ってみた

アイコンを自作しています。

 

インテリアのアイコンでしたが、ブロガーらしく人間か動物の顔にしたくて、動物を描くのは難しいので人にしました。

絵はスヌーピーのチャーリーブラウンを描くのだけは得意なので、そこからもじってもじって出来ました。

少し前に夏仕様の絵にしていましたが、寒くなってきたので冬仕様に変更しました。

 

▼スマホアプリで描きました。

sketch.pixiv.net

 

   

やってみたいこと

フォントを使ってみたい

フォントはブログのイメージを変えますね。使ってみたいgoogleフォントもたくさんあるし、見出しに使用したアイコンフォントも種類が豊富で面白いので使ってみたいです。

 

 

レスポンシブデザインにしたい

この記事で説明しているカスタマイズは、記事ページとCSSの両方に同じコードを記入し、スマホページでもパソコンページと同じデザインで見えるようにカスタマイズしたものです。

 

正直、ちょっと面倒です。

 

そんなことをしなくても、レスポンシブデザイン対応のテンプレートを選んでレスポンスするボタン的なものをチェックするとパソコンと同じものがスマホページに反映されます。

 

パソコンページのカスタマイズが充実したらレスポンシブしようと思っています。

 

(追記*現在はレスポンシブデザインのテーマを使っています) 

www.oheya-migaru.com

 

 

カスタマイズは楽しいけど時間があっという間に過ぎていく

f:id:damarin:20180611101023j:plain

たった5つのカスタマイズとアイコン変更をしただけです。

 

それだけのことなのに、カスタマイズのことを知り、勉強して、勉強したことをブログに反映させ、この記事を書くに至るまで約1ヶ月かかりました。

(おかげでこの1ヶ月ブログのデザインが定まっていなくて、モヤモヤしていました)

 

新しい言語を覚えるような感覚で、日本語に例えると私は3歳児・・・いや10ヶ月くらいですね。

わが家の3歳児のように、遠回りしながら言葉を選んだり、自分が知っている言葉を総動員で使って一生懸命に大人に伝えてくるのと同じ感覚です。(息子の気持ちが少し分かりました!)

 

CSSとかHTMLとか、難しいけど面白いことを知りました。

自分のブログデザインをいじれるくらいにはCSSのことを理解してみたいなと思いました。

 

 

キーワードで探す