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

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

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

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

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

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

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


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


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


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


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



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

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

HTMLを編集します。

<!--▼▼ プラグイン カテゴリー3 ▼▼-->

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

<!--▲▲ プラグイン カテゴリー3 ▲▲-->


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

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

この週末で全てにの質問に回答するつもりでしたが、ゴタゴタしてまとまった時間がありませんでした。質問者にはお待たせしてしまって誠に申し訳ありません。少しずつでも回答していきますのでもう少々お待ちください。
[ 2006/04/23 23:04 ] 雑記 | TB(0) | CM(4)

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

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

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

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

タイトルを画像にする

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

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/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を編集して赤い行を追加します。

<!--▼▼ メイン表示 ▼▼-->
<!--▼ エントリー(記事)▼-->
<!--topentry-->
<div class="kijiwaku">

</div>
<!--/topentry-->
<!--▲ エントリー(記事)▲-->


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

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


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

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

margin-bottom: 3em;
}

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

これで記事に外枠をつけることができます。
ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
03 | 2006/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

03 | 2006/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
ユーザータグ


△ ページトップへ戻る