プロフィール

FC2BLOGカスタマイザー

FC2BLOGカスタマイザー

FC2ブログ十数件、アメブロ数件、Yahoo!ストア、Yahoo!オークションストア、カラーミーショップ、ビジネスサイト数件、趣味サイト数件を現在仕事とプライベートで管理・運営中。過去には他のASPやCMSもいろいろ。

全記事表示リンク
検索フォーム
ユーザータグランキング
最新コメント
<>+-

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

FC2ブログ共有テンプレート説明 wanted

wanted テンプレートイメージ
wanted_image.jpg

プラグイン3は、画像付きプロフィール専用になっていて、トップページでは中央に大きく、トップ以外のページでは、右サイドに表示するようになっています。

プロフィールに顔写真やイラスト、ペットの写真なんかを設定している人におすすめです。

これを利用する場合は、プラグインのプロフィールをプラグイン3に移動してください。
プラグイン3はこれしか機能しませんので、残りのプラグインはプラグイン1(左サイド)かプラグイン2(右サイド)に振り分けてください。

これを利用せずに通常のプロフィールを使う場合は、HTMLの次の2箇所を削除し、プラグイン1か2にプロフィールを設置してください。
<!--▽プラグイン3・画像プロフィール・トップページ用▽-->から
<!--△プラグイン3・画像プロフィール・トップページ用△-->まで
<!--▼プラグイン3・画像プロフィール・トップページ以外▼-->から
<!--▲プラグイン3・画像プロフィール・トップページ以外▲-->まで

サイド部分はデザイン的に中央揃えにしていますが、中央揃えにならない場合は、各プラグイン編集の「プラグインの改造 【HTMLの編集】を行います。(上級者向け)」をクリックし、表示されるHTMLの中から「&align」を削除してください。これは左・右・中央揃えを定義するfc2の独自変数で、CSSよりも優先されます。

例)<p &align> → <p>

サイドメニュータイトル文字などのぼかし影を取り除く場合は、HTMLかCSSまたは両方の「shadow」というclassを削除してください。

あと、一応いろいろなケースを想定してCSSを設定し、IE8・IE9・GoogleChrome・FireFoxで確認してますが、それでも見落としがあるかも知れません。表示崩れ等の不具合がありましたら、テンプレートを修正しますので、「FC2ブログ共有テンプレート作ってみた。WANTED張り紙風」のコメントにてお知らせ頂けると幸いです。 にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOG自作テンプレート
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

FC2ブログ共有テンプレート説明 grass_board_3colmn

grass_board3カラム テンプレートイメージ
3col.jpg

背景のコンクリート・木・ガラスは全て独立しているため、着せ替えが可能です。
3タイプ用意してますので、下記方法でイメージチェンジしてみて、気に入ったものを使用してください。
もちろん、独自に作った画像と差し替えても構いません。
コンクリートと木の部分はリピート画像になっています。

★背景画像の変更方法
CSSの次の部分を変更します。

全体背景画像(コンクリート部分)
body{background:url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/concrete_c.jpg);}

ヘッダータイトル画像
#header_content{background:url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/titleimg810_c.jpg);}

フッター背景画像(ウッド)
#b_background{background: url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/wood_c.jpg);}

aタイプ、bタイプ、cタイプ、それぞれ画像を用意していますので、
拡張子.jpgの前の「c」の部分を「a」「b」に変えるだけです。

aタイプイメージ
2col.jpg
bタイプイメージ
1col.jpg
cタイプイメージ
3col.jpg



上のイメージ画像では、それぞれカラム数が異なっていますが、
どのカラムのバージョンでもa,b,cの3タイプが利用可能です。

次のように#h_backgroundに背景画像を設定すると、
フッター部分のようにヘッダーにも背景画像を設定する事ができます。
#h_background{background: url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/wood_a.jpg);}
hback.jpg

フッター背景を削除する事もできます。
no_bbackjpg.jpg

#header_contentの背景画像がヘッダーのタイトル画像になってますが、
これを削除するとまた違った印象になります。
hback_notitleimg.jpg
notitleimg.jpg


背景色によっては文字が見難くなりますので、色やサイズを調整してご利用ください。

あと、一応いろいろなケースを想定してCSSを設定し、IE8・IE9・GoogleChrome・FireFoxで確認してますが、それでも見落としがあるかも知れません。表示崩れ等の不具合がありましたら、テンプレートを修正しますので、「FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ」のコメントにてお知らせ頂けると幸いです。

1カラムバージョン FC2ブログ共有テンプレート説明 grass_board_1colmn
2カラムバージョン FC2ブログ共有テンプレート説明 grass_board_2colmn にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOG自作テンプレート
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

FC2ブログ共有テンプレート説明 grass_board_1colmn

grass_board1カラム テンプレートイメージ
1col.jpg

背景のコンクリート・木・ガラスは全て独立しているため、着せ替えが可能です。
3タイプ用意してますので、下記方法でイメージチェンジしてみて、気に入ったものを使用してください。
もちろん、独自に作った画像と差し替えても構いません。
コンクリートと木の部分はリピート画像になっています。

★背景画像の変更方法
CSSの次の部分を変更します。

全体背景画像(コンクリート部分)
body{background:url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/concrete_b.jpg);}

ヘッダータイトル画像
#header_content{background:url(http://blog-imgs-51.fc2.com/o/r/e/oreshiten/titleimg810_b.jpg);}

フッター背景画像(ウッド)
#b_background{background: url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/wood_b.jpg);}

aタイプ、bタイプ、cタイプ、それぞれ画像を用意していますので、
拡張子.jpgの前の「b」の部分を「a」「c」に変えるだけです。

aタイプイメージ
2col.jpg
bタイプイメージ
1col.jpg
cタイプイメージ
3col.jpg



上のイメージ画像では、それぞれカラム数が異なっていますが、
どのカラムのバージョンでもa,b,cの3タイプが利用可能です。

次のように#h_backgroundに背景画像を設定すると、
フッター部分のようにヘッダーにも背景画像を設定する事ができます。
#h_background{background: url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/wood_a.jpg);}
hback.jpg

フッター背景を削除する事もできます。
no_bbackjpg.jpg

#header_contentの背景画像がヘッダーのタイトル画像になってますが、
これを削除するとまた違った印象になります。
hback_notitleimg.jpg
notitleimg.jpg


背景色によっては文字が見難くなりますので、色やサイズを調整してご利用ください。

あと、一応いろいろなケースを想定してCSSを設定し、IE8・IE9・GoogleChrome・FireFoxで確認してますが、それでも見落としがあるかも知れません。表示崩れ等の不具合がありましたら、テンプレートを修正しますので、「FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ」のコメントにてお知らせ頂けると幸いです。

2カラムバージョン FC2ブログ共有テンプレート説明 grass_board_2colmn
3カラムバージョン FC2ブログ共有テンプレート説明 grass_board_3colmn にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOG自作テンプレート
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

FC2ブログ共有テンプレート説明 grass_board_2colmn

grass_board2カラム テンプレートイメージ
2col.jpg

背景のコンクリート・木・ガラスは全て独立しているため、着せ替えが可能です。
3タイプ用意してますので、下記方法でイメージチェンジしてみて、気に入ったものを使用してください。
もちろん、独自に作った画像と差し替えても構いません。
コンクリートと木の部分はリピート画像になっています。

★背景画像の変更方法
CSSの次の部分を変更します。

全体背景画像(コンクリート部分)
body{background:url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/concrete_a.jpg);}

ヘッダータイトル画像
#header_content{background:url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/titleimg810_a.jpg);}

フッター背景画像(ウッド)
#b_background{background: url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/wood_a.jpg);}

aタイプ、bタイプ、cタイプ、それぞれ画像を用意していますので、
拡張子.jpgの前の「a」の部分を「b」「c」に変えるだけです。

aタイプイメージ
2col.jpg
bタイプイメージ
1col.jpg
cタイプイメージ
3col.jpg



上のイメージ画像では、それぞれカラム数が異なっていますが、
どのカラムのバージョンでもa,b,cの3タイプが利用可能です。

次のように#h_backgroundに背景画像を設定すると、
フッター部分のようにヘッダーにも背景画像を設定する事ができます。
#h_background{background: url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/wood_a.jpg);}
hback.jpg

フッター背景を削除する事もできます。
no_bbackjpg.jpg

#header_contentの背景画像がヘッダーのタイトル画像になってますが、
これを削除するとまた違った印象になります。
hback_notitleimg.jpg
notitleimg.jpg


背景色によっては文字が見難くなりますので、色やサイズを調整してご利用ください。

あと、一応いろいろなケースを想定してCSSを設定し、IE8・IE9・GoogleChrome・FireFoxで確認してますが、それでも見落としがあるかも知れません。表示崩れ等の不具合がありましたら、テンプレートを修正しますので、「FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ」のコメントにてお知らせ頂けると幸いです。

1カラムバージョン FC2ブログ共有テンプレート説明 grass_board_1colmn
3カラムバージョン FC2ブログ共有テンプレート説明 grass_board_3colmn にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOG自作テンプレート
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

未来記事の表示/非表示をコントロールする

■HTML

<!--topentry-->
<div class="display_none_<%topentry_year>">
<%topentry_body>
</div>
<!--/topentry-->

■CSS

.display_none_2030 {display:none;}

<%topentry_year>は投稿年の変数なので、この例の場合はコントロールしたい記事の投稿年を2030年で更新する。
そうすれば、その記事が表示される設定になっているページにて、
<div class="display_none_<%topentry_year>">の部分を通った時に
<div class="display_none_2030">となり、
CSSの.display_none_2030と一致し、{display:none;}非表示が適用される。
ifの分岐判定みたいな感じ。

これをモード(エリア)変数と組み合わせる事により、トップページだけに表示やカテゴリーページだけに表示という使い方ができる。
また、topentryの部分をrecentやarchiveに変える事により、プラグインの最新記事や月別の一覧にも未来記事を表示しないという事もできる。

<!--topentry-->内で使える変数であれば、この投稿年以外の変数でもコントロールできる。
例えば、<%topentry_category_no>を使えば、トップページに特定のカテゴリーの未来記事だけ非表示などできる。

実際に未来記事の表示をコントロールしているページ
目の症状 - パソコン病の予防と改善

一番上の商品と人気商品4つ、商品一覧のタイトルバーまでが未来記事で、それ以降が普通の記事。この未来記事は、カテゴリーページの「目の症状」だけに表示され、他のページでは表示しない。カテゴリーページを「新しい順」で表示、そして未来記事をコントロールする事により、カテゴリー毎におすすめ(人気)商品を常に一番上に表示している。

これを利用する事により、ネットショップのようなカテゴリー別のトップページを作る事ができる。ショップ風のアフィリエイトサイトやドロップシッピングサイトを作る場合に効果的。 にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOGカスタマイズ
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ
テンプレート
テンプレートに関する質問は、このブログでは受けつけておりません。複数のサイトやブログを運営しており、メインブログ以外はコメントに気がつかない事が多いからです。質問がある方は下記から、それぞれのテンプレートのリンクをクリックし、そちら(メインブログ)で質問をお願いします。
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼

sightseeingに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。スライドショー

moon_treeに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。奥入瀬

moon_treeに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。月と木

torn_paperに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。破れた紙風

wantedに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。WANTED張り紙風

glass_boardシリーズに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ
アクセスランキング
[ジャンルランキング]
コンピュータ 590位
[サブジャンルランキング]
Webサイト作成 23位
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。