JUGEMブログに「 カエテンジョイプラス 」の見た目の良いテンプレートを設置,設定する方法について詳しく解説していきます。
カエテンジョイプラスとは、下のような” 無料ブログで使える本格的 “なテンプレートです。
また、ベースカラー（基本色）も好きな色に設定できます。
では、さっそく設定変更していきます。
Contents
カエテンジョイプラス購入後
「 カエテンジョイプラス 」を購入すると、登録したメールアドレスに作者の坂井英晃さんから、専用の「メンバーズサイト」への案内が届きます。
メールから「メンバーズサイト」にログイン後、JUGEMブログ用テンプレートは
「 ご購入特典 」と書かれたところから、自由にダウンロードできます。
ダウンロードに「 回数制限 」などはないので、好きなだけダウンロードできます。
また、下の【*重要*】のところにあるように、「MAC」をお使いの方は、文字化け対策用にMAC用の無料テキストエディタ「 Cot Editor 」を使うことが推奨されています。
「 ご購入特典 」の「 一括ダウンロード 」を押すことで、下のように
“FanブログとJUGEMブログ”用のカエテンジョイテンプレートをダウンロードできます。
ダウンロードできたら、ブラウザの「ダウンロードアイコン」の「 保存フォルダを開く 」を押して
“カエテンジョイプラス”の「 購入特典フォルダ 」を開くと
「Fanブログ」と「JUGEMブログ」用のカエテンジョイテンプレートが、収められています。
今回使う「JUGEMブログ」用フォルダは、下のようになります。
テンプレートを「設置・変更」する際は、これを使います。
JUGEMブログにログインする
JUGEMブログにログインして「 デザイン→HTML・CSS編集 」へと進みます。
順序として、最初にHTMLを、新しく「カエテンジョイプラス」のHTMLに変更します。
今使っているテンプレートのHTMLはすべて削除して、新しく「カエテンジョイプラス」のHTMLを貼り直します。
1.今使っているテンプレートのHTMLをすべて削除する
2.新しくカエテンジョイプラスのテンプレートのHTMLを貼り付ける
こういった順序になります。
今使っているテンプレートのHTMLを削除する
「HTML編集フォーム」の中で「 左クリック→すべて選択 」を押します。
すべて青くなったら、次は「 左クリック→削除 」で全部削除してしまいます。
すべて削除されて、真っ白になりました。
この「空白になったHTML編集部分」に、今度はJUGEMブログ用の「カエテンジョイプラス」のHTMLを新しく貼り付けます。
JUGEMブログ用「カエテンジョイプラス」のHTMLをコピーして貼り付ける
次は、さっき”メンバーズサイト”からダウンロードした「カエテンジョイプラス」の
JUGEMブログ用フォルダの「 kx_jugem_html_JOY_全カラム共通_日付あり 」を選び
その中で「 左クリック→すべて選択 」をして
すべて青くなったら「 左クリック→コピー 」で、すべてコピーします。
JUGEMブログのHTML編集に、カエテンジョイプラスのHTMLを貼り付ける
再度、JUGEMブログの「空白になったHTML編集画面」に戻り、さっきコピーした
「カエテンジョイプラスのHTML」を新しく貼り付けます。
できたら、下の「 HTMLを編集 」ボタンで確定させてください。
これでJUGEMブログの「HTML部分」は、”カエテンジョイプラスのHTML”に変更されました
ただ、「ブログを確認する」でどうなったか確認してみると
現状では、こんな感じです。
“JUGEMブログのHTML”だけが「カエテンジョイプラス」のものに変更されて、CSSは元々のテンプレートのままになっているからです。
なので、次は JUGEMブログのCSS を「カエテンジョイプラス」のCSSに変更します。
今、使っているテンプレートのCSSを削除する
CSSの編集も、HTMLの時と「同じ要領」で進みます。
今度は「CSS編集フォーム」の中で「 左クリック→すべて選択 」を押します。
すべて青くなったら、次は「 左クリック→削除 」ですべて削除してしまいます。
真っ白になりました。
今度はこの「空白になったCSS編集画面」に、新しく「カエテンジョイプラス」のCSSを貼り付けます。
JUGEMブログ用「カエテンジョイプラス」のCSSをコピーする
また、カエテンジョイの”メンバーズサイト”からダウンロードした「カエテンジョイプラス」JUGEMブログ用フォルダのCSSファイル「 kx_jugem_css_JOY_2カラム右 」を選びます。
「 3カラム（左右にサイドバーあり） 」が良い方は、下の「3カラム」を選んでください。
開いたファイル内で「 左クリック→すべて選択 」を押します。
すべて選択されたら、次は「 左クリック→コピー 」で、すべてコピーします。
JUGEMブログのCSS編集に、カエテンジョイプラスのCSSを貼り付ける
再度、JUGEMブログの「空白になったCSS編集画面」に戻り、さっきコピーした
「カエテンジョイプラスのCSS」を「 左クリック→貼り付け 」で新しく貼り付けます。
できたら、下の「 CSSを編集 」ボタンで確定させてください。
上の「ブログを確認する」ボタンで、どうなったか見てみると
こんな感じに「2カラム」の綺麗な”カエテンジョイ”テンプレートになっていました。
ちなみに、元々のテンプレートはこれでした。
JUGEMブログのカスタマイズ用の「 custom04ex 」というテンプレートです。
カエテンジョイプラスのベースカラー（基本色）の変更方法
ベースカラー（基本色）の変更は、CSS編集の最初の方にある
「 ■ベースカラー 2ヶ所のカラーコードを変更してください 」の
background: #00080;
border-color: #00080;
この2つの「 #00080 (ネイビー・深い青)」の数字を、こちらのカラーコード表のサイトから http://www.colordic.org/ 自分の好きな色に変更するだけです。
たとえば「light pink( #ffb6c1 )」にしたい場合は、backgroundとborder-colorの数字を
「 #ffb6c1 」に変更して、下にある「 CSSの編集 」ボタンで設定を確定することで
このように「ライトピンク(light pink)」にベースカラーが変更されました。
他にもbackgroundとborder-colorの数字を「dark orange( #ff8c00 )」にすると
このように「ダークオレンジ」にベースカラーが変更されました。
まとめ、終わりに
JUGEMブログには元々「 デフォルトのテンプレート 」も備わっているものの、どれも「見た目が本格的」だとは言えません。
無料ブログで使える「 本格的なテンプレート 」というのは元々、種類や数が少ないものですし
「カエテンジョイプラス」のテンプレートを新しく入れることで
・見た目が良くなり、本格的な雰囲気になる
・SEO効果が高くなる
などの効果が生まれますので、興味のある人は試してみてください。
基本的な「 テンプレート設置 」や「 ブログカスタマイズ方法 」などはすべて専用の「メンバーズサイト」に載っていますし、WindowsだけでなくMACでも問題なく設置、設定が可能です
それでも「わからない部分」があれば、メンバーズサイトの「 お問い合わせ 」から作者の坂井英晃さんに気軽に質問することもできるので便利です。
当サイトだけの「特典」も用意してありますので
・本格的にブログ運営がしたい
・アフィリエイトで稼ぎたい
・アクセスアップがしたい
という方は、ぜひ注目してみてください。
