テンプレート設置マニュアル|プロが作ったアメブロテンプレート|無料でアメブロのテンプレートを配布

テンプレート設置マニュアル

ここでは、無料配布中の2カラムテンプレートの設置方法を説明します。
1つのデザインを例に説明しますが、他のデザインも基本的に同じ設置方法です。

設置方法

ダウンロードしたzipファイルの解凍

ダウンロードしたzipファイルを解凍すると、下記の4つのフォルダが入っています。

 

 

それぞれのフォルダの内容は、下記になります。
・CSS      (各色のCSSデータ)
・header_img  (ヘッダー画像各種)
・image     (各色の画像データ)
・ad_css    (補助CSSデータ)

 

アメブロ管理画面

まずはアメブロの管理画面に入ってください。
管理画面の左メニュー「ブログデザイン」をクリックしてください。

 

 

すると下に、「デザインの変更」が表示されるのでクリックしてください。

 

 

デザインの変更ページが表示されます。

 

 

下までスクロールし、「カスタム可能」ボタンをクリックします。

 

 

カスタム可能なデザインの一覧が表示されるので、「CSS編集用デザイン」を選びます。

 

 

下のように確認画面が開きますので、「適用する」ボタンをクリックしてください。

 

 

例としてメニュー右で作成します。
今の時点でのブログのデザインは下のようになっています。

 

 

CSSの設定

適用されたら開いてたウインドウを閉じ、再度左メニューから「ブログデザイン」→「デザインの変更」を選びます。そして適用中のデザインの「CSSの編集」を選んでください。

 

 

下のようにCSSの編集画面が表示されます。

 

 

CSSのフォルダを開きます。

 

 

2column_adフォルダを開きます。

 

 

2column_adフォルダを開くと、下のように各色のCSSとフリープラグイン用のファイルがあります。
ここでは、ブルーのデザインを適用したいと思います。
「blue.css」をテキストエディタで開きます。

 

 

テキストエディタで開くと、下記のようにCSSが書かれています。

 

 

下の方にスクロールしていくと、「http://www.ameblo-t.biz/〜〜〜」という箇所が複数あります。
画像を自分のサーバーにアップする場合は、画像のパスを自身のサーバのものに書き換えてください。

 

 

画像を自分のサーバーにアップして使用する場合は、「image」フォルダに画像が一式入っていますので、ご自身のサーバーにアップロードしてください。
また、補助用CSSが入った「ad_css」フォルダも画像と同様サーバーにアップしてください。

 

 

弊社サーバーの画像、補助CSSを使用する場合は、上記の作業は必要ありません。
基本的には自分のサーバーに画像をアップロードしてご使用する事をお薦めします。

 

※弊社サーバーの画像は数年は使用出来る状態にしておきますが、いつまで使用出来るかは保証は致しません。
※弊社サーバーに何らかの問題があった場合、それに伴いいかなる損害が発生しても一切の責任を負いません。ご了承ください。

 

CSSをコピーしたら、管理画面にペーストして保存してください。
元から入っているCSSは消してください。

 

 

ヘッダー画像の設定

次にヘッダー画像を選択します。
画像参照ボタンをクリックし、使用するヘッダー画像を選択してください。

 

 

ヘッダー画像は「header」フォルダに入っています。

 

 

使用したいヘッダー画像を選択してください。

 

 

選択したら「アップロード」ボタンをクリックしてください。

 

アップロードすると、アップロードされた画像が表示されるので、「この画像のパス」を選択し、コピーしてください。
下のCSS欄の下記箇所にペーストしてください。

 

background-image:url(ここにペースト);

 

 

ペースト後、ページ下部の「保存」ボタンで保存してください。

 

サイドバー、プラグインの設定

保存が終わったら、左メニューの「サイドバー」をクリックしてください。

 

 

表示された「プラグインの追加」をクリックしてください。
下記画面が表示されるので、「フリープラグイン」をクリックしてください。

 

 

ここに「freeplagin.txt」をペーストします。
先ほどの「CSS」→「2column_ad」フォルダ内の「freeplagin.txt」をテキストエディタで開いてコピーします。

 

 

コピーしたテキストを下記にペーストします。

 

 

「freeplagin.txt」にも「http://www.ameblo-t.biz/〜〜〜」という箇所があります。
補助CSSを自分のサーバーにアップした場合は、自分のサーバーのパスに書き換えてください。
弊社サーバーのデータを使用する場合は、変更する必要はありません。

 

ペーストしたら、「保存」ボタンで保存してください。

 

ちなみにこの箇所では、メルマガの登録フォームを記述出来ます。
不要であれば下記を削除してください。

 

 

次に左メニューの「配置設定」をクリックしてください。

 

 

「フリープラグイン」という項目があるので、それをドラッグして右に移動します。

 

 

「フリープラグイン」が右に移動出来たら、「保存」してください。

 

 

以上で、アメブロの設定は終わりです。
ブログを確認してみましょう。

 

完成、ブログの確認

下がテンプレート適用後のブログです。
上手く出来ましたでしょうか。

 

 


PAGE TOP