【はてなブログ無料版】初めてカスタマイズしたことをまとめておきます。子育て雑記ホームブログはてなブログカスタマイズ【はてなブログ無料版】初めてカスタマイズしたことをまとめておきます。2019-09-21こんにちは。マリ(@damarino_oheya)です!このブログははてなブログの無料版です。無料版は有料版と違ってさまざまな縛りがあり、ブログデザイン、特にスマホページのカスタマイズはできません。マリ実は無料版でも少しはブログデザインのカスタマイズができるんですよね♩そのことを知ってからは夜中にカスタマイズ系のブログを読み漁る日々でした。この記事では、はてなブログの無料版でカスタマイズしたことをまとめています。無料版でもカスタマイズする方法は、こちらの記事で知りました。www.colmin.xyzスマホページのトップページをいじることはできないけど、記事ページのカスタマイズはできるとのことで、参考になりました。マリもっと簡単なのはレスポンシブデザインのテーマを選ぶことです。元々の目次デザインがあっさりしすぎていたので、背景色を変えたりしました。参考にしたのはこちら文字の大きさ・背景色・小見出し表示なしなどはこちらの記事を参考に。初心者でも「フンフン」と、分かりやすいです。www.yukihy.com真ん中に表示する方法はこちらから。聞きなれないmaeginとpaddingのことが分かりやすく丁寧に説明されています。saruwakakun.com見出しをカスタマイズはてなテーマによっては、そのテーマの見出しが設定されているので、それをキャンセルするCSSを入れないといけないかもしれません。テーマの見出しCSSをキャンセルする方法はこちらのブログで紹介されているものをそのままコピペしました。見出しデザインを参考にしたのはこちらたくさんの見出しとそのコードが紹介されています!saruwakakun.comアイコンフォントを使った見出しにするには、head内にFontAwesomeのコードを入力しておきます。文字のサイズを少し大きくはてなブログのスマホページの文字サイズは少し小さめ設定です。大きめにしたかったのでこちらの記事を参考にCSSを入力しました。www.tarappism.com行間をリセット文字サイズと同じく、スマホページの行間はちょっと読みにくいかなーという印象。それをリセットするといいかんじの行間になりました。行間のことで参考にしたのはこちらの記事です。yumasty.hatenablog.com行間って大事ですね。引用をカスタマイズ文字サイズを少し小さく文字を斜体ではなく普通の文字へ引用のデザイン変更を参考にしたのはこちらsaruwakakun.comサルワカさんは見出しのデザインでも参考にさせていただいていて、ブログデザインのことについて素人にも分かるように書かれているので読んでいて楽しいです。アイコンを作ってみたアイコンを自作しています。インテリアのアイコンでしたが、ブロガーらしく人間か動物の顔にしたくて、動物を描くのは難しいので人にしました。絵はスヌーピーのチャーリーブラウンを描くのだけは得意なので、そこからもじってもじって出来ました。前に夏仕様の絵にしていましたが、寒くなってきたので冬仕様に変更しました。*現在のアイコンはipadで無料アプリ&100均のタッチペンで描いたものです。Sketch」でプロフィール画像を作る方法|ブログやSNSのアイコンに使っています♩これからやってみたいカスタマイズ今回は初心者の私でもできそうな部分のカスタマイズでしたが、実際にカスタマイズすることで他にも気になるカスタマイズが出てきました。【はてなブログ無料版】2度目のカスタマイズ。初心者がCSSに慣れてきた時にカスタマイズしたこと。フォントを使ってみたいフォントはブログのイメージを変えますね。使ってみたいgoogleフォントもたくさんあるし、見出しに使用したアイコンフォントも種類が豊富で面白いので使ってみたいです。Awesomeレスポンシブデザインにしたいこの記事で説明しているカスタマイズは、記事ページとCSSの両方に同じコードを記入し、スマホでもパソコンと同じデザインで見えるようにカスタマイズしたものです。そんなことをしなくても、レスポンシブデザイン対応のテンプレートを選んでレスポンスするボタン的なものをチェックするとパソコンと同じものがスマホページに反映されます。パソコンページのカスタマイズが充実したらレスポンシブしようと思っています。カスタマイズは楽しいけど時間があっという間に過ぎていく今回は、5つのカスタマイズとアイコン変更をしただけ。それだけなのに、カスタマイズのことを知り、勉強して、勉強したことをブログに反映させ、この記事を書くに至るまで約1ヶ月かかりました。(おかげでこの1ヶ月ブログのデザインが定まっていなくて、モヤモヤしていました)新しい言語を覚えるような感覚で、日本語に例えると私は3歳児・・・いや生後10ヶ月くらいですね。わが家の3歳児のように、遠回りしながら言葉を選んだり、自分が知っている言葉を総動員で使って一生懸命に大人に伝えてくるのと同じ感覚です。(息子の気持ちが少し分かりました!)CSSとかHTMLとか、難しいけど面白くてハマりそう。自分のブログデザインをいじれるくらいにはCSSのことを理解してみたいなと思っています。▼はてなブログの無料版に慣れてきたらはてなブログpro(有料版)に移行するブロガーさんが多いです。広告無しでカスタマイズこのような記事もあります【はてなブログ無料版】2度目のカスタマイズ。初心者がCSSに慣れてきた時にカスタマイズしたこと。はてなブログ3年目の当ブログで行ってきたカスタマイズまとめはてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。コメントをキャンセルメールアドレスが公開されることはありません。育児中の夫婦の休日の過ごし方。平日とは少しだけ違う変化。雑記Aboutマリ身軽に暮らす日々のことを書いています。育児中だからこそシンプルな暮らしで楽するヒントを綴ります。長所を知って好きな自分を知ろう!私の長所100個一覧にしてみた。