Web技術トピック&コラム

Script Topic 2014.01.04 (Sat)

アメーバブログ(アメブロ)カスタマイズ方法

アメーバブログでメイン画像を差し替えて、下にグローバルメニューをつける方法です。

まず「ブログデザイン」から「CSS編集用デザイン」テンプレートを選択適用しておきます。

メイン画像の差し替え方法

「CSS編集用デザイン」を編集画面へ移動。
「ブログデザインヘッダ・背景用画像の追加」から画像をアップロード。

画面下のCSS編集ボックスの

/* (3-2) ブログヘッダー--------------------------------------------*/

に下記を追記。

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{height:384px;/*画像の縦*/
background-image: url(http://stat.ameba.jp/画像のフルパス.gif);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center;/*中央に*/
}/* ←ブログヘッダーに背景画像を敷きたいとき */

メイン画像の下にグローバルメニューを追加する方法

「画像フォルダ」からあらかじめメニュー画像をアップロード。

「フリースペース編集」で下記を追記。

<div id="topmenu"><ul><li><a href="#" target="_blank"><img src="http://stat.ameba.jp/画像のフルパス.gif" alt="navi1" width="163" height="61" border="0" /></a></li><li><a href="#" target="_blank"><img src="http://stat.ameba.jp/画像のフルパス.gif" alt="navi1" width="163" height="61" border="0" /></a></li><li><a href="#" target="_blank"><img src="http://stat.ameba.jp/画像のフルパス.gif" alt="navi1" width="163" height="61" border="0" /></a></li><li><a href="#" target="_blank"><img src="http://stat.ameba.jp/画像のフルパス.gif" alt="navi1" width="163" height="61" border="0" /></a></li><li><a href="#" target="_blank"><img src="http://stat.ameba.jp/画像のフルパス.gif" alt="navi1" width="163" height="61" border="0" /></a></li><li><a href="#" target="_blank"><img src="http://stat.ameba.jp/画像のフルパス.gif" alt="navi1" width="165" height="61" border="0" /></a></li></ul></div>
  • ※<li>と<li>の間を改行していると勝手に<br>が入ってしまうので注意。

「ブログデザインのCSSの編集」の「(4) その他、拡張」に下記を追記。

#topmenu {width: 980px;/*スキンの幅A*/
}
#topmenu ul{
list-style:none;
margin:0;
padding:0;
}
#topmenu li {
margin:0;
padding:0;
float: left;
}

#frame {/*すでにある場合は必要ないです*/
position: relative;
}
#topmenu{
position: absolute;
top:405px;/*上から*/
z-index: 100;
}

ブログタイトルとブログ説明文を消す方法

「ブログデザインのCSSの編集」の最後に下記を追記。

/* ブログタイトルとブログ説明文を消す */
#header h1,.skinTitleArea{ /* ブログタイトルを消す */
display:none;
}
#header h2,.skinDescriptionArea{ /* ブログ説明文を消す */
display:none;
}

ヘッダー画像をブログトップへのリンクにする方法

.skinHeaderArea2,.skinBlogHeadingGroupArea{
padding:0;
}
.skinTitleArea{
display:block;
padding:0;  text-indent:-9999px;
}
.skinTitle{
display:block;
height:300px;
}

意外とクセがありアメブロ カスタマイズはやりずらかったです。
あとときどきサーバーが重い(;´Д`)

Web技術トピック&コラムの一覧へ