(↑はてなブログを登録したらやるべき設定については上記にまとめています。) 私はパソコンが壊れているので、基本デザイン変更は全てスマホから行なっております。またこの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と連携してもっと多くの人に読んでもらおう！ – STDIO
本当助かりました！ありがとうございます！twitter始めて間もなく、twitterの使い方の勉強中ではありますが、連携させておけばすぐにツイート出来るので大変便利かと思い設定しました。
会話形式に表示させた
ブログで会話を書く時に、見やすくするためにCSSを追加して、さらにChromeの拡張を行い簡単に記事を書く時に使用できるようにしました。
(↑こちらに会話形式にする方法をまとめました。)
はてなブログproに移行
2017年9月11日についにproに移行し、独自ドメインを設定しました。
(↑こちらにproにする前と後ににやったことをまとめました。)
テーマを変更した
テーマの変更もはてなブログProに移行する前と後にやったことまとめ – DIY BLOG In Nagasakiこちらに書いてあるように、
こどみすさんのMillnimalismを使用させていただきました。
読者さまを大切にする
デザイン変更には関係ありませんが、私はてなブログで1番大切なことは読者さまを大切にするだと思います。読者になっていただき、自分も読者にさせていただき、コミュニケーションが取れるってはてなブログのシステムの1番素敵なところですよね。
終わりに
皆さまの参考になれば、とても嬉しいです。
私もはてなブログ初めてまだ1ヶ月も経っていません。CSSって何？デザインCSSどこ？という状況でした。しかし、CSSカスタマイズを簡単にコピペさせて下さるサイトや、上手くいかない時の対処などを書いてくれているサイトなどを参考にして、なんとかここまでデザインを変更することが出来ました。参考にさせていただいたサイト様本当にありがとうございました。
最後までご覧いただき、ありがとうございます！
人気ブログランキング
]]>
15 件のコメント
とても勉強になりましたー＾＾
私も、使ってみたいと思います。
コメント嬉しいです！ありがとうございます！
是非参考になるサイトさんばかりなので、使ってみてください！
私も少しずつ勉強していつかきちんとカスタマイズ用のCSSを自分で考えて作ってみたいと思っています。
めっちゃ参考になりました！土日に見やすいデザインに改造しようかな…
yassさん
わー嬉しいです！なかなかスマホからだとデザインCSSいじるのが難しいのですが、少しデザイン変わるだけでかなり達成感を感じます♡yassさんのブログめちゃめちゃ見やすくて、こちらが参考にしたいくらいです！！！
確かにこのフォント見やすいです。
全部スマホでやってたんですね。スタイルシートいじったりとかすごいです！！
ヒロさん
見やすいですか？変更して良かったです！スマホからだとデザインCSSを打ち込むのがなかなか難しいですが頑張ってカスタマイズしています(コピペOKのCSSを貼り付けているだけなのですが笑)
ヒロさんも器用なので絶対出来ますよ♡
はじめまして、DIYの記事にスターいただきありがとうございました！
こういった設定をしていくと自分の好きなようにカスタマイズ出来るので楽しいですよね！わたくしもPro化はしていないので、無料で出来る範囲のことはいじりたいので、参考になります！
それと読者登録させて頂きました！宜しくお願いします！
こちらこそありがとうございます！DIYの記事とても分かりやすくて驚きました！私もfurutakeさんのように分かりやすい記事を書きたいです♡
私も読者さんに登録させていただきました！これからよろしくお願いします。
頑張ってカスタマイズしてきちんと反映されると快感です♡笑
ლ(´∀`ლ)す・・すごぉい！
この時点でみっぷぅさんは変化を遂げていたのか！
プロフィールを教えてもらって感謝！
ＣＳＳがまだイマイチ成功しません…。
はてブは奥が深い…。勉強です！←何？賢者モード？
はじめまして。私もスマホでブログの変更をしているのですが、コピペできるcssをコピーしてデザインのところでcssに貼ろうとタップすると、突然画面が大きくなり、貼り付け の文字も出てこず貼り付けられません。ちなみにAndroidです。ペーストはスマホで問題なくできましたか？
私もスマホからcssを貼り付けようとすると、画面が大きくなっていました。
何度も何度もやると貼り付けることができましたが、1発で貼り付けられないため時間ばかりかかっていました(´•̥ω•̥`)
やはり、パソコンからが1番楽に貼り付けることができます。私もそれから安い1万円代のノートパソコンを購入し、CSSいじっていましたよ٩(๑•̀ڡ•́๑)و
びわさん、ご返信ありがとうございます！
やはり画面おっきくなってしまいますよね。パソコンでやった方が早いですね。
1万円台で買えるのがあるとは、驚きです！
いえいえです！こちらこそコメントめちゃくちゃ嬉しいです(*/ω＼*)♡
ヤバイくらいボロボロのノートパソコンでした！
ただそのためだけのために1万円かけるのはちょっと…という場合は満喫などでもパソコンいじれますよね⋆⸜(´˘`*)⸝ただパソコンあった方が便利ですが、CSSをもっといじりたくなっちゃいます…笑
私もパソコンが壊れたときに、満喫に行こうか悩みましたが、何とかパソコンが動いたので壊れかけのまま使っていました！
タイムリーです！昨日漫喫いってcssいじってました♪PCだとこんなに楽なんだーと感動して。
そうですよね、やっぱりPC買う方向で検討してみます。
色々詳しくありがとうございます
m(__)m
わあ！すごい⁽⁽ ◟(灬 ˊωˋ 灬)◞ ⁾⁾
なかなか高いので躊躇してしまいますよね！CSSいじるときだけ満喫とかでも良いかもですね❤︎
いえいえです！！ココさんからのコメント嬉しかったです( ；ᵕ； )❤︎