サイトの文字サイズ・fontを調整しました。変更点メモ。

  • ブックマーク
この記事は2年以上前に公開された記事です。情報が古くなっています。現在は状況が異なる可能性があります。

もっと読みやすい!と感じてもらえるようにしたくって、文字の組み方・フォント・サイズを調整しました。そこまで調整したら有料テーマ使っているいみあるの?ちょっおまえ..というご指摘も覚悟でございます。

センスも感性も持ち合わせていません。かわりに図々しさは持ちあわせております。

インスピレーションを得るため、こちらのデザインが素晴らしいサイトさんを参考にさせていただきました。

chrome ”要素の検証”

これを活用します。気になるところで右クリック。「要素の検証」からいろいろ教えてもらいました。

フォントサイズ

ちょっと大きくない?と思っていましたが、みなさん15pxに設定されていますね。こういうのは右に倣えでいいかなっということで、15pxのままで。

フォントカラー

333333 から 6a6a6aに変更。サイズとカラーはテーマのコントロールパネルから指定できるので楽に変更できます。

スクリーンショット 2013 10 11 20 09 16

文字組

文字組がスカスカなのは当初から気になっていました。やっとカスタマイズできました。

これがいままでの。

スクリーンショット 2013 10 11 20 14 50

インスピレーションを得てcssをカスタマイズしました。”el plano”ではcssは直接書き込まずに、オリジナリティスタイルシート設定項目があるので、そこに書きます。

直接書いてしまうと、アップデートの度に消えてしまいます。子テーマを作るより簡単ですし。

スクリーンショット 2013 10 11 21 33 14

letter-spacing: 0.2px;

これが良いらしいです。 [M] mbdbさんから教えてもらいました。感謝。

 letter-spacing-スタイルシートリファレンス

単位が em なのもポイント。

 フォントのコントロール/HTML基礎講座

line-height: 1.75em;

line-height は1.75emになので、行間は0.75emです。少し狭めかな?と思いましたが、、グレイトな感じになりました。ロゴだけでなく、お世話になりっぱなしです。

このあたり設定で文字組がスカスカなことから、文字が大きく感じたんですね。iPhoneでの表示も確認しましたよ。

フォント

敬愛する norirow’s Diary – ノリロウ戦記 –さんが見やすい!ので、参考にさせていただきました。ありがたや。

英数を”Georgia”で、日本語は”ヒラギノ丸ゴ Pro”に設定しました。iPhoneでヒラギノ丸ゴシックが使えないのが残念です。

スクリーンショット 2013 10 11 20 35 52

ロゴとの雰囲気がよくなった

今回のカスタマイズでロゴとテキスト部分との雰囲気がよくなったと感じました。カスタマイズはしましたが、統一感を保ことを大切にしました。

作っていただいたロゴの力をより発揮できると確信しました。

 [箱] 『ものくろぼっくす』のロゴ [M] mbdb オフネクで盛り上がり、ホシナさんからプレゼントしてもらったよ!早速 サイトをリューアルしたよ!ブロネクの力! | [箱]ものくろぼっくす

変更前がこちら

スクリーンショット 2013 10 11 20 14 50

変更後はだいぶ変わりました。

スクリーンショット 2013 10 11 21 26 07

あとはWebフォントを導入するか?そこが次の課題です。

サイトデザインに差をつける Webフォントコレクション (ijデジタルBOOK)
サイトデザインに差をつける Webフォントコレクション (ijデジタルBOOK)
posted with amazlet at 13.10.11
インプレスジャパン
売り上げランキング: 390,217

散財したアイテム

最近の散財はこちら!

出張に便利そうなコンセントを買った!塩は、ぬちまーす。

【WordPressブログ スタートアップ講座 開催決定しました】

12月30日  木曜日
・10時から18時
・Kitchen Bee(4名)とオンライン(4名)のハイブリッド開催です。(リアルは残り2名!)
お申し込みページはこちら

オンラインのスタートアップ講座、気になっていたけど、4日間に分かれていて、スケジュールが、、というあなた。オンラインでも1日でOKなスケジュールを作りました。

ぜひ、この機会に、情報発信の母艦を一緒に作りましょう。

また、「ブログをスタートしたい」という方に、すごく良い講座あるよっと、ご紹介いただけると、飛び上がって喜びます。

よろしくお願いします。

(なお、リアルの会場は、Kitchen Beeにて人数を制限し、感染症対策を行って開催します。)

追伸、

また、11月3日の19時から20時の1時間、ものくろキャンプ交流会を開催します。こちらは、少人数ですが、Kitchen Beeのお席もご用意できる予定です。

オンラインとハイブリッド開催しますので、オンライン参加も大歓迎です。イベントを立ち上げますが、まずは、カレンダーに丸印を!

ブログスタートアップ講座のお申し込み告知ページを見逃したくない!という方は、下のメールマガジンにご登録ください。

お申し込み開始時にご案内をお送りします。

無料メルマガ発行中

メルマガも2021年は頑張って書いています。ぜひ登録して読んでくださいね。(無料です)

メールマガジン
無料で購読
メールアドレス *
* 必須項目

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。


Youtube

  • ブックマーク

この記事を書いた人

テストテスト