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

1コイン(500円)配布テンプレート使用方法ガイド

  • HOME »
  • 1コイン(500円)配布テンプレート使用方法ガイド

1コイン配布アメブロカスタマイズテンプレート使用方法ガイド

 

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

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

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

 

テンプレートによりデータ名が変わりますが、設置方法はすべて同じです。ここではアメブロのテンプレート「シンプルピンク」をサンプルに説明します。

どのテンプレートをご購入の方もこちらの手順通りお進めください。

 

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

アメーバブログ変更箇所

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

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

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

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

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

手順

データの確認

使用データ

ダウンロードしたデータで、カスタマイズに使用するのは2つのテキストデータです。

テンプレート名のCSS用データと、freespaceというフリースペースに貼る用のデータです。

 

(omakeというフォルダには記事内で使える装飾イラストをおまけで同梱してあります。otherというフォルダには予備のテキストデータが入っていますが基本的に使用しません。)

 

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

アメブロご説明画像

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

 

 

アメブロご説明画像

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

 

 

プロフィール画像

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

 

 

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

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

 

 

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

画像アップロード

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

 

 

画像アップロード

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

 

CSS編集

ヘッダー画像について

テンプレート名のデータをテキストエディダで開きます。(画像はmi)
開くことができればどんなエディダでもかまいません。

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

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

css

このようになります。

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

ヘッダー画像の高さを変えたい場合は、「360px」となっている2カ所を変更します。

例)高さ250pxの画像の場合

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

/* ブログタイトル説明文 */
.skin-headerTitle {
visibility :hidden;
width:1120px;
height:250px;
padding:0px;
}

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

css

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

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

css

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

 

 

フリースペース編集

フリースペース

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

 

 

フリースペース

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

 

 

フリースペース

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

 

 

フリースペース

freespaceというデータをテキストエディダで開き、コピーしてアメブロに貼付けます。

 

フリースペース

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

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

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

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

 

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

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

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

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

 

よくある質問

Q.サイドバーの一番上に無駄なスペースが出来てしまします
A.フリースペースの編集画面で、改行があると配置した場所に空白が出来てしまいます。フリースペースでテキストの途中や最後に改行がないか確認してください。

Q.メニューバーのリンク先のURLというものが分かりません
A.パソコンの基本操作についてはお応え出来かねます。「URL 初心者」等で調べますと詳しいサイトがありますので、そちらをご参考ください。

Q.ヘッダー画像が表示されないです
A.CSSへの記述方法に間違いがないかご確認ください。
background-image:url(○○○.png);

左右の括弧を消してしまっていたりすると上手く表示されません。

 

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

アメブロやCSSの基本的な使用方法についてのご質問にはお応えできかねます。ご自身での設置が難しい方は、1,500円(税別)にて設置代行をおこなっています。

アメーバブログのIDとパスワードをお伺いしますので、心配な方は設置完了後にパスワードをご変更してください。

テンプレートの不具合については早急に対処いたします。
またその他ご不明点などありましたら、お気軽にお問い合わせ下さい。

 

info

PAGETOP