アメブロカスタマイズをしてきました

妻の友人に頼まれて、アメブロをカスタマイズしてきました。

photo credit: Ka-GO would love to MEET The Project (or Shane) via photopin (license)

作業した内容

2時間ほどで作業した内容は、

• ヘッダー画像の設置
• ヘッダー下に固定メニューの設置

です。
この作業のために、デザインを「CSS編集用デザイン」に変更しました。

ヘッダー画像の設置

ヘッダー画像の設置は、デザインを「CSS編集用デザイン」に変更後、

• ヘッダー画像のアップロード
• ヘッダー画像のURL取得
• ヘッダー画像のURLをCSSに反映

を行いました。
CSSは、以下のように変更しました。

.skinHeaderArea{
    height:440px;
    background-image: url("http://XXXX.jpg");
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center;
}

ヘッダー下に固定メニューの設置

ヘッダー画像の設置でも悩みましたが、ヘッダー下に固定メニューの設置はもっと悩みました。
機能が用意されているかと思っていたら、そんなことはないようです。

妻の友人がこんな感じにしたいというアメブロのページの、ユーザーCSS(http://usrcss.ameblo.jp/skinで始まるCSS)を見てみたところ、サンプルを貼り付けらていることがわかりました。

カスタマイズ方法が紹介されていないかと検索すると、以下のページが見つかりました。
ヘッダー下にグローバルナビ(グローバルメニュー)を設置する方法｜アメブロを仕事に活用するためのアイデアノート

この紹介されている内容を元に、

• フリースペースにHTMLを貼り付けてメニュー数を調整
• CSSを貼り付けて色を調整

を行いました。

アメブロで機能が提供されているかと思っていたのが、意外にありませんでした。
カスタマイズ方法を紹介されているページはありがたかったです。
ユーザーCSSを参照できるようになってからは、サンプルがあるのかもと推測しやすかったです。