昨日は、書きモノばかりしていたので、
今日こそは、アメブロのカスタマイズ
でもしてみる。
無料で出来るみたいなので、
ちょっと試してみる。
「すごいアメブロテンプレート」
↓無料で試してみたい方はこちら↓
というのを使ってみることにする。
●ステップ１：フォームに必要事項を入力
下記URLまたは、上記バナー（画像）をクリックして、
「すごいアメブロテンプレート」 を頂く（笑）
● ステップ２：以下の記事をメモ帳などに、保存
・ CSS の内容（現在CSS の編集が可能なスキンを適用中の方）
・ フリースペースの内容
・ フリープラグインの内容
・ メッセージボードの内容
ついでに、私は、記事を全部保存（笑）
愛用のememoPadでね♪
●ステップ３：CSS設定を編集準備
「デザインの変更」→「カスタム可能」→「CSS編集用デザイン」を選択
CSS編集用デザインを選択すると出てくる
「カラム」設定。
以下、CSC適用前と適用後。
○ブログCSSを編集（入れ替え）する前
●ステップ４：フリースペースの表示位置を変える（マニュアル順番と異なるけど…）
フリースペースの表示位置を一番上に設定
（もちろん、省略可能なステップ）
●ステップ５：フリースペースの編集
用意されていたタグをコピー＆貼り付けし、
メニューバー（グローバルナビゲーション）を表示させる
ブログ・フリースペース編集後
●ステップ６：フリープラグイン設定
サイドバー設定→プラグインの追加→フリープラグインを開く
その後、用意されたタグを
フリープラグインへ、コピー＆貼り付け
その後、
サイドバー設定→サイドバー配置にて、
「フリープラグイン」を、使用する側へ移動させる
すると、フリーエリアサンプル（Free area sample）が出てきます。
●ステップ７：その他、モロモロ、カスタマイズをする。
７－１：
グローバルナビゲーションのリンクを設定
グローバルナビゲーションで表示させたい
記事やリンクを編集する。
編集する場所は、ステップ
で、貼り付けた、フリースペース。
HTMLタグを編集。
表示させたいURLをコピーして、
タグの指定場所に、貼り付けていく。
７－２：ヘッダーを設定
私は、ヘッダー画像を挿入する方法を選びました。
ので、ヘッダー画像を用意。
画像のサイズは横：900px／縦：110px
ヘッダーは、頂いたヘッダーに
文字だけ加えてみました。
画像ＵＰは、ＣＳＳを編集するので、
できるだけ、編集する前のＣＳＳを、
名前を付けて保存する、で、保存していくと、
ＣＳＳで、間違って、違うところを
編集してしまった時に便利です。
７－２－１：ヘッダー（ＴＯＰ）画像ＵＰ
デザインの変更→ＣＳＳ編集
にある、画像アップロードにて、画像をアップロードします。
その後、アップロードできたら、
画像が表示され、その下にＵＲＬが出てきます。
それを、コピー＆貼り付け（ペースト）するため、
「Ｃｔｒｌ」を押しながらＡを押すと、全て選択、で、
「Ｃｔｒｌ」を押しながらＣを押すと、コピー、の完了。
ちなみに、コピーされた画像パス（英数文字（ＵＲＬ））はこちら
http://stat.blogskin.ameba.jp/blogskin_images/20120506/13/f5/45/p/o09000110kobit92211336279099888.png
※個別に違うので、これは利用しないでください。
７－２－２：ＣＳＳ編集
コピーしたＵＲＬ（画像パス）を
ＣＳＳの指定された場所に、貼り付けます。
（編集前）
background:url(http://e32.in/bf/img/design2/2c/gray/header.png) no-repeat center top;
（編集後）
background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120506/13/f5/45/p/o09000110kobit92211336279099888.png) no-repeat center top;
場所は、
/*■■■ Header Setting ■■■*/
が目印。
「表示を確認する 」をクリックして、
保存をしないと、どうも、ちゃんと変更されないみたいだよ。
・・・
以上で、とりあえずは、
テンプレートを適用できているよ。
ただ、もっとカスタムする必要が
個人的にはあると思うので、
もっとカスタムしたい人は、
次の記事をお楽しみに～
というわけで、利用して見たい方は、
こちらを参照してね♪
「すごいアメブロテンプレート」
↓無料で試してみたい方はこちら↓
瀬戸口
参考になったと思ったら、
１回クリックして
ブログランキングへ１票お願いします♪
↓
ついでに、私は、記事を全部保存（笑）
愛用のememoPadでね♪
●ステップ３：CSS設定を編集準備
「デザインの変更」→「カスタム可能」→「CSS編集用デザイン」を選択
CSS編集用デザインを選択すると出てくる
「カラム」設定。
『無料版』は「2カラム・メニュー左」と
「2 カラムメニュー右」の２種のみに対応とのこと。
うん…私は、
「2 カラムメニュー右」 を選択したよ。
設定完了のページが出たら、
そこにある「CSSの編集をする」を選択。
「2 カラムメニュー右」の２種のみに対応とのこと。
うん…私は、
「2 カラムメニュー右」 を選択したよ。
設定完了のページが出たら、
そこにある「CSSの編集をする」を選択。
以下、CSC適用前と適用後。
○ブログCSSを編集（入れ替え）する前
○ブログCSSを編集（入れ替え）、途中経過１
●ステップ４：フリースペースの表示位置を変える（マニュアル順番と異なるけど…）
フリースペースの表示位置を一番上に設定
（もちろん、省略可能なステップ）
●ステップ５：フリースペースの編集
用意されていたタグをコピー＆貼り付けし、
メニューバー（グローバルナビゲーション）を表示させる
ブログ・フリースペース編集後
●ステップ６：フリープラグイン設定
サイドバー設定→プラグインの追加→フリープラグインを開く
その後、用意されたタグを
フリープラグインへ、コピー＆貼り付け
その後、
サイドバー設定→サイドバー配置にて、
「フリープラグイン」を、使用する側へ移動させる
すると、フリーエリアサンプル（Free area sample）が出てきます。
●ステップ７：その他、モロモロ、カスタマイズをする。
７－１：
グローバルナビゲーションのリンクを設定
グローバルナビゲーションで表示させたい
記事やリンクを編集する。
編集する場所は、ステップ
で、貼り付けた、フリースペース。
HTMLタグを編集。
表示させたいURLをコピーして、
タグの指定場所に、貼り付けていく。
７－２：ヘッダーを設定
私は、ヘッダー画像を挿入する方法を選びました。
ので、ヘッダー画像を用意。
画像のサイズは横：900px／縦：110px
ヘッダーは、頂いたヘッダーに
文字だけ加えてみました。
画像ＵＰは、ＣＳＳを編集するので、
できるだけ、編集する前のＣＳＳを、
名前を付けて保存する、で、保存していくと、
ＣＳＳで、間違って、違うところを
編集してしまった時に便利です。
７－２－１：ヘッダー（ＴＯＰ）画像ＵＰ
デザインの変更→ＣＳＳ編集
にある、画像アップロードにて、画像をアップロードします。
その後、アップロードできたら、
画像が表示され、その下にＵＲＬが出てきます。
それを、コピー＆貼り付け（ペースト）するため、
「Ｃｔｒｌ」を押しながらＡを押すと、全て選択、で、
「Ｃｔｒｌ」を押しながらＣを押すと、コピー、の完了。
ちなみに、コピーされた画像パス（英数文字（ＵＲＬ））はこちら
http://stat.blogskin.ameba.jp/blogskin_images/20120506/13/f5/45/p/o09000110kobit92211336279099888.png
※個別に違うので、これは利用しないでください。
７－２－２：ＣＳＳ編集
コピーしたＵＲＬ（画像パス）を
ＣＳＳの指定された場所に、貼り付けます。
（編集前）
background:url(http://e32.in/bf/img/design2/2c/gray/header.png) no-repeat center top;
（編集後）
background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120506/13/f5/45/p/o09000110kobit92211336279099888.png) no-repeat center top;
場所は、
/*■■■ Header Setting ■■■*/
が目印。
「表示を確認する 」をクリックして、
保存をしないと、どうも、ちゃんと変更されないみたいだよ。
・・・
以上で、とりあえずは、
テンプレートを適用できているよ。
ただ、もっとカスタムする必要が
個人的にはあると思うので、
もっとカスタムしたい人は、
次の記事をお楽しみに～
というわけで、利用して見たい方は、
こちらを参照してね♪
「すごいアメブロテンプレート」
↓無料で試してみたい方はこちら↓
瀬戸口
参考になったと思ったら、
１回クリックして
ブログランキングへ１票お願いします♪
↓