サイトの文字サイズ・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メール必須
お名前(姓)必須
お名前(名)必須

講座・ワークショップ に参加する

2023-05-28
11:00 - 12:30
15:00 - 17:00
2023-06-08
19:00 - 22:00
2023-06-17
11:00 - 12:30
2023-06-21
19:00 - 21:00
2023-06-23
19:00 - 22:00
2023-06-25
10:00 - 12:00
2023-07-01
  • ブックマーク

著者情報

おおひがし のぶひと

大東 信仁

1976年大阪生まれ。鳥取大学大学院博士課程(専門は乾燥地農業)を中退後、零細企業の立ち上げに関わり、スタッフ育成・社内ITならびにWEBシステム開発を担当。6億円の受注プロジェクト案件をまとめる。2011年に過労にて就労禁止(双極性障害)の診断を受け、生き方を見つめなおす。双極性障害を克服し、2014年からフリーランスにてWEB・ITコンサルにてWordPressを得意とした活動を行い、1,200名を超えるコンサル実績を持つ。その中で2009年から書き続けているブログは、4,100記事を超え、2016年には月間65万PVを達成した。2018年に法人化し”株式会社あみだす”となる。現在は、コンサルタントに加えて、自己受容と自己理解を広げ、誰もがそのままで命を輝かせるトランスパーソナル心理学をベースとしたカウンセラーとして”心が通う組織づくり”の支援(企業内コミュニケーション改善コンサルティング)を中心に活躍中。


株式会社 あみだす 代表取締役/岡部明美LPL養成講座 認定心理カウンセラー ・セラピスト(業界歴 5年)/ ブロガー / WordPress & Woocommerceが得意 / 親指シフト歴11年/ orz レイアウト開発者

サービス提供領域

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

お仕事のご依頼はこちら

WEB・ITコンサルティング

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

公式LINE

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

友だち追加

【案内板】

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

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

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


カテゴリー 一覧