アメブロ　フルカスタマイズ

ヘッダー画像や背景画像のみならず、記事タイトルや枠、サイドバーの各要素のスタイルを変更する方法。HTMLとスタイルシートの知識が必須です。

【設定方法】

【使用画像について】

テンプレート内で使用する画像は、アメブロサーバーにアップロード後に画像URLを取得し、カスタマイズCSS内にコピー&ペーストの上、編集を行います。

アメブロサーバーへの画像アップロードは以下の2種類の方法があります。

通常、テンプレートで使用する画像は「テンプレート用画像のアップロード」を使用します。足りない場合は通常の記事用画像の併用で対応できます。

テンプレート用、通常の記事用画像のそれぞれの手順を説明します。

■テンプレート用の画像アップロードを使用する場合

■通常の記事用の画像アップロードを使用する場合

管理画面メニューから「設定・管理」を選択
「画像フォルダ」項目をクリック、画像をアップロード
アップした画像のURLを取得する。
アップロード後に表示される画像サムネイルをクリック、大きめの画像が出てくるので画像の上で右クリック
IEはの場合は”要素を調査”または“プロパティ”、chromeは”画像アドレスをコピー”、firefoxは”画像のURLをコピー”、safariは”イメージのアドレスをコピー”を選択して画像URLを取得
カスタマイズ用CSSに画像URLをコピペして編集・保存

【スタイル適用の流れ】

管理画面の編集・保存した内容は、カスタマイズ用スタイルとして、

http://usrcss.ameblo.jp/skin/templates/△△/▲▲/○○○○○○○○.css

…というCSSファイルに書き出されます（△△/▲▲/○○○○○○○○は各ユーザー毎に割り当てられた数字）。

カスタマイズCSSを保存すると、アメブロのフルカスタマイズ用テンプレートのソースコード内に、以下の順番で8個のCSSファイルが作成されます。

http://stat100.ameba.jp/ameblo/pc/css/amebabar/ameblo.common.hf.white-1.0.2.css
…　基本設定　編集不可
http://stat100.ameba.jp/ameblo/pc/css/amebabar/amebabar-1.1.0.css
…　アメーバナビ設定　編集不可
http://stat100.ameba.jp/ameblo/pc/css/newBlog-1.21.0.css
…　フォントの設定　編集不可
http://stat100.ameba.jp/p_skin/wu_pf_cssedit/css/skin.css
…　変更前のテンプレートのスタイル設定　編集不可
http://stat100.ameba.jp/blog/css/user/blogiineEntry.1.000.css
…　ブログ記事内で使用されるスタイル設定　編集不可
http://usrcss.ameblo.jp/skin/templates/△△/▲▲/○○○○○○○○.css
…カスタマイズ用CSS　管理画面で編集・保存したもの（△△/▲▲/○○○○○○○○には各ユーザー毎に割り当てられた数字が入る）
http://stat100.ameba.jp/blog/new/css/orgn/cssedit/cssedit.css
…　その他CSS　編集不可
http://stat100.ameba.jp/ameblo/pc/css/bigfooter-1.6.0.css
…　フッター用CSS　編集不可

CSSファイルは上から順に読み込まれ、スタイルの設定が被った場合には後で読み込んだファイルの設定内容に上書きされます。
カスタマイズの際には、1、3、４、あるいは5で設定されたデフォルトテンプレートのスタイルを、6のユーザーカスタマイズ用CSSで上書きします。

尚、2、7、8はアメブロ共通要素の設定になるため、カスタマイズには関係ありません。

【HTMLタグ構成】

アメブロテンプレートのタグ構成は下記にまとめています。（執筆準備中）