witchmakers_fc2

ごく簡単なHTMLの説明 -- 要素タイプ一覧

分かりやすいHTMLの解説

CSS HappyLife ZERO

分かりやすいCSSの解説

Markup Validation Service

html文法チェック

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

目次

• はじめにお読みください
• プラグインの表示位置について
• カテゴリ一覧をリストっぽくする
• 月別アーカイブをコンパクトにする
• ブログ上部のFC2検索バーについて
• 全体幅を変更 (750px/850px/1000px)
• 基本文字サイズ・本文内リンク色等大まかな部分の設定を変更
• タイトル画像の変更
• インデックスページとその他のページで異なるタイトル画像を表示する
• 上部メニュー項目の変更
• Twitterのプロフィールウィジェットがプラグイン領域からはみだす時は
• 更新履歴

はじめにお読みください

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

• 『wm_gienah_R』の目次に戻る

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

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

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

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

• 『wm_gienah_R』の目次に戻る

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

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

• 『wm_gienah_R』の目次に戻る

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

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

• 『wm_gienah_R』の目次に戻る

ブログ上部のFC2検索バーについて

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

• 『wm_gienah_R』の目次に戻る

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

1. 管理ページ＞環境設定＞テンプレートの設定＞『wm_gienah_R』のHTML CSSの編集から『wm_gienah_R のスタイルシート編集』フォームに移動します。
2. 『wm_gienah_R のスタイルシート編集』フォーム内のコードを上から順に見ていき、

   /*================================================
   	1-レイアウト
   ================================================*/

   の直後の行から、

   /*================================================
   	2-全体共通
   ================================================*/

   の直前の行までを全て削除します。
3. 以下から使用したい幅を選択し、リンク先にあるスタイルをコピーして、手順２で削除した部分に貼り付けます。
   幅750px / 幅850px / 幅1000px / ※変更前は幅950pxです
   ※変更後のスタイルにはタイトル画像のURLは含まれていませんので、【タイトル画像の変更】を参照してタイトル画像を設定してください。
   ※タイトル画像の横幅はそれぞれ 748px / 848px / 998px になります。
4. 変更後、『wm_gienah_R のスタイルシート編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

• 『wm_gienah_R』の目次に戻る

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

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

• 『wm_gienah_R』の目次に戻る

タイトル画像の変更

※全体幅を変更 (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 のスタイルシート編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

• 『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 のスタイルシート編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

• 『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編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

• 『wm_gienah_R』の目次に戻る

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

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

• 『wm_gienah_R』の目次に戻る

更新履歴

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

• 『wm_gienah_R』の目次に戻る

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

目次

• はじめにお読みください
• プラグインの表示位置について
• カテゴリ一覧をリストっぽくする
• 月別アーカイブをコンパクトにする
• ブログ上部のFC2検索バーについて
• 全体幅を変更 (750px/850px/1000px)
• 基本文字サイズ・本文内リンク色等大まかな部分の設定を変更
• 上部メニュー項目の変更
• Twitterのプロフィールウィジェットがプラグイン領域からはみだす時は
• 更新履歴

はじめにお読みください

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

• 『wm_proxima_R』の目次に戻る

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

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

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

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

• 『wm_proxima_R』の目次に戻る

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

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

• 『wm_proxima_R』の目次に戻る

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

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

• 『wm_proxima_R』の目次に戻る

ブログ上部のFC2検索バーについて

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

• 『wm_proxima_R』の目次に戻る

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

1. 管理ページ＞環境設定＞テンプレートの設定＞『wm_proxima_R』のHTML CSSの編集から『wm_proxima_R のスタイルシート編集』フォームに移動します。
2. 『wm_proxima_R のスタイルシート編集』フォーム内のコードを上から順に見ていき、

   /*================================================
   	1-レイアウト
   ================================================*/

   の直後の行から、

   /*================================================
   	2-全体共通
   ================================================*/

   の直前の行までを全て削除します。
3. 以下から使用したい幅を選択し、リンク先にあるスタイルをコピーして、手順２で削除した部分に貼り付けます。
   幅750px / 幅850px / 幅1000px / ※変更前は幅950pxです
4. 変更後、『wm_proxima_R のスタイルシート編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

• 『wm_proxima_R』の目次に戻る

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

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

• 『wm_proxima_R』の目次に戻る

上部メニュー項目の変更

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編集』フォームの下にある更新ボタンをクリックして、変更を反映します。

• 『wm_proxima_R』の目次に戻る

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

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

• 『wm_proxima_R』の目次に戻る

更新履歴

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

• 『wm_proxima_R』の目次に戻る