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

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

プラグイン3の幅を広げる(standard)

以前にプラグイン3の幅を広げるカスタマイズを紹介しましたが、これはlightframeシリーズを対象にしたものでした。

今回はstandardシリーズを対象に、プラグイン3をサイト幅と同じ幅に広げてヘッダー直下に表示するカスタマイズを紹介します。

プラグイン3の幅を広げる(lightframe)

当サイトが提供するテンプレートは、プラグイン3が記事上部に表示されます。

左カラム(プラグイン1)と右カラム(プラグイン2)の間に表示されるプラグイン3を、サイト幅と同じ幅に広げてヘッダー直下に表示するカスタマイズを紹介します。

このカスタマイズは共有テンプレート lightframe シリーズを対象にしています。

カラムが落ちる(下に表示される)のは何故か?

私のテンプレートに限らず様々なテンプレートを使おうとしたとき、カラム落ち、すなわち左、右、中央の列のいずれかが下の方に表示されて崩れてしまうといったことがありませんか?

これはその列(カラム)の幅よりも大きな画像等を表示させようとしているために起こる現象です。これを回避するには2つの方法があります。

1.カラム幅より大きい画像等は使わない
2.カスタマイズして各カラム幅を大きく変更する

私のテンプレートはstandardなら画像に合わせて自動伸縮してくれるので崩れませんが、lightframeではこの現象が起こりえます。もし崩れてしまうようなら原因となる画像等を外すか、こちらの記事サイト幅を変更するを参考に各カラム幅を設定してください。
[ 2006/12/09 01:22 ] Q&A トラブル解決 | TB(0) | CM(66)

コメント欄の幅を変える

コメント欄の幅を変える方法を紹介します。
サイト幅を狭くした場合、コメント欄も狭くしなければコメント投稿画面で崩れてしまうことがあります。

サイト幅を変える(lightframeシリーズ)

"lightframe"シリーズのサイト幅を変更する方法を紹介します。
"standard"シリーズをお使いの方はこちらを参照してください。

テンプレートをバージョンアップ(Ver.7)しました

現在リリースしている全てのテンプレートについて諸機能を追加したバージョンアップ版(Ver.7)を再リリースしました。

主な変更点は次の通りです。

タイトルを画像にする

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

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; /* 下の余白 */
}


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

ヘッダー背景を画像にする

ヘッダーの背景に画像を入れる方法を紹介します。
スタイルシートの#headerに次の記述を加えます。

#header {

background: #ffffff; ※この背景色指定よりも下に記述してください

background-image: url(http://~);
height: 300px;


}

(http://~)に画像があるURLを入れてください。
heightには画像の高さを指定してください。

横幅は画像をサイトの幅に加工するのがよいかと思います。
サイト幅は初期設定(50em)で800px程です。

画像がサイトサイズにピッタリ合わなくても
繰り返しなしの中央寄せにすれば良いと思います。

#header {

background-image: url(http://~);
height: 300px;
background-repeat: no-repeat;
background-position: center;


}

<02/04追記>
青い部分は大文字で書いてください。IE,Operaでは小文字でも問題ないのですがFireFox,NetScape,では大文字でなければ有効にならないようです。


<02/11追記>
記述は小文字でも大文字でも構いません。
上手く表示されない原因は複数ありました。

1.背景の色をしている「background: #ffffff;」を消すか
  これより下に記述を挿入しなければならない

2.全角スペースが含まれると有効にならない
  ※(IE,Operaでは全角スペースが含まれても有効になります)

私の記事をコピーペーストした場合、行頭に全角スペースが含まれてしまうようになっていました。誠に申し訳ありません。改めて全角スペースを排除して掲載しました。



画像は左寄せ(left)や右寄せ(right)することもできます。

<04/13追記>
スタイルシートの「background-position」に%表示の数値を2つ設定することで微妙な位置設定も出来ます。

background-position: 5% 50%;

1番目の数値 左右に対応 少ないほど左 多いほど右
2番目の数値 上下に対応 少ないほど上 多いほど下


管理画面左メニューに「ファイルアップロード」があります。
これを使って画像ファイルをアップロードしてください。

あなたの好きな画像を背景にしてみましょう。
オリジナリティがぐっと増しますよ。是非挑戦してみてくださいね。

サイト幅を変える(standardシリーズ)

※こちらは当サイトのテンプレート、standardシリーズ用の記事です。
lightframeシリーズの場合はこちらになります。


私がリリースするテンプレートはカラム数可変ですが、3カラムで使うなら幅が狭く、2カラムなら少し広いと思います。

そこでサイト幅を変える方法を紹介します。

スタイルシートで次のようなところがあります。

.base_table {

  width: 50em;

}

上のほうにあるのですぐ見つけられると思います。
この数値を変えてお好みのサイズにカスタマイズしてください。

またブラウザサイズに合わせて可変するリキッドレイアウトにしたい場合は%で表記します。

.base_table {

  width: 100%;

}

こうすると画面全体まで幅が伸びます。

サイト幅を変えても左右のメニューカラムの幅は変わりません。メニュー幅を変えたい場合は次のところを変えます。

.left_width {

  width: 11em;

}

.right_width {

  width: 11em;

}

left_widthが左、right_widthが右のメニューカラムの幅を指定しています。

数値を変えてお好みのサイズにカスタマイズしてくださいね。
ブログ内検索1
プロフィール

いたお

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

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

いたおの他の運営サイト
カレンダー
10 | 2019/11 | 12
- - - - - 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をここに
今日の日付入りカレンダー

10 | 2019/11 | 12
- - - - - 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
ユーザータグ


△ ページトップへ戻る
FC2 Management