3,000円からの格安アメブロカスタマイズ。リーズナブルでハイクオリティなご依頼はこちら。2016年3月からの新CSS対応

オーガニックグリーン テンプレート使用方法ガイド

  • HOME »
  • オーガニックグリーン テンプレート使用方法ガイド

オーガニックグリーン テンプレート使用方法ガイド

 

テンプレートの配布は2017年3月20日をもちまして終了しております。このページは購入済みの方用に残しております。

再開の予定はありませんのでご了承ください。

尚購入済みの方のご相談はお気軽にお問い合わせ下さいませ。
DLmarketで購入

ご自身で用意していただくもの

organicgreen

ご自身で用意するものは画像2つとメニューの情報です。バナーが不要な場合は削除可能です。

①ヘッダー画像 (幅1120×高340px)

②グローバルメニューの項目名とリンク先 (6つ分)

②バナー画像 (幅280×高さは自由)

ヘッダー画像の高さはCSSを1カ所変更するだけで自由に変えられます。CSSの変更方法は後述します。

手順

データの確認

ダウンロードしたデータで、カスタマイズに使用するのは freespace.txt と organicgreen.txt の2つです。

 

 

アメブロを新・新CSSに変更する

アメブロご説明画像

自分のアメブロの管理画面より、デザインの変更>ページ下部の「カスタム可能」をクリック。

アメブロご説明画像

「CSS編集用デザイン」のスタンダード・リスト・タイルのいずれかから、お好きなものを選択します。

プロフィール画像

2016年の新・新CSSはプロフィール画像が丸いものです。以前のものと間違えないようにご注意ください。

アメーバブログ2カラムメニュー右

2カラム・メニュー右 を選択して、「適用する」をクリックします。他のレイアウトはデザインが崩れ使用不可です。かならずこちらのレイアウトを選択してください。

 

ヘッダー・バナー画像アップロード

画像アップロード

ご用意したヘッダー画像とバナー画像をアメブロ内にアップロードしていきます。デザインの変更>CSSの編集をクリックします。

 

 

画像アップロード

作成したヘッダー画像・ロゴ画像を選択してアップロードしてください。アップロードされた画像のパスを使用するので、メモ帳等のテキストエディダへコピーしておきます。

 

CSS編集

 

ダウンロードした「organicgreen.txt」のデータをテキストエディダで開きます。
開くことができればどんなエディダでもかまいません。

上から30行目あたりに、(ヘッダー画像のurlを記入してください)

という文章があります。そこに先ほどアップロードしたヘッダー画像のurlをコピーして貼付けて下さい。

 

background-image:url(ヘッダー画像のurlを記入してください);

background-image:url(http://○○○.png);

 

このようになります。

 

ヘッダー画像の高さを変えたい場合

ヘッダー画像の高さを変えたい場合は、36行目あたり「340px」となっている箇所を変更します。

例)高さ250pxの画像にしたい場合

/* ヘッダー幅 */
.skin-bgHeader  [amb-layout=”headerInner”]{
width:1120px;
height:340px;
}

 

/* ヘッダー幅 */
.skin-bgHeader  [amb-layout=”headerInner”]{
width:1120px;
height:250px;
}

 

 

出来たら、最初の行から最後の行まですべてコピーします。

css

アメブロのCSS編集画面に戻ります。
横のバーを一番下まで持っていきます。

最初からあるテキストは一切触らず残したまま、一番最後に先ほどコピーしたCSSを貼付けます。

貼付けたら、保存をクリックします。

今ブログを更新して確認すると横並びメニュー等など正しく表示されていませんが、次に続くフリースペース編集で正常になります。

 

フリースペース編集

フリースペース

バナー画像とメニューバーの設定をしていきます。設定・管理>配置設定 をクリック

 

 

フリースペース

「フリースペース」を使用する機能の一番上に配置して、保存します。

 

 

フリースペース

次は設定・管理>フリースペース編集をクリック

 

 

フリースペース

ダウンロードした「freespace.txt」をテキストエディダで開き、コピーしてアメブロに貼付けます。

フリースペース

青い背景の部分を各自変更してください。

前半の「バナーのリンク先URLを記入してください」「バナー画像のURLを記入してください」の2カ所がバナー画像についての記述で、
後半は横並びメニューバーについての記述です。

出来たら「保存」をクリックします。
ご自身のブログを開き、メニューのリンク先等に間違いがないかご確認ください。

以上でカスタマイズは完成です。

 

バナー画像がいらない場合

バナー画像を使用されない場合は、フリースペースの前半の

<a href=”バナーのリンク先URLを記入してください”><img src=”バナー画像のURLを記入してください”></a>

というテキストを削除します。

 

 

ご自身での設置が難しい方へ

 

アメーバブログやHTML・CSSの基礎知識についてのご質問にはお答え出来かねます。

ご自身での設置がどうしても難しい方は1,500円(税別)にて個別に設定させていただきます。

アメーバブログのIDとパスワードをお伺いしますので、心配な方は設置完了後にパスワードをご変更してください。
またその他ご不明点などありましたら、お気軽にお問い合わせ下さい。

info

PAGETOP