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

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

トップページのみ3カラム、他を2カラムにする。(lightframe)

トップページのみ3カラム、他を2カラムにするカスタマイズを紹介します。
以前このカスタマイズはstandardシリーズで紹介していましたが、今回はlightframeが対象です。
スポンサーサイト

記事上部に異なる背景画像のフリーエリアを表示

このカスタマイズはlightframeシリーズが対象です。

当サイトが配布している共有テンプレートはプラグイン3が記事上部に表示されますが、これに「異なる背景画像」となるとプラグイン3を使わずに直接HTMLを編集する必要があります。

記事タイトルの色を変える (lightframe)

共有テンプレート「lightframeシリーズ」において、記事タイトルの色を変更する方法を紹介します。

スタイルシートに以下のような箇所があります。このカラーコード等をお好きな様に設定してください。

/* ▼ 記事 ▼ */


/* ▽文字色とリンクの下線有無▽ */
h2 a:link { color:#555555; text-decoration:none; } /* 通常 */
h2 a:active { color:#555555; text-decoration:none; } /*実行中*/
h2 a:visited { color:#555555; text-decoration:none; } /*訪問済*/
h2 a:hover { color:#0000ff; text-decoration:none; } /*マウス*/
/* △文字色とリンクの下線有無△ */


/* ▲ 記事 ▲ */


プラグイン3のレイアウト (lightframe)

以前に共有テンプレートlightframeシリーズにおいて、記事と同じ幅であるプラグイン3の幅を広げるカスタマイズを紹介しました。
これはプラグイン3が、記事,プラグイン1,プラグイン2の上に、サイト全体と同じ幅で表示されるものでした。

今回は、プラグイン3を、プラグイン1と記事の上に表示するカスタマイズ
img20091008b.gif

そしてプラグイン3を、記事とプラグイン2の上に表示するカスタマイズを紹介します。
img20091008a.gif

ページナビゲーション(ページ送り)の前後を入れ替える

ページ下部に表示されるページナビゲーション(ページ送り)は、
「次ページ」で古い記事へ
「前ページ」で新しい記事へ
リンクしていました。

(新しい記事へ) ≪ 前ページ | HOME | 次ページ ≫ (古い記事へ)

共有テンプレート lightframeシリーズにおいて、これを
「次ページ」で新しい記事へ
「前ページ」で古い記事へ
リンクするようにカスタマイズします。

(古い記事へ) ≪ 前ページ | HOME | 次ページ ≫ (新しい記事へ)

記事とコメント欄の間にフリースペースを設置

共有テンプレート lightframeシリーズにおいて、記事とコメント欄の間にフリースペースを設けるカスタマイズを紹介します。

記事とコメント欄の間にはページ送りリンクが存在するため、その上か下(または両方)に表示します。

記事タイトルやプラグインタイトルを画像にする (lightframe)

当サイトが配布している共有テンプレート「lightframeシリーズ」において、記事タイトルやプラグインタイトルを画像にするカスタマイズを紹介します。

スタイルシートの末尾に以下を加えてください。

/* 記事タイトル */
.ently_title {
background-image: url("画像URL");
}

/* プラグイン1 */
.plugin1_title {
background-image: url("画像URL");
}

/* プラグイン2 */
.plugin2_title {
background-image: url("画像URL");
}

/* プラグイン3 */
.plugin3_title {
background-image: url("画像URL");
}



これでlightframeシリーズの記事タイトルやプラグインタイトルを画像にすることが出来ます。

プラグイン3をプラグイン1と2の上に表示する

以前に記事を左カラム、プラグインを中央と右カラムに表示する方法を紹介しましたが、プラグイン3の表示位置は記事の上のままでした。



当サイト配布のテンプレート「lightframeシリーズ」において、さらにプラグイン3をプラグイン1と2の上に表示する方法を紹介します。

20090820_2.gif

lightframeの左右の余白

当サイトが公開している共有テンプレート「lightframe」シリーズは、左右のカラムがコンテンツ枠ギリギリのところにあります。

ここに少し余白を設ける方法を紹介します。
スタイルシートの末尾に以下を加えてください。

#left {
margin-left: 10px; /* 左の余白 */
}

#right {
margin-right: 10px; /* 右の余白 */
}


これで余白ができます。

URL等の連続した半角英数字の折り返し

ブラウザは連続した半角英数字を途中で折り返しません。
それを1つの単語と捉えてしまうからです。

当サイトの公開している共有テンプレートであれば
standardシリーズは内包物に合わせて枠が広がり、
lightframeシリーズは枠をはみ出して表示されてしまいます。

lightframeシリーズのこの問題を解決する方法を紹介します。
スタイルシートの末尾に以下を加えてください。

/* 記事の折り返し */
.ently_text {
word-wrap: break-word;
}

/* コメントの折り返し */
.comment_text {
word-wrap: break-word;
}


これで連続した英数字でも枠内で折り返されます。

ブログ内検索1
プロフィール

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

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

いたおの他の運営サイト
カレンダー
11 | 2016/12 | 01
- - - - 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 31
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

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

11 | 2016/12 | 01
- - - - 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 31
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。