2015年2月8日日曜日

blogger Template編集

BloggerのTemplateを編集しやすくするためにシンプルの左から3番目に変更しました。
が,HTMLの編集に悪戦苦闘。備忘のために編集内容を記す


1.ヘッダーの周りの余白を削除


以下の記述を検索
<Variable name="content.padding" description="Content Padding" type="length" default="10px" value="10px">

default="10px" value="10px"の値をそれぞれ「0px」に変更する
<Variable name="content.padding" description="Content Padding" type="length" default="0px" value="0px">

2.ヘッダー画像の位置をブログの真ん中へ


以下の記述を検索
<div id="header-inner">
<a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null" style="display: block;">
<img expr:alt="data:title" expr:height="data:height" expr:id="data:widget.instanceId + "_headerimg"" expr:src="data:sourceUrl" expr:width="data:width" style="display: block" >
</a>
</div>

style="display:blockの後ろに「; marfing: auto;」と記す
<div id="header-inner">
<a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null" style="display: block;">
<img expr:alt="data:title" expr:height="data:height" expr:id="data:widget.instanceId + "_headerimg"" expr:src="data:sourceUrl" expr:width="data:width" style="display: block; margin: auto;" >
</a>
</div>

3.ブログの説明のフォントサイズを小さく


以下の記述を検索
<Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="140%">

default="140%" value="140%"の値をそれぞれ「100%」に変更する

<Variable name="description.text.size" description="Description Text Size" type="string" default="100%" value="100%">

4.日付(ラベルなども値が連動している)の文字を大きく


以下の記述を検索
<Variable name="widget.title.font" description="Title Font" type="font" default="normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif">

default=とvalue=のpx値を「16px」に変更する

<Variable name="widget.title.font" description="Title Font" type="font" default="normal bold <span style="color: red;"/>16px</span/> Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold <span style="color: red;"/>16px</span/> Arial, Tahoma, Helvetica, FreeSans, sans-serif">

5.本文のフォントサイズを大きく


カスタマイズの上級者向けにある「ページのテキスト」ではブログの説明のフォントサイズも同じく代わってしまうので,HTMLで編集します
以下の記述を検索
<Variable name="body.font" description="Font" type="font" default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif">

default=とvalue=のpx値を「16px」に変更する

<Variable name="body.font" description="Font" type="font" default="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif">

6.本文の行間を広く(合わせて本文のフォントサイズをサイズ指定値同等に)


以下の記述を検索
.post-body { font-size: 110%; position: relative; }

line-height: 1.7;を挿入。合わせて本文のフォントサイズが指定値より大きくなってしまっているので,font-size: 110%の値を「100%」に変更する

.post-body { font-size: 100%; line-height: 1.7; position: relative; }

一日が消えた。疲れた。それにしても「blogger」で検索しても勝手に「blog」と読み替えてしまう,おせっかい焼のGoogleさんでした

0 件のコメント:

コメントを投稿