Information

FC2BLOG共有テンプレートを作成・公開しているブログです。
各テンプレートの解説ページ内に、簡単なカスタマイズについて説明しています。
なお、導入・カスタマイズに関するサポート、リクエスト等は対応しておりません。予めご了承ください。

Template List

  • wm_proxima
    • wm_proxima
    • 2カラム/プラグイン対応※1→右、2→右(1の下)、3→記事上部(インデックスのみ)
    • 解説ページ サンプル
  • wm_proxima_R
    • wm_proxima_R
    • 2カラム/プラグイン対応※1→左、2→左(1の下)、3→記事上部(インデックスのみ)
    • 解説ページ サンプル
  • wm_wei
    • wm_wei
    • 1カラム/プラグイン対応※1→下(左)、2→下(右)、3→記事上部(インデックスのみ)
    • 解説ページ サンプル
  • wm_gienah
    • wm_gienah
    • 2カラム/プラグイン対応※1→右、2→右(1の下)、3→記事上部(インデックスのみ)/タイトル画像は自由に変更してください
    • 解説ページ サンプル
  • wm_gienah_R
    • wm_gienah_R
    • 2カラム/プラグイン対応※1→左、2→左(1の下)、3→記事上部(インデックスのみ)/タイトル画像は自由に変更してください
    • 解説ページ サンプル
  • wm_saiph
    • wm_saiph
    • 1カラム/プラグイン対応※1→下(左)、2→下(右)、3→記事上部(インデックスのみ)/タイトル画像は自由に変更してください
    • 解説ページ サンプル
  • wm_002
    • wm_002
    • 1カラム/左寄せ/プラグイン対応※1→左下、2→右下、3→記事上部(タイトル非表示)
    • 解説ページ サンプル
  • wm_001
    • wm_001
    • 1カラム/プラグイン対応※1→左下、2→右下、3→記事上部(タイトル非表示)
    • 解説ページ サンプル
  • wm_000

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Bookmark

ごく簡単なHTMLの説明 -- 要素タイプ一覧
分かりやすいHTMLの解説
CSS HappyLife ZERO
分かりやすいCSSの解説
Markup Validation Service
html文法チェック
スポンサーサイト

wm_gienah_R

wm_gienah_R
  • wm_gienah_R
  • 2カラム/プラグイン対応※1→左、2→左(1の下)、3→記事上部(インデックスのみ)/タイトル画像は自由に変更してください
  • サンプル

目次

はじめにお読みください

  • ライセンスは『Creative Commons 表示 - 継承 2.1 日本 (CC BY-SA 2.1)』です。
    内容を確認≫http://creativecommons.org/licenses/by-sa/2.1/jp/
  • ブラウザのCSS実装状況によってディテールの異なるパーツがあります。
  • 使用に際して生じたいかなる損害も当方は責任を負いません。
  • 導入・カスタマイズに関するサポートは行っておりません。

プラグインの表示位置について

プラグインの表示位置は以下のようになります。

  • 【プラグインカテゴリ1】 左
  • 【プラグインカテゴリ2】 左 (カテゴリ1の下)
  • 【プラグインカテゴリ3】 記事の上 ※インデックスページのみ表示

プラグインの設定は管理ページ>環境設定>プラグインの設定から行えます。

カテゴリ一覧をリストっぽくする

管理ページ>環境設定>プラグインの設定>(PC用)公式プラグイン追加に2つある『カテゴリ』のうち、『カテゴリ一覧を表示します(カスタマイズ向け)』の方を追加してください。

月別アーカイブをコンパクトにする

管理ページ>環境設定>プラグインの設定>(PC用)共有プラグイン追加 『アーカイブ』等の単語で検索すると省スペースのプラグインがヒットしますので、お好みで追加してください。

ページ下部の『pagetop』でページの上部まで戻ると、上端に検索バーがかぶってしまいます。
気になる場合は、管理ページ>環境設定>ブログの設定>検索バーの設定>検索バーの利用『利用しない』に設定して、検索バーを非表示にしてください。

全体幅を変更 (750px/850px/1000px)

  1. 管理ページ>環境設定>テンプレートの設定>『wm_gienah_R』のHTML CSSの編集から『wm_gienah_R のスタイルシート編集』フォームに移動します。
  2. 『wm_gienah_R のスタイルシート編集』フォーム内のコードを上から順に見ていき、
    /*================================================
    	1-レイアウト
    ================================================*/
    の直後の行から、
    /*================================================
    	2-全体共通
    ================================================*/
    の直前の行までを全て削除します。
  3. 以下から使用したい幅を選択し、リンク先にあるスタイルをコピーして、手順2で削除した部分に貼り付けます。
    幅750px / 幅850px / 幅1000px / ※変更前は幅950pxです
    ※変更後のスタイルにはタイトル画像のURLは含まれていませんので、【タイトル画像の変更】を参照してタイトル画像を設定してください。
    ※タイトル画像の横幅はそれぞれ 748px / 848px / 998px になります。
  4. 変更後、『wm_gienah_R のスタイルシート編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

基本文字サイズ・本文内リンク色等大まかな部分の設定を変更

  1. 管理ページ>環境設定>テンプレートの設定>『wm_gienah_R』のHTML CSSの編集から『wm_gienah_R のスタイルシート編集』フォームに移動します
  2. フォーム内にカーソルを移動し、Ctrl+Fでフォーム内のを検索すると、大まかな設定部分にジャンプすることができます(上から順に探してみてください)。

タイトル画像の変更

全体幅を変更 (750px/850px/1000px)を行っている場合、作成するタイトル画像の横幅はそれぞれ(748px/848px/998px)になります。

  1. 横948px × 縦任意のサイズのタイトル用画像(jpg/gif/png)を作成します。
  2. 管理ページ>ツール>ファイルアップロードの『サムネイル』の作成チェックを外して、作成したタイトル用画像をアップロードします
  3. ファイル一覧のタイトル用画像のアイコンをクリックして、画像を表示します
  4. ブラウザのURL欄に表示されている、タイトル用画像のURL(http://~)をメモ帳等にコピーして確保しておきます
  5. 管理ページ>環境設定>テンプレートの設定>『wm_gienah_R』のHTML CSSの編集から『wm_gienah_R のスタイルシート編集』フォームに移動します
  6. フォーム内のコードを上から順に見ていくと、以下のような部分があるので
    /* ↓タイトル画像の縦サイズと同じサイズを指定※ */
    padding-bottom: 200px;
    /* ↓タイトル画像(横948px×縦任意のサイズ)※ */
    background: url("http://blog-imgs-30.fc2.com/w/m/k/wmks/wm_gienah_R_title_image.jpg") left bottom no-repeat;
    ↓のように変更します
    /* ↓タイトル画像の縦サイズと同じサイズを指定※ */
    padding-bottom: ここに画像の縦サイズpx;
    /* ↓タイトル画像(横948px×縦任意のサイズ)※ */
    background: url("ここに手順4でコピーした画像のURL") left bottom no-repeat;
  7. 変更後、『wm_gienah_R のスタイルシート編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

インデックスページとその他のページで異なるタイトル画像を表示する

全体幅を変更 (750px/850px/1000px)を行っている場合、作成するタイトル画像の横幅はそれぞれ(748px/848px/998px)になります。

  1. インデックス用のタイトル画像とその他のページ用のタイトル画像 (jpg/gif/png)を用意します ※横948px × 縦はそれぞれ任意のサイズ
  2. 用意した画像をアップロードし、それぞれURLをコピーしておきます ※ファイルのアップロード等のやり方は【タイトル画像の変更】の手順1~4を参照してください
  3. 管理ページ>環境設定>テンプレートの設定>『wm_gienah_R』のHTML CSSの編集から『wm_gienah_R のスタイルシート編集』フォームに移動します
  4. フォーム内のコードを上から順に見ていくと、以下のような部分があるので
    #header {
    	/* ↓タイトル画像の縦サイズと同じサイズを指定※ */
    	padding-bottom: 200px;
    	/* ↓タイトル画像(横948px×縦任意のサイズ)※ */
    	background: url("http://blog-imgs-30.fc2.com/w/m/k/wmks/wm_gienah_R_title_image.jpg") left bottom no-repeat;
    	margin-bottom: 13px;
    	border: 1px solid #E1E1E1;
    	border-top: none;
    	overflow: hidden;
    	/zoom: 1;
    		-webkit-border-bottom-right-radius: 3px;
    		-webkit-border-bottom-left-radius: 3px;
    		-moz-border-radius-bottomleft: 3px;
    		-moz-border-radius-bottomright: 3px;
    		border-radius: 0 0 3px 3px;
    }
    ↓のように変更します
    #header {
    	/* ↓タイトル画像の縦サイズと同じサイズを指定※ */
    	padding-bottom: ここにその他のページのタイトル画像の縦サイズpx;
    	/* ↓タイトル画像(横948px×縦任意のサイズ)※ */
    	background: url("ここにその他のページのタイトル画像のURL") left bottom no-repeat;
    	margin-bottom: 13px;
    	border: 1px solid #E1E1E1;
    	border-top: none;
    	overflow: hidden;
    	/zoom: 1;
    		-webkit-border-bottom-right-radius: 3px;
    		-webkit-border-bottom-left-radius: 3px;
    		-moz-border-radius-bottomleft: 3px;
    		-moz-border-radius-bottomright: 3px;
    		border-radius: 0 0 3px 3px;
    }
    body#home #header {
    	/* ↓タイトル画像(インデックス用)の縦サイズと同じサイズを指定※ */
    	padding-bottom: ここにインデックスページのタイトル画像の縦サイズpx;
    	/* ↓タイトル画像(インデックス用)(横948px×縦任意のサイズ)※ */
    	background: url("ここにインデックスページのタイトル画像のURL") left bottom no-repeat;
    }
  5. 変更後、『wm_gienah_R のスタイルシート編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

上部メニュー項目の変更

  1. 管理ページ>環境設定>テンプレートの設定>『wm_gienah_R』のHTML CSSの編集から『wm_gienah_R のHTML編集』フォームに移動します
  2. 『wm_gienah_R のHTML編集』フォーム内のコードを上から順に見ていくと、以下のような部分があるので
    <!-- ▼メニュー -->
    <div id="menu">
    	<ul class="menu">
    		<li><a href="<%url>">Reset</a></li>
    		<li><a href="<%url>?xml">RSS</a></li>
    	</ul>
    </div>
    <!-- ▲メニュー -->
    ↓のようにお好みで変更します
    <!-- ▼メニュー -->
    <div id="menu">
    	<ul class="menu">
    		<li><a href="任意のURL">Home</a></li>
    		<li><a href="任意のURL">About</a></li>
    		<li><a href="任意のURL">Gallery</a></li>
    		<li><a href="任意のURL">Link</a></li>
    		<li><a href="任意のURL">Contact</a></li>
    	</ul>
    </div>
    <!-- ▲メニュー -->
  3. 編集後、『wm_gienah_R のHTML編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

Twitterのプロフィールウィジェットがプラグイン領域からはみだす時は

  1. http://twitter.com/about/resources/widgets/widget_profileに、『設定』『カスタマイズ』『デザイン』『サイズ』という部分がありますので、『サイズ』を選択します。
  2. 横幅の自動調整にチェックを入れます。※縦は任意のサイズ
  3. 設定後『完了&コード取得』をクリックし、表示されたコードをコピーし、フリーエリア等に貼り付けてください。

更新履歴

  • 2011/06/22 関連記事リスト・ツイートまとめ機能・記事下Twitterボタン用のスタイルを追加 ※気にならない場合は以前のままでも問題ありません
  • 2011/06/16 共有公開
  • 2011/06/15 共有申請

wm_proxima_R

wm_proxima_R
  • wm_proxima_R
  • 2カラム/プラグイン対応※1→左、2→左(1の下)、3→記事上部(インデックスのみ)
  • サンプル

目次

はじめにお読みください

  • ライセンスは『Creative Commons 表示 - 継承 2.1 日本 (CC BY-SA 2.1)』です。
    内容を確認≫http://creativecommons.org/licenses/by-sa/2.1/jp/
  • ブラウザのCSS実装状況によってディテールの異なるパーツがあります。
  • 使用に際して生じたいかなる損害も当方は責任を負いません。
  • 導入・カスタマイズに関するサポートは行っておりません。

プラグインの表示位置について

プラグインの表示位置は以下のようになります。

  • 【プラグインカテゴリ1】 左
  • 【プラグインカテゴリ2】 左 (カテゴリ1の下)
  • 【プラグインカテゴリ3】 記事の上 ※インデックスページのみ表示

プラグインの設定は管理ページ>環境設定>プラグインの設定から行えます。

カテゴリ一覧をリストっぽくする

管理ページ>環境設定>プラグインの設定>(PC用)公式プラグイン追加に2つある『カテゴリ』のうち、『カテゴリ一覧を表示します(カスタマイズ向け)』の方を追加してください。

月別アーカイブをコンパクトにする

管理ページ>環境設定>プラグインの設定>(PC用)共有プラグイン追加 『アーカイブ』等の単語で検索すると省スペースのプラグインがヒットしますので、お好みで追加してください。

ページ下部の『pagetop』でページの上部まで戻ると、上端に検索バーがかぶってしまいます。
気になる場合は、管理ページ>環境設定>ブログの設定>検索バーの設定>検索バーの利用『利用しない』に設定して、検索バーを非表示にしてください。

全体幅を変更 (750px/850px/1000px)

  1. 管理ページ>環境設定>テンプレートの設定>『wm_proxima_R』のHTML CSSの編集から『wm_proxima_R のスタイルシート編集』フォームに移動します。
  2. 『wm_proxima_R のスタイルシート編集』フォーム内のコードを上から順に見ていき、
    /*================================================
    	1-レイアウト
    ================================================*/
    の直後の行から、
    /*================================================
    	2-全体共通
    ================================================*/
    の直前の行までを全て削除します。
  3. 以下から使用したい幅を選択し、リンク先にあるスタイルをコピーして、手順2で削除した部分に貼り付けます。
    幅750px / 幅850px / 幅1000px / ※変更前は幅950pxです
  4. 変更後、『wm_proxima_R のスタイルシート編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

基本文字サイズ・本文内リンク色等大まかな部分の設定を変更

  1. 管理ページ>環境設定>テンプレートの設定>『wm_proxima_R』のHTML CSSの編集から『wm_proxima_R のスタイルシート編集』フォームに移動します
  2. フォーム内にカーソルを移動し、Ctrl+Fでフォーム内のを検索すると、大まかな設定部分にジャンプすることができます(上から順に探してみてください)。

上部メニュー項目の変更

  1. 管理ページ>環境設定>テンプレートの設定>『wm_proxima_R』のHTML CSSの編集から『wm_proxima_R のHTML編集』フォームに移動します
  2. 『wm_proxima_R のHTML編集』フォーム内のコードを上から順に見ていくと、以下のような部分があるので
    <!-- ▼メニュー -->
    <div id="menu">
    	<ul class="menu">
    		<li><a href="<%url>">Reset</a></li>
    		<li><a href="<%url>?xml">RSS</a></li>
    	</ul>
    </div>
    <!-- ▲メニュー -->
    ↓のようにお好みで変更します
    <!-- ▼メニュー -->
    <div id="menu">
    	<ul class="menu">
    		<li><a href="任意のURL">Home</a></li>
    		<li><a href="任意のURL">About</a></li>
    		<li><a href="任意のURL">Gallery</a></li>
    		<li><a href="任意のURL">Link</a></li>
    		<li><a href="任意のURL">Contact</a></li>
    	</ul>
    </div>
    <!-- ▲メニュー -->
  3. 編集後、『wm_proxima_R のHTML編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

Twitterのプロフィールウィジェットがプラグイン領域からはみだす時は

  1. http://twitter.com/about/resources/widgets/widget_profileに、『設定』『カスタマイズ』『デザイン』『サイズ』という部分がありますので、『サイズ』を選択します。
  2. 横幅の自動調整にチェックを入れます。※縦は任意のサイズ
  3. 設定後『完了&コード取得』をクリックし、表示されたコードをコピーし、フリーエリア等に貼り付けてください。

更新履歴

  • 2011/06/20 関連記事リスト・ツイートまとめ機能・記事下Twitterボタン用のスタイルを追加 ※気にならない場合は以前のままでも問題ありません
  • 2011/06/16 共有公開
  • 2011/06/15 共有申請

Pagination

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。