皆さまこんにちは！はてなブログを始めてまだ1ヶ月も経たない初心者です。
BLOG初心者のかたは、BLOGのデザインを変更するには、まずどこから始めて行くのか分かりませんよね。私もそうでしたので、役立てるならと思い、まとめてみました。(あと私もどのような設定をしたのかきちんと覚えておくために)
(↑はてなブログを登録したらやるべき設定については上記にまとめています。)
私はパソコンが壊れているので、基本デザイン変更は全てスマホから行なっております。またこのBLOGは、はてなブログ無料版を使用しているので、はてなブログProでなくても出来るカスタマイズです。
デザインを変更するためにした10つのこと
- ブログのフォントを変更した
- ブログの名前のフォントを変更した
- 記事のタイトルのフォントを変更した
- 日付のサイズやフォントを変更した
- 大中小の見出しを変更した
- 太文字をラインマーカーのように設定した
- トップページを記事一覧表示できるようにに変更した
- プロフィールを充実させた
- twitterと連携させた
- 会話形式に表示させた
ブログのフォントを変更した
ブログのフォントにはかなり悩みました。最初はそのまま使用しており、次はNoto Sans Japaneseというフォントを使用していました。
(Noto Sans Japaneseを使用するのに参考にさせていただいたサイトです)
現在使用しているフォントはこちらのサイトを参考にさせていただきました。フォントを設定すると文字サイズが小さくなってしまったので、文字サイズや行間の設定を行いました。
文字サイズや行間の設定はこちらのサイトを参考にさせていただきました。これでフォントと文字サイズ、行間の設定が終わりました。
タイトル 記事 日付のフォントを変更した
こちらも別々にフォントを設定することができるのですが、全て同じフォントにしてそれぞれ設定しました。フォントサイズはそれぞれ見やすいように設定しています。
こちらのサイトを参考に全て変更させていただきました。
大中小の見出しを変更した
見出しの変更は手こずりました。CSSによって合う合わないがあるのか、私がまだ初心者のためか反映されなかったりしたため、4時間くらいかかってしまいました。
小見出しの例
Font AwesomeというWebフォントを使用した見出しの変更のやり方を参考にさせていただきました。
大見出し、中見出しはこちらのサイトを参考にさせていただきました。最初は全てFont Awesomeを使用した見出しだったのですが、自分好みであって、全ての人がそれを好んでくれる訳ではないので、1番見やすいということに重点を置いて見出しのデザインを変更しました。
太文字をラインマーカーのように設定した
カスタマイズしている人のBLOGなどで見かける、文字を太文字にしたときに、ラインマーカーのように表示されることは皆さまご存知だと思いますが、設定は簡単でコピペしてデザインCSSに貼り付けすれば、太文字をラインマーカーのように設定することができます。
こちらのサイトが非常に分かりやすく、すぐにラインマーカー風に設定することができました。
トップページを記事一覧表示にできるように変更した
こちらもなかなか反映されず、CSSに間違いがないか確認したりして、設定するのに時間がかかりました。
こちらのかたも間違いながら設定したそうで、大変参考になりました。
プロフィールを充実させた
来ていただいたかたが、もしプロフィールを覗きに来てくれた際に、全然書いていないというのは失礼だなと思い、公開できるところは公開し、twitterのフォローボタンを置けるように設定し、充実させました。
twitterと連携させた
[アカウント設定 ]を開き、[外部サービス連携]を選択します。
[Twitter連携設定]が表示されるので、青色の[有効にする]をクリックします。
[Twitter認証画面にすすむ]をクリックします。
[連携アプリを認証]をクリックすると、はてなブログからツイートできるようになります。
本当助かりました！ありがとうございます！twitter始めて間もなく、twitterの使い方の勉強中ではありますが、連携させておけばすぐにツイート出来るので大変便利かと思い設定しました。
会話形式に表示させた
ブログで会話を書く時に、見やすくするためにCSSを追加して、さらにChromeの拡張を行い簡単に記事を書く時に使用できるようにしました。
(↑こちらに会話形式にする方法をまとめました。)
はてなブログproに移行
2017年9月11日についにproに移行し、独自ドメインを設定しました。
(↑こちらにproにする前と後ににやったことをまとめました。)
テーマを変更した
テーマの変更もはてなブログProに移行する前と後にやったことまとめ - DIY BLOG In Nagasakiこちらに書いてあるように、
こどみすさんのMillnimalismを使用させていただきました。
読者さまを大切にする
デザイン変更には関係ありませんが、私はてなブログで1番大切なことは読者さまを大切にするだと思います。読者になっていただき、自分も読者にさせていただき、コミュニケーションが取れるってはてなブログのシステムの1番素敵なところですよね。
終わりに
皆さまの参考になれば、とても嬉しいです。
私もはてなブログ初めてまだ1ヶ月も経っていません。CSSって何？デザインCSSどこ？という状況でした。しかし、CSSカスタマイズを簡単にコピペさせて下さるサイトや、上手くいかない時の対処などを書いてくれているサイトなどを参考にして、なんとかここまでデザインを変更することが出来ました。参考にさせていただいたサイト様本当にありがとうございました。
最後までご覧いただき、ありがとうございます！
