たぬき猫マロン

大怪我を負った保護猫の記録と働く主婦の雑記ブログ

【初心者向け】はてなブログ デザインテーマカスタマイズ その3《フォントサイズ・ブログアイコン編》

ご訪問ありがとうございます。

マロニーです。

 

先日ブログのリニューアルをしました。

 

Webデザインど素人の私でもコピペだけでカスタマイズがある程度できましたので、初心者の方向けに私のカスタマイズを記事にしていきます。

 

今回はその3《フォントサイズ・ブログアイコン編》です。

f:id:marondiary:20200617173056p:plain

 はじめに

この度ブログテーマを『Minimalism』に変更しました。

 

このブログははてなブログpro(有料版)を使用しています。

無料版の場合、できない範囲があるかもしれません。

あらかじめご了承ください。

 

また先日、ブログテーマ変更直後に不具合がいくつか生じました。

詳細を記事にしています↓

www.marondiary.com

原因は不明でその後すぐアクセス数も戻ったので、テーマ変更は関係ないかもしれません。

 

ただ、検索するとワードプレスの方でテーマ変更によるアクセス減少が起きたという記事もありますので、変更は自己責任の上お願いいたします。

 

必ず今のデザインcssをコピーしてテキストファイル等に保存しておくことを強くお勧めします。

 

また、はてなブログは追加料金なしで複数のブログを開設することができます。

無料版で3つ、有料版で10つまで。

テスト用ブログを開設して、練習をしたり色々試してから気に入ったものを決めてメインブログを変更していくといいでしょう。

 

詳しくは準備編をご覧ください↓

www.marondiary.com

ブログテーマのフォントを変更

Minimalismのデフォルトのフォントサイズは15px。

見た目小さくフォントも薄くて読みづらいというか、なんか違和感があって前のテーマの方が読みやすかったなと思い、変更することにしました。

 

Googleでもフォントサイズは16px以上が良いとされているようです。

私は17pxに変更しましたよ。

また、フォントの種類は「メイリオ」に。

 

またまたくうかさんのサイトを参考にさせていただきました。

くうかさん、いつもありがとうございます。

www.kurasitotonoe.com

私が実際に貼り付けたcssをお伝えしたいところですが、くうかさんから拝借しましたので、くうかさんのブログをご覧くださいね。

 

いくつかフォント変更のcssが紹介されています。

 

私は記事内のフォントサイズ変更と、フォントの種類をメイリオにする部分だけ拝借させていただきました。

 

紹介されているcssをコピーして貼り付けます。

 

①ダッシュボード

②デザイン

③スパナのマーク

④一番下の『デザインCSS』

⑤デザインCSSのをクリックすると難しいCSSが並んでますね。

ただ単に一番下の行にコピーしたPC、スマホ分のCSSをそれぞれ貼り付けるだけ!

(うまく反映されない場合は一番上に貼り付けると反映される場合があるそうです)

⑥変更を保存する

f:id:marondiary:20200628143822p:plain

 

このひと手間でほんのちょっとの変化なのですがとても読みやすくなりました!

 

 

ブログアイコン変更

以前はマロンのかわいく撮れた写真をブログアイコンに使っていました。

ただ、キジトラ猫ってアイコンにするとただ茶色くて目立たないんですよね…。

 

私にはデザイン力もないし、絵心もないから上手に作れないしな先送りにしたのですが、ヘッダー画像に合わせてCanvaでブログアイコンを作成しましたよ。

 

ヘッダー画像変更の記事はこちらです↓

www.marondiary.com

 

Canvaは無料素材が多くセンスのない私でも素敵なデザインが作れちゃいます!

おすすめですよ。

私はCanvaでアイキャッチ画像も作っています!

 

本格的にプロに頼んで作りたい方はココナラがおすすめです。

 

はてなブログは自動的に64×64pxに自動で縮小されるそうですよ。

私は180×180pxで作成しました。

 

ブログアイコンの設定方法

ブログアイコンができたら以下のようにブログ内に設定していきます。

f:id:marondiary:20200617165632p:plain

①ダッシュボード

②設定

③基本設定

④ブログアイコン

⑤『画像を削除する』にチェックを入れて一番下の『変更する』をクリックして古いアイコンを削除する

⑥ファイルを選択で新しく作ったブログアイコンを指定し『変更する』

注意点

アイコンが反映されるまで数日かかることもあるようです。

私はもう数週間経っているのに、人様のブログにスターをつけるとまだマロンアイコンだったりします。

まぁいいかと思っていますが。

スターを付ける際、ブログによって新しいアイコンが表示されるときもあるんですよね。謎。

 

それから、もう一点重要ポイント!

このアイコンをサイドバーでプロフィール画像として使いたい場合は、アカウントのプロフィール画像の変更もしておいてくださいね。

 

私はなんでプロフィール画像が新しいアイコンに変わらないんだろう?

と思ったら以下の処理をやっていませんでした。

 

①ダッシュボード

②左側一番下の『アカウント設定』

③基本設定の『プロフィール画像』を変更

 

これで設定完了です!

まとめ

いかがでしたでしょうか。

 

記事の内容が一番ですが、読みやすさやデザインも重要なポイントです。

 

ブログアイコンやプロフィール画像はサイト管理人の顔みたいなものです。

 

人の印象に残る、目立つアイコンがいいと思います!

今のアイコンがいまいちだなぁ〜と思っている方は是非変更にトライしてみてくださいね。

 

そして変更後は変更したことを記事にすると読者の皆さんがわかってくださいますよ。

 

次は

【初心者向け】はてなブログ デザインテーマカスタマイズ その4《目次編》

の予定です。 

今日のにゃんこ♪マロンコーナー

魚屋さんで、それほど高くなかったのでまだ生きているカニを買ってきましたよ!

 

マロンが興味津々。

f:id:marondiary:20200626214348j:image

近い!にらめっこですか!
f:id:marondiary:20200626214427j:image

好奇心旺盛なマロンなのでした。

 

今日もお付き合いいただきありがとうございました!

素敵な週末をお過ごしくださいね♪

 

 

 

にほんブログ村 猫ブログへ
にほんブログ村  

 

にほんブログ村 主婦日記ブログへ
にほんブログ村