Vaster2 フォントカスタマイズ
見出しの通りフォントのカスタマイズですが、
・フォントそのものの変更
・余白
・フォントのサイズ
・行間のスパン
がHTMLで一ヶ所にまとまっているため割とお手軽に変更できます。
※この記事の最後に大事な追記をしております。
この方法で変更される方は是非そちらまでお読みください。
まず「テーマ」から「HTMLの編集」を選択し、「Ctrl+Fキー」で検索窓を出します。
そこで「body{」と検索すると、画像の場所が出てくるかと思います。
赤で囲ってあるところを変更します。
ただ、Vaster2ではこの部分が上手く作動してないので、ほぼ同じ文章を貼り付けし作動させる工程が必要になります。
*{
font-family:Helvetica,"游ゴシック","Yu Gothic",sans-serif;
margin:0;
font-size:16px;
line-height:1.6em;
}
貼り付けるのは上のコードですが、数値はデフォルトのものです。
同じものを貼り付ける必要がありますので、変えてしまった人は数値も同じにして下さい。
場所は「body{}」の下部分、
ここです。
一応これで「テーマの保存」をし、一度記事を見てみます。
変更前。
変更後。
行間が広がっています。ということは「line-height:1.6em;」の部分が適応されてなかったということですね。
私は何よりもまず行間を変えたいと思っていたので、これでもいいかなと思ったのですが
一応色々試してみました。
対応する部分は以下の画像の通りです。
変更したら追加したコードの方も同じように変更してくださいね。
私は最終的に
フォント…メイリオ→無ければヒラギノ角ゴ→無ければMS Pゴシック
マージン…そのまま
フォントサイズ…17.5
行間…1.8
にしました。
画像のフォントの記述は
「font-family:メイリオ,meiryo,ヒラギノ角ゴ Pro W3,ＭＳ Ｐゴシック,sans-serif;」
です。
フォントは好みによると思いますので各々にお任せいたします。
注意
ここで変更したものはサイドバーにも適応されます。
私のように「人気記事」や「自己紹介」なんかを表示させていると、ちょっと変わってしまいますので気を付けてください。
以前はこんな感じでしたが、
変更される方はこの辺のレイアウトを考えながら調整してください。
※追記※
この方法でフォントその他を変えたところ、記事作成画面で「フォントサイズ」の拡大縮小がうまく機能しなくなりました。
単独であれば機能するのですが、リンクと文字色変更を文の途中で組み合わせるとデフォルトのサイズに戻ってしまいます。
例えば、
一文全部「最大」にしても、色を変えたり、リンクを付けたりするとこんな感じになってしまうのです。
プレビューではちゃんとしてるんですけどね。
これは例文です というのがhtmlでは
<span style="font-size: x-large;">これは<a href="http://a/" target="_blank">例文です</a></span>
となっていて、おそらく記述に間違いはないと思うのですが…
/spanタグが機能してない訳ではなく、背景色の指定なんかは効きます。
フォントサイズだけに影響するみたいなのですが、私の乏しい知識では解決することができませんでした。
詳しい方がいらっしゃいましたら原因を教えていただきたいです。
|
|
|
0 件のコメント :
コメントを投稿