サイトの文字サイズ・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

あわせて読みたい

シェア大歓迎

この記事が役に立ったり、参考になったり、読んで嬉しいと感じていただけたら、ぜひ下のボタンからシェアしてください。シェア・ツィートしていただけると、飛び跳ねるほど嬉しく、今後の記事作成の原動力になります。

大歓迎です!ぜひシェアしてください。


広告

こっそり感想を送信する

この記事を書いた人

ものくろ(Webコーチ)

株式会社あみだす 代表取締役 / 博士課程中退(農学) / ブロガー / Web&Blogコーチ / 親指シフト orzレイアウト開発者 / 講師 / フリーランス / 旅人 / 民事裁判経験者 / 毎月どこかに出張

ブログは月間65万PVを記録(2016年1月)。 これまでに250回を超えるワークショップ開催・のべ1,200名のブログサポートに携わる。

WordPressが得意 / 好きなもの(無刻印キーボード・十割蕎麦・湯葉)/ あまり好みでないもの(ブロッコリー・値切り)

開催している講座に参加する

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

広告

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

お申し込みはこちらのお問い合わせフォームからお願いします。

お申し込みはこちらのお問い合わせフォームからお願いします。

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告