ホビーガジェット [PC/周辺機器/サプライ/ゲーム/商品紹介/レビュー/ブログTIPS...]

パソコン、周辺機器、メモリーカード等サプライ、AV機器、家電製品、ゲーム等の商品紹介、レビュー、ショップ掲載他、ブログ運営メモ。アフィリエイト。

小見出し用にスタイルシートへ追加~Hタグ~サンプルメモ/ブログTIPS 

記事内の小見出し用にCSSを追加したのでメモ。

「環境設定/テンプレート管理」
スタイルシートのソース内、任意の位置に追記すればOK
もちろん記事で id なり class なり指定。
(下記の例はidで定義)

小見出しサンプル1

[サンプル1 ソース例]
h2#sample1{
padding:3px 5px 3px 10px;
border-left:#666666 3px solid;
border-bottom:#666666 1px solid;
font-size: 10px;
font-weight: bold;
color:#333333;
margin:10px 5px 5px 0px;
}

小見出しサンプル2

[サンプル2 ソース例]
h2#sample1{
padding:3px 5px 3px 10px;
background:#F5F5F5;
border-left:#666666 3px solid;
font-size: 10px;
font-weight: bold;
color:#333333;
margin:10px 5px 5px 0px;
}

小見出しサンプル3

[サンプル3 ソース例]
h2#sample3{
padding:3px 5px 3px 10px;
background: #F5F5F5;
border: #666666 1px solid;
font-size: 10px;
font-weight: bold;
color:#333333;
margin:10px 5px 5px 0px;
}

※記事内のタグの追加例
<h2 id="sample1">小見出しサンプル1</h2>







FC2ブログ~記事の行間を拡げる方法 

記事の行間の変更手順

管理画面「環境設定/テンプレート管理」から、

exampletemplate のスタイルシート編集

の枠内のソースの、上部から数行目にある、

body {  }

この{ } の中の任意の位置に、以下のような行を付け加える、もしくは既に書いてある"line-height"の数値を以下の例のように書き換えるだけ。

(例1)
line-height:170%;

(例2)
line-height:1.7;

参考までに(例1)を追記または書き換えた場合、以下のようになる。
------------------------------------------------------------
body {
    color: #898989;      /* 例えば色の設定とか */
    hogehoge: hogehoge;    /* その他の設定 */
    line-height:170%;  /* ←追加した行 */
}
------------------------------------------------------------


但し、body での指定はブログ内のテキスト全体に影響させるものなので、記事の部分のスタイルを個別に指定してあるテンプレートでは、末端の指定が優先され有効にならない。
この場合は、HTMLソースの方を参照し、HTMLソース内で「<%topentry_body>」の直前付近にあるクラス名(例3<div class="entry_body">等)を頼りにスタイルシートソース内で、例3でいうところの「entry_body」というキーワードで該当部を探し出して、
.entry_body{ } の{ }内に line-height を指定する必要がある。


行間をどれぐらい空ければいいのか?
と疑問に思う人のために

行間を指定する数値については、意図するデザイン、レイアウトによって何でもあり、絶対的なものはないだろうが、出版物等、印刷業界、DTP業界でも、文章が読みやすい行間として、やはり指標とする定番、セオリーの数値はいくつか言われているので以下にまとめる。

最低でも文字サイズの半分=50%の行間
よく使われる数値として75%~80%の行間

上記スタイルシートでの中で指定する「line-height」は、空ける数値ではなく、文字の高さに対してその行自体の高さをいくつにするか、100%が行間なしとなる。
つまり、行間に文字の50%の高さを指定するなら、その行の高さを150%と指定する事になる。



<To Do> 

■次は、試し書き、メモではないコンテンツを数点

■FC2 AFFILIATE , Amazon アソシエイト 登録・申請

その前にやはり体裁がある程度整わないと、、、なので、せめてトップのバナー画像ぐらい充ててみるか。



ブログランキング
[AD] Amazon
[AD] Rakuten