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

 

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

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

と、思っていましたが。

無料版でも記事ページのみならカスタマイズができるんですねー。

 

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

ひとまず忘れないためにもこのブログでカスタマイズしたことをまとめておきます。

 

f:id:damarin:20171029004502j:plain

 

 

 

無料版でカスタマイズしてみました

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

www.colmin.xyz

 

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

 

ただしスマホページだけをカスタマイズするということはできなくて、パソコンページの記事ページにも反映されてしまいます。

そして記事ページと同じタグをCSSにも書いておかないとパソコンページのトップページと記事ページが別物になってしまいます。

私はそのことがよく分からず苦戦しました。

 

 

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

現在のスマホ版のもくじはこんなかんじです

f:id:damarin:20171029004150j:plain

文字を小さくして

目次の背景に色をつけて

小見出しは表示されないようにして

もくじ全体がなぜか右寄りになっていたので真ん中に表示されるようにしました。

 

▼参考にしたのはこちらのサイト

文字の大きさ・背景色・小見出し表示なしなど

www.yukihy.com

 

真ん中に表示する方法

saruwakakun.com

 

 

 

見出しを自分好みにカスタマイズ

無料版の私はテンプレートを使っているのですが、使っているテンプレートによっては元々の見出しが設定されておりそれをキャンセルするコードを入れないといけないかもしれません。

 

▼キャンセルはこちらのサイトで紹介されているものをそのままコピペ。

コピペでどうぞ。はてなブログ用の見出しCSSカスタマイズをとりあえず25個ほど – つばさのーと

  

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

f:id:damarin:20171029004214j:plain

大見出し(h3)と中見出し(h4)は文字サイズをそれぞれ少し大きく

中見出しと小見出し(h5)は文字の前にアイコンフォントを使用

小見出しのアイコンフォントの色のみを変更しました。

 

 

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

saruwakakun.com

アイコンフォントを使った見出しにしたかったのでhead内にコードを入力しておきました。

 

 

 

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

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

▼もう少し大きめにしたかったのでこちらのサイトを参考にコードを入力。

www.tarappism.com

 

 

 

行間をリセットする

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

▼行間のことで参考にしたのはこちらのサイト。

yumasty.hatenablog.com

行間って大事ですねー。

 

 

 

引用を見やすいものにカスタマイズ

現在の引用部分はこんなかんじ

f:id:damarin:20171029004241j:plain

文字サイズを少し小さく

文字を斜体ではなく普通の文字へ

 

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

saruwakakun.com

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

 

 

 

アイコンを作ってみた

アイコンを変更しました。

f:id:damarin:20171029004253j:plain

アイコンを人か動物の顔にしたくて、動物を描くのは難しいので人にしました。

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

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

 

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

sketch.pixiv.net

 

 

  

これからやってみたいこと

フォントを使ってみたい

かわいいフォントやシンプルフォントなど、フォントはブログのイメージを変えますね。使ってみたいフォントもたくさんあります。

見出しに使用したアイコンフォントも種類が豊富で面白いです。

でも見やすさを考えると使い所が難しいです。

 

 

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

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

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

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

 

 

 

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

たった5つのカスタマイズ。

それなのにカスタマイズのことを知り、色々調べてブログに反映させ、この記事を書くに至るまで約1ヶ月かかりました。(おかげでこの1ヶ月ブログのデザインが定まっていなくて、モヤモヤしていました)

 

新しい言語を覚えるような感覚で、日本語に例えると私は3歳児くらいだと思います。

上手く伝えきれないことがあり、遠回りしながら言葉を選んだり自分が知っている言葉を見つけたりして一生懸命伝えてくる3歳児の息子と同じ。

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

自分のブログデザインをいじれるくらいには理解してみたいです。