どこをカスタマイズしたか備忘録

水曜日, 2月 01, 2017


どこに手を加えたのかわからなくなりそうなので備忘録です。
基本的な部分は設定終わったかなという感じです。
このまま投稿を開始しても問題ないと思います。
予想外だったのがスライダーですね。
前回のテンプレートではカテゴリーを選んでスライダーに出来たので特に困らなかったのですが、今回は新着順に全部表示されます。
写真カテゴリーの写真はサイズをそろえていたのですが、それ以外の特にbloggerカテゴリーは適当なのでスライダーがガタガタになっています。
これは格好悪いけどこれから気を付けてサイズをそろえることで綺麗に表示します。

写真の表示も困りましたね。
今まで「特大」 で表示して十分だったのですが、このテンプレートだと元のサイズで表示しないとパソコン上で変な隙間が空いてしまいます。
つまり全部の記事を修正しないといけません。
とほほですね~

さてブログのどこをカスタマイズについてです。
まずこだわったのが色です。
デモでは淡いオレンジがメインカラーとなっていましたが、このブログでは前回のテンプレートの象徴的な色を引き継いでスカイブルーをメインカラーとしました。
スカイブルーを引き継いだおかげかテンプレートを変更しても違和感が少ないです。

フォントですが最初は前回と同じメイリオを適用する気でした。
強制的に適用するとツイッターマークなどが飛んだのでbodyにコードを書こうと思ったのですが、そこでこのテンプレートには「Noto Sans」 というGoogleとAdobeが共同開発したフォントが適用されていることに気付きました。
つまりこのテンプレートと相性が良いのはその日本語版である「Noto Sans Japanese」だ!ということでそちらを導入しました。
綺麗な感じのフォントでおしゃれなこのテンプレートとも合っていると思います。
正解でしたね。
導入方法は簡単でstyleタグで「Noto Sans」を読み込ませているのでそこに追加して「Noto Sans Japanese」を読み込ませてあげます。
</head>の上部に<link href='//fonts.googleapis.com/earlyaccess/notosansjapanese.css' rel='stylesheet'/>を記述します。
その上で「font-family: Noto Sans Japanese,」 とフォントファミリーを指定するだけで適用されます。

更に悩んだのがフォントの色と大きさです。
大きさはフォントが綺麗で違和感もなかったので3サイズアップの15pxとしました。
問題が文字の色です。
もともとかなり薄めのグレーが設定されていてそれがおしゃれだけど読みにくい。
ところがスマートフォンで確認すると普通に読めます。
調べてみると「Noto Sans Japanese」はFireFox上でのみややかすれた感じになるそうです。
試しにIEで見るとこちらも普通に読めました。
一回文字の色をほぼ黒にしたんですよ。
視認性は上がるんですけど、テンプレートから文字が浮く感覚で違和感があって変でした。
色々試して一段階暗くしたグレーで落ち着きました。
おしゃれ感を損ねずに日本語でもいい感じに読みやすくカスタマイズ出来たと思います。
たぶん次に手を加えるべきなのはロゴですが、絵心ゼロの私にはこれが苦痛です。
シンプルでいいと思うのですが、ごまかしが効かないので余計に重い腰が上がりません。
お金を払ってまで作ってもらうものでもないし困りました。

  • Share:

You Might Also Like

0 コメント