ということで、ちょっとガイコツにテンプレートをいじっています。
ガイコツもかわいくポップにしようと思ったのですが、ポップなのは結構続いたので
ちょっとリアルテイスト、りあるフレーバーです。
ちょっとベタな配色ですね。。
金魚×赤ちゃんで夏を涼しげにブログも涼しげにというコンセプトです。
数日以内にご利用可能になると思いますので、よろしくお願いします。
analyzer_six は初心者さんに利用されることを想定して作りました。
プラグインには非対応でして、いろいろやりたい方は物足りないと思います。
もし気に入られたら使ってみてください!
今このブログで使っているテンプレート(赤ちゃんと金魚のテンプレート)を
もう少しデザインを見直して公開しようと思っています。
私はこの感じが涼しげでデザイン的にはちょうど良いと思いますが、機能的な要素
つまりサイズや配色など、どのようなニーズがあるのかをもう少し調べてみます。
カラムレイアウトやサイズなど、何か希望があればアドバイスいただけませんか?
よろしくお願いします。
困ったことなどがありましたら、コメントを書き込んでください。
※その際、必ずブログのURLとメールアドレスはご入力下さい。
なるべく回答するように心がけておりますが、どうしても回答が
遅れてしまう時もありますので、ご了承下さい。
また、一般的なHTMLの知識、CSSの知識につきましては
特化したサイトがたくさんありますので、そちらをご覧いただければ
僕よりは正しく、素早い情報を入手できることと思います。
【★HTMLについて分からないことがある方】
【★CSSについて分からないことがある方】
また、以前に回答済みの用件に関しましては、重複してしまいますので
回答することはありません。申し訳ありませんが、過去のコメントをご確認下さい。
以上
cssを利用することにより、柔軟な表現が可能になりました。
今回はフォントサイズの指定について、ご紹介したいと思います。
フォントサイズの指定には、かなりの表現が利用できるので
全てをここでご紹介出来ないのですが、よく使われる方法などをご紹介します。
◆従来までのフォントタグによる指定
<font size="14"> 14ピクセルの文字列 </font>
◆◆cssを利用したfont-sizeプロパティにキーワードを指定(spanタグ利用時)
<pre>
<span style="font-size:xx-small">とってもとっても小さい文字列</span>
<span style="font-size:x-small">とっても文字列</span>
<span style="font-size:small">小さい文字列</span>
<span style="font-size:medium">標準サイズの文字列</span>
<span style="font-size:large">大きいの文字列</span>
<span style="font-size:x-large">とっても大きい文字列</span>
<span style="font-size:xx-large">とってもとっても大きい文字列</span>
</pre>
◆◆font-sizeプロパティに各単位を指定(利用可能単位は下記参照)
<span style="font-size:15px">15ピクセルの文字列</span>
<span style="font-size:5pt">5ポイントの文字列</span>
◆◆font-sizeのプロパティで利用できる単位
em : 一階層上のタグに適用されている文字の大きさに対する割合
ex :小文字のxの高さに対する割合
px :ピクセル数
% :親要素のフォントサイズに対する割合
in :インチ(1インチは約2.54センチメートル)
mm :ミリメートル
pt :ポイント(1ポイントは72分の1インチ)
pc :パイカ(1パイカは12ポイント、つまり6分の1インチ)
※一部相対値もありますので、ご注意ください
◆◎◆外部CSSから読み込む(とても楽になります)
1.記事の投稿時のテキストサイズを変えたい部分に
下記のタグをその都度追加します。
ABC<span class="ct-font">DEF<span>GHIJ
(DEFのみ"ct-font"が適用されます)
2.cssの編集にて下記のコードを追加します。
.ct-font{
font-size : 8px;
}
上記の2つの作業で今後は<span class="ct-font">を利用するだけで
簡単にいつでも文字のサイズを適用させることが可能です。
フォントサイズの数値はお好きなように変更してください。
また、ct-font もいくつでも増やせます ct-font1 ct-font2 .......というようにです。
これで表現力が一層ますこと思います。
◆◆◆◆行間に関して◆◆◆◆
文字のサイズを変更すると上の行、または下の行との行間の問題がでてきます。
よくみかけるのが、文字のサイズを変更していて表現力はあるが、下の行の文字列
と重なってしまっていたり、その逆の行間が空きすぎていてしまったりしていているケースです。
その場合は、各行間のサイズを指定することで回避可能です。
行間はcssの line-height プロパティにより指定可能です。
line-height :文字列の上橋から次の行の文字の上端までの距離の指定(行の高さ)
つまり、このプロパティの数字を大きくすれば行間がおおきくとられます。
値には単位によるサイズによる指定と、フォントのサイズによる比率で指定する方法があります。
比率による指定は、フォントに対しての倍数と、パーセンテージにの両方が利用可能です。
キーワードによる指定も可能です。キーワード"nomal"を指定すると、W3Cによる
もっとも適用とされる値の"フォントの1.0〜1.2倍"が使われます。
★標準の行間
<p style="line-height:nomal">
</p>
★2倍の行間
<p style="line-height:2">
</p>
★3倍の行間
<p style="line-height:300%">
</p>
◆line-heightのプロパティで利用できる単位
em :font-sizeプロパティに指定されているサイズに対する割合
ex :小文字のxの高さに対する割合
px :ピクセル数
% :font-sizeプロパティに指定されているサイズに対するパーセンテージ
in :インチ(1インチは約2.54センチメートル)
mm :ミリメートル
pt :ポイント(1ポイントは72分の1インチ)
pc :パイカ(1パイカは12ポイント、つまり6分の1インチ)
※相対値もありますので、ご注意ください
★文字の指定をまとめて行う fontプロパティ
line-heightプロパティは、fontプロパティで各スタイルをまとめて一緒に指定する
ことが可能です。line-heightは"/"スラッシュのあとに指定します。
font : 斜体 スモールキャピタル 太さ 大きさ/行間 フォントの種類
例: font:italic small-caps bold 12px/3 Arial
上記では、斜体(イタリック)で、スモールキャピタル文字で、太文字で
大きさが12ピクセルで、3倍の行間のArialフォントを指定しています。
不必要な指定は省略することも可能です。
例: font:20px/400% "MS 明朝"
みなさん、よいブログライフを!



