FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

一部だけ文字、リンク等の色を変える [2006/04/30]
カテゴリ３の背景の色を変える [2006/04/30]
返信が遅れて大変申し訳ありません [2006/04/23]
テーブル内の文字フォントを制御する [2006/04/16]
タイトルを画像にする [2006/04/13]
記事を枠で囲む [2006/04/09]

≪ 前月 | 2006年04月 | 翌月 ≫

一部だけ文字、リンク等の色を変える

一部だけ文字、リンクの色等を変える方法を紹介します。
色を変えたい文字をfontタグで囲みます。

<font color="#0033FF">色を変えたい文字</font>

数値を変えてお好みの色に設定してください。

例えば「続きを読む」のリンクの色を変えたい場合は

～
<a href="<%topentry_link>#more">続きを読む</a>
～

これを次のように編集します。

～
<a href="<%topentry_link>#more"><font color="#0033FF">続きを読む</font></a>
～

これで「続きを読む」のリンクの色を変えることが出来ます。

スポンサーサイト

[ 2006/04/30 23:18 ] カスタマイズ共通カスタマイズ | TB(0) | CM(35)

カテゴリ３の背景の色を変える

中央カラムにあるカテゴリ３の背景色を変える方法を紹介します。

HTMLを編集します。


～
<table width="100%"><tbody><tr><td class="article" bgcolor="#000000">
～


上記例は背景を黒にする場合です。数値を変えてお好みの色に変更してください。

[ 2006/04/30 21:08 ] カスタマイズ standard 専用 | TB(0) | CM(0)

返信が遅れて大変申し訳ありません

この週末で全てにの質問に回答するつもりでしたが、ゴタゴタしてまとまった時間がありませんでした。質問者にはお待たせしてしまって誠に申し訳ありません。少しずつでも回答していきますのでもう少々お待ちください。

[ 2006/04/23 23:04 ] 雑記 | TB(0) | CM(4)

テーブル内の文字フォントを制御する

IE系のブラウザだとテーブル内の文字の色、大きさはデフォルトで見えてしまいます。

テーブル内の文字は次のタグで囲んでください。
<font color="#666666" size="2">文字</font>

完全に同じ大きさにすることは出来ないのですが、ほぼ同じ大きさで表示されるはずです。
色はお好みの色に合うように数値を設定してください。

[ 2006/04/16 02:10 ] カスタマイズ standard 専用 | TB(0) | CM(18)

タイトルを画像にする

タイトルを画像にする方法を紹介します。
ヘッダ背景を画像にして更にタイトルを画像にすることも可能です。

HTMLを編集します。

～
<h1><a href="<%url>"><%blog_name></a></h1>
～

これを次のように書き換えます。

～
<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="画像URL" border="0" /></a></h1>
～

これでタイトルを画像にすることが出来ます。

【2010/01/13 追記】サイト幅一杯の画像を使う場合はスタイルシートの末尾に以下を加えてください。

h1 {
margin-top: 0px; /* 上の余白 */
margin-left: 0px; /* 左の余白 */
margin-right: 0px; /* 右の余白 */
margin-bottom: 0px; /* 下の余白 */
}

上下の余白等はお好みに合わせて数値を設定してください。

[ 2006/04/13 00:13 ] カスタマイズ共通カスタマイズ | TB(1) | CM(203)

記事を枠で囲む

記事を枠で囲む方法を紹介します。バージョンにより多少カスタマイズ方法が違います

【2006/09/01 Ver.7 以降をお使いの方】

スタイルシートを編集します。

/**************** ▼ エントリーブロック(中央カラム) ▼ */
～
/* エントリー(記事)スタイル */
.article {
/* --------------------------------------------------- */
color: #666666; /* エントリー(記事)の文字の色 */
/* --------------------------------------------------- */
font-size: 80%; /* エントリー(記事)の文字の大きさ */
/* --------------------------------------------------- */
border: #ffffff 1px solid; /* エントリー(記事)の外枠 */
position:relative;
/* --------------------------------------------------- */
padding: 10px 1em 0;
line-height: 1.3;
margin-bottom: 2em;
}

記事を囲む枠の初期値は背景と同じ色に設定されているので見えません。赤い行の#ffffff部分の数値を変えてお好みの色に設定してください。

【Ver.6 以前をお使いの方】

HTMLを編集して赤い行を追加します。




<div class="kijiwaku">
～
</div>



スタイルシートを編集して次の記述を追加します。

.kijiwaku{
border: #cccccc 1px solid;
margin-bottom: 2em;
position:relative;
}

色を指定している部分「#cccccc」はお好みの色になるように数値を設定してください。
さらにスタイルシートにある記述を編集します。

/* エントリー(記事)ナビゲーション */
.bottom_navi {
text-align: right;
margin-bottom: 3em;
}

この「margin-bottom: 3em;」を削除するかコメントアウトします。

これで記事に外枠をつけることができます。

[ 2006/04/09 22:04 ] カスタマイズ standard 専用 | TB(0) | CM(67)

| HOME |

ブログ内検索1

サイトマップ

カテゴリ別全記事一覧表示

カテゴリ