FC2ブログテンプレート設定方法

FC2ブログではオリジナルのテンプレートを作成してブログデザインをカスタマイズすることができます。オリジナルブログテンプレートを簡単に作成できる無料ツール「CSSEZ」はFC2ブログに対応していますので、それを利用してFc2ブログをオリジナルデザインにカスタマイズすることができます。

では早速CSSEZで作成したデザインのFC2ブログ テンプレートへの設定方法を説明します。

1. まず、CSSEZのデザイン作成画面でデザインを作成したら、ダウンロード画面のテンプレート形式で「FC2ブログ」を選択してデザインをダウンロードします。

ImageShack

2. デザインをダウンロードして、中を見てみるとpublic_htmlフォルダに二つのファイルが入っています。index.htmlとstyle.cssです。index.htmlはFC2ブログの管理画面からテンプレートのカスタマイズ機能で、HTMLとして使用し、style.cssはスタイルシートして使用します。

ImageShack

3. ではCSSEZで作成したオリジナルデザインをFc2ブログに設定しますので、Fc2ブログの管理画面 を開いてください。Fc2ブログの管理画面の左メニューから「テンプレートの設定」という項目をクリックします。

ImageShack

4. テンプレートの設定画面で、「ダウンロードしたテンプレートの一覧」から適当にデザインを「複製」してください。そうすると、xxx_copyというデザインが新たにできますので、そのFc2ブログテンプレートの「編集」という リンクをクリックしてください。

テンプレートの編集画面では、3つの欄があります。一番上の1行のみのテキスト欄はそのデザインの名前を記入するところです。適当な名前をつけてください。

2番目の大きなテキスト欄は、テキスト欄の上に書いてあるとおりHTMLを編集する場所です。CSSEZからダウンロードしたテンプレートに入っていたindex.htmlの内容をすべて コピーしてHTMLの編集欄に貼り付けてください。

5. 一番下にある大きな記入欄はスタイルシートを編集する欄です。CSSEZからダウンロードしたFc2ブログ用テンプレートのstyle.cssをメモ帳などで開いてすべての内容をスタイルシートの編集欄へ貼り付けてください。

これがすべて済んだら 「更新」ボタンをクリックすると、デザインを保存することができます。

あとは、デザインを適用してブログを確認してみてください。きちんとあなたのFc2ブログのテンプレートがオリジナルのものに変更されていれば完了です。

もし、何かわからないことがあれば、お気軽にこのエントリーにコメントしてください。

アメブロ用スキンCSSのカスタマイズと設定方法

オリジナルブログデザインを簡単に作成できる無料ツール「CSSEZ」はアメブロに対応しています。CSSEZを利用することでHTMLやCSSの難しい知識がなくても、簡単にオリジナルスキンを作成・カスタマイズすることができます。

アメブロはデザインの変更画面からCSSをカスタマイズすることで、オリジナルのスキンを設定することができます。CSSEZで作成したオリジナルデザインを、アメブロのスキンとして使用する方法を説明します。

まず、デザイン作成画面からオリジナルデザインを作成します。そして保存・ダウンロードをクリックしてアメブロ形式でスキンをダウンロードします。デザインをアメブロスキン形式でダウンロードしたら、中にstyle.cssというファイルが一つだけ入っていますので、それをメモ帳などで開いておいてください。

次にオリジナルデザインをアメブロのスキンに設定してブログをカスタマイズするために、アメブロの管理画面にアクセスします。

1. アメブロの管理画面を開き、アメブロのトップページから「デザインの変更」をクリックします。

「デザインの変更」をクリック

2. 次にアメブロのスキンを、下のほうへスクロールしていって、スタンダードデザインのベーシックテーマを選択します。

ベーシックを選択

3. そして、「カラムを変更」のところでCSSEZで作成したオリジナルデザインと同じレイアウトを選択し、保存をクリックします。保存が終わったら、上のほうにある「スキンCSSの編集」をクリックしてください。

レイアウトを選択後、スキンCSSをクリック

4. テキストエリアにCSSが記述されていると思いますので、そこにCSSEZからダウンロードしてメモ帳などに開いていた、オリジナルデザインの内容をすべてそのままコピー&ペーストしてください。最後に「保存」をクリックしてください。

これで、完了です。いかがでしょう。もし、アメブロでのスキンのカスタマイズ方法やオリジナルデザインの設定方法で質問があれば、お気軽にコメントをください。

アメブロスキン対応!知識不要の簡単ブログデザインツール『CSSEZ』