2016年9月11日日曜日

Blogger動的ビューのフォント変更 ブログタイトルとかサイドバーとか




お疲れ様です。
ァールンです。


Blogger・動的ビューの見た目をいじっていたのですが、
日本語フォントがうまく設定できなくて、結局HTMLを編集したので情報を共有いたします。


※1ァ氏は、ステータスとかパラーメータとか引数とかの値がなんだとか意識せずに完全にノリでいぢりました

※2もし真似される場合は、何を変えるとどう変わるかを意識し、バックアップをとりつつ行ってください





動的ビューは、カスタマイズだと日本語フォントが設定できない

テンプレートのカスタマイズ


はい、こんな感じで英字フォントしかないですな


ブログタイトルなんかだとゴシック体にしたいなーとか

思っていたわけですが、日本語部が
ぁーるんの部屋

こんなかんじで若干きもくなっており

いろいろいぢっても日本語がなぜか明朝体のままでした~

CSSでフォントを無理やり置き換えてやろうと思っていろいろいぢっていたのですが、なぜか反映されない...



そこで、日本語フォントを設定したいな~と思い、HTML画面を眺めてどこがどうかわるのか見ていきました


なんかよくわからないけど、ここをいぢる

HTML編集画面を開いて、どこが変わっているのか見たところ、ここが動いているようでした


HTMLを編集

画像はカスタマイズ試験中のものなので、Impactに設定してあります

meiryoは、日本語が動くかどうか試験するために入れてあります

まぁつまるところ、こんな感じで設定しなおせば動くわけですゎ

↓ヮタシのブログタイトルの設定例(ブログタイトル)


   <Group description="Blog Title">
     <Variable name="blog.title.font" description="Font" type="font"
         default="'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
         value="normal bold 100% Impact, Yu Gothic Bold, meiryo, sans-serif"/>

     <Variable name="blog.title.color" description="Color" type="color"
         default="#555555" variants="#555555" value="#555555"/>
   </Group>



こんな感じに書き換えてあげると、現在のブログタイトルのような表示に

游系フォントは利用できる環境がおおくてしゅき。。。

value=""の中身が重要そうなわけです。

引数の順番がどうなってるとか細かいところが不明なので助かりたさがある


サイドバーはここで変わる

サイドバーを好んで使っているので、ここのフォントもかえたいなー
って思いますよね(何


サイドバーは、投稿タイトルと連動して変わるようでした

特にセパレートで設定したいわけでゎないので、そのまま以下のコードをねじ込みました



   <Group description="Post Title">
     <Variable name="post.title.font" description="Font" type="font"
         default="'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif" 
         value="normal bold 100%  Yu mincho, &#39;Times New Roman&#39;, Times, FreeSerif, serif"/>

     <Variable name="post.title.color" description="Color" type="color"
         default="#333333" variants="#333333" value="#333333"/>
   </Group>



フォントは、左から順番に読んでいくっぽいので、もし游明朝を持ってない端末からアクセスされたら、タイムズ系のフォントが読まれるとゆう設定

こんな感じで、今の見た目ができあがりました~


へんなところをいじっているので真似される場合はお気を付けください~


今後の課題は、字間を詰めたいこと、行間の設定がうまく反映されていないきがする問題の解決かな

だりかおしえてくり


そりでゎ

じゃあの

0 件のコメント:

コメントを投稿