10月22日 プロフィール更新

スマホでBlogのデザインを変更するためにした10のこと

f:id:imuh:20171211161132p:plain

皆さまこんにちは!はてなブログを始めてまだ1ヶ月も経たない初心者です。

BLOG初心者のかたは、BLOGのデザインを変更するには、まずどこから始めて行くのか分かりませんよね。私もそうでしたので、役立てるならと思い、まとめてみました。(あと私もどのような設定をしたのかきちんと覚えておくために)

(↑はてなブログを登録したらやるべき設定については上記にまとめています。)

私はパソコンが壊れているので、基本デザイン変更は全てスマホから行なっております。またこのBLOGは、はてなブログ無料版を使用しているので、はてなブログProでなくても出来るカスタマイズです。

デザインを変更するためにした10つのこと

  1. ブログのフォントを変更した
  2. ブログの名前のフォントを変更した
  3. 記事のタイトルのフォントを変更した
  4. 日付のサイズやフォントを変更した
  5. 大中小の見出しを変更した
  6. 太文字をラインマーカーのように設定した
  7. トップページを記事一覧表示できるようにに変更した
  8. プロフィールを充実させた
  9. twitterと連携させた
  10. 会話形式に表示させた

ブログのフォントを変更した

ブログのフォントにはかなり悩みました。最初はそのまま使用しており、次は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カスタマイズを簡単にコピペさせて下さるサイトや、上手くいかない時の対処などを書いてくれているサイトなどを参考にして、なんとかここまでデザインを変更することが出来ました。参考にさせていただいたサイト様本当にありがとうございました。

最後までご覧いただき、ありがとうございます!

人気ブログランキング

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

  • こもりまさあき(監修)/, 赤間 公太郎 & 原 一宣。
  • インターネット
  • ¥2,400

9 Comments

imuh

コメント嬉しいです!ありがとうございます!
是非参考になるサイトさんばかりなので、使ってみてください!
私も少しずつ勉強していつかきちんとカスタマイズ用のCSSを自分で考えて作ってみたいと思っています。

返信する
taneumadash1847

めっちゃ参考になりました!土日に見やすいデザインに改造しようかな…

返信する
imuh

yassさん
わー嬉しいです!なかなかスマホからだとデザインCSSいじるのが難しいのですが、少しデザイン変わるだけでかなり達成感を感じます♡yassさんのブログめちゃめちゃ見やすくて、こちらが参考にしたいくらいです!!!

返信する
x-photo

確かにこのフォント見やすいです。
全部スマホでやってたんですね。スタイルシートいじったりとかすごいです!!

返信する
imuh

ヒロさん
見やすいですか?変更して良かったです!スマホからだとデザインCSSを打ち込むのがなかなか難しいですが頑張ってカスタマイズしています(コピペOKのCSSを貼り付けているだけなのですが笑)
ヒロさんも器用なので絶対出来ますよ♡

返信する
furutakeru

はじめまして、DIYの記事にスターいただきありがとうございました!
こういった設定をしていくと自分の好きなようにカスタマイズ出来るので楽しいですよね!わたくしもPro化はしていないので、無料で出来る範囲のことはいじりたいので、参考になります!
それと読者登録させて頂きました!宜しくお願いします!

返信する
imuh

こちらこそありがとうございます!DIYの記事とても分かりやすくて驚きました!私もfurutakeさんのように分かりやすい記事を書きたいです♡
私も読者さんに登録させていただきました!これからよろしくお願いします。
頑張ってカスタマイズしてきちんと反映されると快感です♡笑

返信する
uchu5213

ლ(´∀`ლ)す・・すごぉい!
この時点でみっぷぅさんは変化を遂げていたのか!
プロフィールを教えてもらって感謝!
CSSがまだイマイチ成功しません…。
はてブは奥が深い…。勉強です!←何?賢者モード?

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です