Movable typeでCSSEZで作成したデザインを使用する方法。

マウス操作でブログテンプレートを作成することができる「CSSEZ」は、MovableTypeにも対応しています。そこで、ここでは、CSSEZで作成したテンプレートをMovable Typeに設定する方法を紹介します。

1. まずCSSEZでデザインを作成した後のダウンロード画面で、「テンプレートの形式」を「Movable type(TypePad)」に設定してデザインをダウンロードしてください。
ImageShack

2. フォルダを解凍すると、中には、system, index, archivesという3つのフォルダが入っています。
ImageShack

3. では、Movable Typeの管理画面へログインしてください。ログイン後、左側のメニューから「テンプレート」をクリックします。
ImageShack

4. 以下の対照表に合わせて、デザインをコピー&ペーストで貼り付けてください。全て貼り付けたら、再構築を行ってください。

ダウンロードしたデザインの構造は以下のようになっています。
- デザイン
  ├ system … システムタブ
  │ ├ trackback_list.html … トラックバックの一覧
  │ ├ cpending.html … コメント・保留
  │ ├ comment_preview.html … コメント・プレビュー
  │ ├ comment_list.html … コメントの一覧
  │ └ comment_error.html … コメント・エラー
  ├ index … インデックスタブ
  │ ├ styles-site.css … スタイルシート
  │ ├ index.html … メインページ
  │ └ archives.html … アーカイブページ
  └ archives … アーカイブタブ
    ├ entry.html … エントリー・アーカイブ
    ├ date.html … 日付・アーカイブ
    └ category.html … カテゴリー・アーカイブ

再構築を行ったら完了です。デザインが適用されているか確認してください。

また、デザインを作成していない方は、この機会にCSSEZ作成ページから、オリジナルデザインを作成してみてはいかがでしょうか。

JUGEMブログに、CSSEZで作成したテンプレートを設定するには。

JUGEMブログにCSSEZで作成したデザインを設定する方法を説明します。ロリポブログもJUGEMブログと同じシステムを使用しているので、ロリポブログの設定も、ほぼ同じだと思います。では、JUGEMブログへのデザイン設定方法です。

1. まず、CSSEZでデザイン作成後のダウンロード画面で、「テンプレートの形式」を「JUGEM(ロリポ)ブログ」に設定して、デザインをダウンロードしてください。
ImageShack

2. ダウンロードしたファイルを解凍すると、中にpublic_htmlというフォルダがあって、その中にstyle.cssとindex.htmlの二つのファイルが入っています。この二つのファイルをメモ帳などに開いておいてください。
ImageShack

3. では、JUGEMブログでログインしてください。ブログの管理画面へログイン後、左側メニューの「テンプレートの編集」をクリックしてください。
ImageShack

4. 「HTML編集フォーム」にindex.htmlの内容をそのまま貼り付け、「CSS編集フォーム」にstyle.cssの内容を貼り付けてください。最後に、「テンプレートを更新する」ボタンをクリックして、テンプレートを更新するのを忘れないようにしてください。

これで、JUGEMブログへのデザインの設定は完了です。ご自身のブログにデザインがきちんと適用されているかどうか確認してみてください。

まだ、デザインを作成していない方はCSSEZデザイン作成ページから、この機会にオリジナルデザインを作成してみてはいかがでしょうか。

Seesaaブログでオリジナルテンプレートを使用する方法

無料で使える簡単ブログデザインツール「CSSEZ」は、Seesaaブログにも対応しています。このエントリーでは、CSSEZで作成したブログデザインをSeesaaブログに設定する方法を説明します。

1. CSSEZでデザインを作成した後のダウンロード画面で、「テンプレートの形式」を「Seesaaブログ」に設定してダウンロードしてください。
ImageShack

2. ダウンロードしたファイルを解凍すると、中にpublic_htmlというフォルダがあって、その中にstyle.cssとindex.htmlの二つのファイルが入っています。この二つのファイルをメモ帳などに開いておいてください。
ImageShack

3. Seesaaブログの管理画面へログインします。ログイン後、真ん中あたりにある、「デザイン」という項目にマウスオーバーして、そこに出てきたメニューから「HTML」をクリックしてください。
ImageShack

4. 右端にある「HTMLの追加」というリンクをクリックしてください。HTMLが表示されたら、ここに先ほどダウンロードしたファイルのindex.htmlの内容を全てテキスト欄に貼り付けてください。そして、適当に名前を付けて、保存をクリックしてください。
ImageShack

保存したら、現在のHTML一覧のページに移動しますので、先ほど追加したHTMLの右側の「適用」をクリックしてください。

5. 次に上部のナビゲーションから「デザイン一覧」をクリックしてください。
ImageShack

6. そして、一番したの現在使用しているデザインの一覧から適当なタイトルをクリックしてください。そうするとスタイルシートの編集画面へと移動します。
ImageShack

そこで、CSSEZからダウンロードしたデザインのstyle.cssをテキスト欄に貼り付けて「スタイルシートを保存」をクリックしてください。

最後に再構築を行ってデザインの設定は完了です。ご自身のブログにデザインがうまく適用されているかどうか確認してみましょう。

もしまだ、デザインを作成していないならば、CSSの知識不要で簡単にブログデザインを作成できるCSSEZデザイン作成ページからデザインを作成してみてはいかがでしょうか。

ヤプログでのオリジナルスキン設定方法。

ヤプログでは、HTMLやCSSをカスタマイズしてオリジナルのブログデザインを作成することができます。CSSEZを利用すると、ヤプログ用のスキンを簡単に作成することができます。

では、CSSEZで作成したデザインのヤプログでの使用方法を説明します。

1. まずは、CSSEZでデザインの作成後のダウンロード画面で、「テンプレートの形式」を「ヤプログ」に設定してデザインをダウンロードしてください。
ImageShack

2. ダウンロードしたファイルを解凍すると、style.css, index.html, entry.html, archive.htmlの4つのファイルが入っています。これらをメモ帳などで開いておいてください。
ImageShack

3. ヤプログの管理画面へログインします。ログイン後、上部のナビゲーションメニューから「スキン」をクリックしてください。
ImageShack

4. そして左側のメニューで「フリースキン編集」をクリックしてください。
ImageShack

5. 先ほどCSSEZでダウンロードしたファイルをそれぞれ対応する欄にコピー&ペーストで貼り付けます。
ImageShack

対応するファイルは以下のとおりです。
スタイルシート … style.css
メインテンプレート … index.html
アーカイブテンプレート … archive.html
1記事テンプレート … entry.html

それぞれのファイルは、貼り付けるたびデザインを保存してください。

これで、ヤプログでのデザインの設定は完了です。ブログにデザインが適用されているかどうか、確認しましょう。

まだデザインを作成していない人は、CSSEZのデザイン作成ページから作成することができます。この機会に、自分だけのオリジナルデザインにトライしてみてはいかがでしょうか。

ライブドアブログでのテンプレート設定方法

CSSEZで作成したデザインをライブドアブログで使用する方法を説明します。livedoorブログ用デザインの設定は、5つのファイルをコピー&ペーストで貼り付けます。

1. まずCSSEZでデザインを作成した後のダウンロード画面で、「テンプレートの形式」をLivedoorブログに設定してデザインをダウンロードします。
ImageShack

2. ダウンロードしたデザインは圧縮されていますので、解凍ソフトで解凍してください。解凍したフォルダを開くと中にはstyle.css, index.html, entry.html, category.html, date.htmlの5つのファイルが入っています。
ImageShack

3. では、ライブドアブログの管理画面へログインしてください。そして、上部ナビゲーションから「カスタマイズ/管理」をクリックします。
ImageShack

4. 左側のメニューに「デザインの設定」という欄がありますので、そこをクリックしてください。
ImageShack

5. デザインの設定画面で、一番下まで画面をスクロールすると、「カスタマイズ」という選択肢がありますので、そこをクリックします。ここを選択すると、ライブドアブログでオリジナルデザインテンプレートを使用することができます。
ImageShack

6. ダウンロードした5つのファイルをそれぞれ対応する欄にコピペで貼り付けてください。
ImageShack

対応するファイルは以下のとおりです。
スタイルシート(CSS) … style.css
トップページ … index.html
個別記事ページ … entry.html
カテゴリアーカイブ … category.html
月別アーカイブ … date.html

それぞれを貼り付けたらその都度保存するのを忘れないように。

7. 全て貼り付けて保存し終えたら、左側メニューの上のほうにある「ブログに設定を反映(再構築)」から、ブログ全てを再構築してください。
ImageShack

これで、ライブドアブログでのデザインの設定は完了です。

まだ、デザインを作成していない方は、CSSEZのデザインの作成ページからデザインを作成することができます。CSSEZは、CSSや(X)HTMLの知識不要で簡単にオリジナルブログデザインを作成することができるオンラインツールです。

CSSEZで作ったデザインの、Wordpressテーマとしての使い方。

CSSEZで作成したブログデザインとWordpressは、最も相性の良い組み合わせのひとつです。Wordpressへのデザインの適用はとても簡単です。ここでは、画像付きで、CSSEZで作成したWordpress用テーマをWordpressで使用する方法を説明します。

1. まずCSSEZでデザインを作成後のデザインダウンロード画面で、「テンプレートの形式」をWordpressにしてWordpress用テーマをダウンロードしてください。
ImageShack

2. ダウンロードしたファイルを解凍すると同名のフォルダができます。そのフォルダを開くと中に、下の画像のような感じでさまざまなファイルが入っているのを確認してください。(ファイルのアイコンはお使いのパソコンによって異なります。)
ImageShack

3. フォルダごと全ての中身を/Wordpressのディレクトリ/wp-content/themes/にアップロードします。アップロードには、FFFTPなどのFTPソフトを使用すると簡単です。
ImageShack

4. 後は、Wordpressの管理画面へログインして、ナビゲーションメニューの「表示」から「テーマ」を選び、先ほどアップロードしたデザインをクリックして選択するだけです。これで、ブログにテーマが適用されたと思います。

簡単オリジナルWordpressテーマ作成ツール「CSSEZ」で、今すぐデザインを作成してみましょう!