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

無料メルマガにぜひご登録ください

ブログより日常を書いています。
ものくろキャンプ メルマガ
購読登録フォーム
Eメール必須
お名前(姓)必須
お名前(名)必須
  • ブックマーク

著者情報

おおひがし のぶひと

大東 信仁

博士課程中退 / WEB・ITコンサルタント(業界歴 9年以上) / 岡部明美LPL養成講座 認定心理カウンセラー ・セラピスト(業界歴 5年) / ニックネーム : ものくろ / ブロガー / WordPress & Woocommerceが得意 / orz レイアウト開発者 / 株式会社 あみだす 代表取締役

サービス提供領域

  • WEBコンサルティング
  • WEB・コンテンツ マーケティング
  • SEO コンサルティング
  • WEBサイト制作・運用保守サポート
  • EC サイト制作・運用保守サポート
  • WordPress 導入サポート
  • WordPress 運用サポート
  • SNS コンサルティング
  • Youtube コンサルティング
  • 情報発信 サポート
  • IT・WEBの枠組みを超えた経営支援
  • 講師・ワークショップ 運営サポート
  • 心理カウンセリング
  • 企業様向け コミュニケーション研修
  • 経営者様向け サポート
  • 自己成長・探求 サポート

お仕事のご依頼はこちら

WEB・ITコンサルティング

カウンセリング・セラピー

公式LINE

公式LINEにて、不定期ながら、モニターセッションやお得情報などのスケジュール案内や、心と向き合うコツなどを発信し、日常の中でカウンセリングの視点からの”気づき”を公式LINEにて語ります。ぜひ、ご登録ください。

友だち追加

講座・ワークショップ 開催予定

2023-01-07 09:30 – 19:30
2023年1月7日 18きっぷを楽しむ1日
詳細・お申し込みはこちら

2023-01-07 13:00 – 15:00
大阪【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-09 20:00 – 21:30
【あみだす新春スペシャル】運気に乗ろう!暦を味方に付ける講座:オンライン
詳細・お申し込みはこちら

2023-01-11 19:30 – 21:30
【ものくろキャンプ】全5回 第二水曜日・オンライン開催 「情報発信しようとするとなぜか?ブロックがかかってしまう人のためのブログ・SNS講座」
詳細・お申し込みはこちら

2023-01-12 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-12 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 1月12日
詳細・お申し込みはこちら

2023-01-14 11:00 – 13:30
オンライン【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-14 15:00 – 17:30
【あみだす発酵アカデミー】イカの塩辛作りクラス
詳細・お申し込みはこちら

2023-01-15 13:00 – 15:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-18 19:00 – 20:30
あみだすマインドフルネス 瞑想会
詳細・お申し込みはこちら

2023-01-21 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-27 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 1月27日
詳細・お申し込みはこちら

2023-01-28 14:00 – 17:30
”職場のコミュニケーションが良くなる”働く人のための傾聴講座 3回連続講座
詳細・お申し込みはこちら

2023-02-09 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 2月9日
詳細・お申し込みはこちら

2023-02-18 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-19 11:00 – 13:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-23 11:00 – 13:30
木・祝日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

【案内板】

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

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

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


カテゴリー 一覧