この記事には広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売上の一部が還元されることがあります。
こんにちは。マリ（＠damarino_oheya）です！
このブログははてなブログの無料版です。
無料版は有料版と違ってさまざまな縛りがあり、ブログデザイン、特にスマホページのカスタマイズはできません。
と、思っていました。
マリ
そのことを知ってからは夜中にカスタマイズ系のブログを読み漁る日々でした。
この記事では、はてなブログの無料版でカスタマイズしたことをまとめています。
無料版でカスタマイズする方法
無料版でもカスタマイズする方法は、こちらの記事で知りました。
スマホページのトップページをいじることはできないけど、記事ページのカスタマイズはできるとのことで、参考になりました。
マリ
▼追記＊現在ははてなブログpro（有料版）
に移行しています
はてなブログproは1ヶ月600円の①広告が消せる②ブログデザインのカスタマイズが自由にできる③広告収入でお小遣い化できる！はてなブログの有料版です♩
- 1ヶ月600円からのブログ運営
- 広告無しでカスタマイズ
▼追記の追記＊2019年2月にワードプレスに移転しました
SANGOのスマホ版デザインでカスタマイズしたこと
カスタマイズしたところ
今回の初めてのカスタマイズ、まずは6つの場所をカスタマイズしてみました！
- 目次のデザイン
- 見出しのデザイン
- 文字サイズ
- 行間をリセット
- 引用のデザイン
- アイコンを作った
もくじのデザインを変える
- 文字を小さく
- 目次の背景に色をつける
- 小見出しは表示されないように
- 真ん中に表示
元々の目次デザインがあっさりしすぎていたので、背景色を変えたりしました。
参考にしたのはこちら
文字の大きさ・背景色・小見出し表示なしなどはこちらの記事を参考に。初心者でも「フンフン」と、分かりやすいです。
真ん中に表示する方法はこちらから。聞きなれないmaeginとpaddingのことが分かりやすく丁寧に説明されています。
見出しをカスタマイズ
はてなテーマによっては、そのテーマの見出しが設定されているので、それをキャンセルするCSSを入れないといけないかもしれません。
テーマの見出しCSSをキャンセルする方法はこちらのブログで紹介されているものをそのままコピペしました。
現在の見出しはこんなかんじです
- 大見出し（h3）と中見出し（h4）は文字サイズを少し大きく
- 中見出し（h4）と小見出し（h5）は文字の前にアイコンフォントを使用
- 小見出し（h5）のアイコンフォントの色を変更
見出しデザインを参考にしたのはこちら
たくさんの見出しとそのコードが紹介されています！
アイコンフォントを使った見出しにするには、head内にFontAwesomeのコードを入力しておきます。
文字のサイズを少し大きく
はてなブログのスマホページの文字サイズは少し小さめ設定です。
もう少し大きめにしたかったのでこちらの記事を参考にCSSを入力しました。
行間をリセット
文字サイズと同じく、スマホページの行間はちょっと読みにくいかなーという印象。
それをリセットするといいかんじの行間になりました。
行間のことで参考にしたのはこちらの記事です。
行間って大事ですね。
引用をカスタマイズ
- 文字サイズを少し小さく
- 文字を斜体ではなく普通の文字へ
引用のデザイン変更を参考にしたのはこちら
サルワカさんは見出しのデザインでも参考にさせていただいていて、ブログデザインのことについて素人にも分かるように書かれているので読んでいて楽しいです。
アイコンを作ってみた
アイコンを自作しています。
インテリアのアイコンでしたが、ブロガーらしく人間か動物の顔にしたくて、動物を描くのは難しいので人にしました。
絵はスヌーピーのチャーリーブラウンを描くのだけは得意なので、そこからもじってもじって出来ました。
少し前に夏仕様の絵にしていましたが、寒くなってきたので冬仕様に変更しました。
＊現在のアイコンはipadで無料アプリ＆100均のタッチペンで描いたものです。
無料アプリ「pixiv Sketch」でプロフィール画像を作る方法｜ブログやSNSのアイコンに使っています♩
これからやってみたいカスタマイズ
今回は初心者の私でもできそうな部分のカスタマイズでしたが、実際にカスタマイズすることで他にも気になるカスタマイズが出てきました。
▼2回目のカスタマイズはこちら♩
【はてなブログ無料版】2度目のカスタマイズ。初心者がCSSに慣れてきた時にカスタマイズしたこと。
フォントを使ってみたい
フォントはブログのイメージを変えますね。使ってみたいgoogleフォントもたくさんあるし、見出しに使用したアイコンフォントも種類が豊富で面白いので使ってみたいです。
レスポンシブデザインにしたい
この記事で説明しているカスタマイズは、記事ページとCSSの両方に同じコードを記入し、スマホでもパソコンと同じデザインで見えるようにカスタマイズしたものです。
正直、ちょっと面倒。
そんなことをしなくても、レスポンシブデザイン対応のテンプレートを選んでレスポンスするボタン的なものをチェックするとパソコンと同じものがスマホページに反映されます。
パソコンページのカスタマイズが充実したらレスポンシブしようと思っています。
カスタマイズは楽しいけど時間があっという間に過ぎていく
今回は、5つのカスタマイズとアイコン変更をしただけ。
それだけなのに、カスタマイズのことを知り、勉強して、勉強したことをブログに反映させ、この記事を書くに至るまで約1ヶ月かかりました。
（おかげでこの1ヶ月ブログのデザインが定まっていなくて、モヤモヤしていました）
新しい言語を覚えるような感覚で、日本語に例えると私は3歳児・・・いや生後10ヶ月くらいですね。
わが家の3歳児のように、遠回りしながら言葉を選んだり、自分が知っている言葉を総動員で使って一生懸命に大人に伝えてくるのと同じ感覚です。（息子の気持ちが少し分かりました！）
CSSとかHTMLとか、難しいけど面白くてハマりそう。
自分のブログデザインをいじれるくらいにはCSSのことを理解してみたいなと思っています。
▼はてなブログの無料版に慣れてきたらはてなブログpro（有料版）に移行するブロガーさんが多いです。
はてなブログproは1ヶ月600円の①広告が消せる②ブログデザインのカスタマイズが自由にできる③広告収入でお小遣い化できる！はてなブログの有料版です♩
- 1ヶ月600円からのブログ運営
- 広告無しでカスタマイズ
このような記事もあります
【はてなブログ無料版】2度目のカスタマイズ。初心者がCSSに慣れてきた時にカスタマイズしたこと。
はてなブログ3年目の当ブログで行ってきたカスタマイズまとめ
はてなブログで独自ドメインにして4ヶ月のPV数を公開！PVアップのためにしてきたこと。
