1more!

+1 Lifestyle Blog. 趣味を多方面に愉しむブログ。

【Ï】ブログ改造記12「再びのヘッダー&Webフォント」

スポンサーリンク

photo credit: mkhmarketing via photopin cc

どうも!Hayabusa(@hayabusa_823z)です。今回は、毎回お送りしている、ブログ改造記の第12弾です。

今回の変更内容と今後の予定

スマートフォン/PC版ブログタイトル部分の変更
【Ï】ブログ改造記11〜久々のカスタマイズ〜 - 1more!
photo credit: William Hook via photopin ccどうも!Hayabusa(@hayabusa_823z)です。今回は少し時間に余裕が出てきたので、久々にブログのレ...
スマートフォン表示でも、タイトル画像を自由にカスタマイズできるようにしました - はてなブログ開発ブログ
本日、はてなブログでは、デザイン設定画面に、スマートフォン用のタイトル画像をカスタマイズできる機能を追加しました。デフォルトのスマートフォン表示で、自分のブログらしい画像をタイトル部分に設定できます。...

どうやら、PCと別の画像を指定できるようになったようですが、表示が以前の状態に戻ってしまったので、これを機会にスタイルシートを見直すことに。

以前から、ヘッダーに関しては、色々試しているのですが、ブログタイトル部分を画像ロゴにした場合、iPhoneiPadではそこまで気にならないものの、Retinaディスプレイ環境下のMacで表示するどうしてもロゴの画像の荒さが気になる点がありました。
また、PC・スマートフォン用で画像を分けて作ると何かスッキリしない感じがしたので、思い切って、Webフォントと文字だけのシンプルな構成にすることに。

フォントは、今年3月ごろに行なったカスタマイズ同様、Google のWebフォントから拝借しました。

3月と異なる点は、ブログタイトル部分に、背景を入れてない点、タイトルフォントを変更、ブログ説明文のフォントサイズを大きくした点です。

Webフォントの導入で、画像に依存しないため、Retinaディスプレイでもタイトルが綺麗に表示できるようになったと思います。

また、スマートフォン版は、今後、季節に合わせた、風景写真に時期ごとに変更していく予定です。加えて、小さかったスマートフォン版のブログタイトルの文字サイズを大きくし、見やすくしました。

どうやら、設定→詳細設定→head要素編集内の、styleタグで囲んだ部分の中に、a.blog-titleの部分をCSSでフォントサイズを指定すると大きくなるようです。

これで、ひとまずヘッダー周りに関しては、ほぼ3月-4月ごろのレイアウトに戻って落ち着いたので、今後は微修正を行っていく予定です。

※2014/8/2現在、変更した大きさは反映されるものの、Windows(Chrome)では正しく表示されているWebフォントがSafari(OS X/iOS)では、別のフォントに置き換わってしまう事象が起きています。 この件に関して、他のブラウザでも検証して、修正しようと考えています。

カテゴリーの増設/変更
  • MacMacアプリカテゴリーを、Mac購入に伴い追加しました。

  • アプリ紹介カテゴリーをiOSアプリに変更しました。

  • グルメカテゴリーの追加

ブログ説明文の新キャッチフレーズ

  • 上記の変更に伴い、前回の記事でもお伝えした、新キーコンセプト「Plus One Hobby Blog .」を踏襲し、

Apple製品、ガジェット、旅行、グルメなど、趣味を多方面に愉しみ、日々の生活にプラスワンを提案するブログ

という新しいキャッチフレーズを決定しました。

あとがき

前回同様、ヘッダー周りの修正が中心になりますが、今後も、ページのデザインの中で気になる点がいくつかチェックしたところ、あったので、引き続き修正していく予定です。

また、キーコンセプト制定により、これからもますます、生活にプラスワンの楽しさを提案できるよう、頑張っていきます。