アメブロ(Amebaブログ)のCSSカスタマイズについて。主にサイドバーと広告の関係やフリースペースの上手な活用法についてメモしておこうと思います。
Amebaブログをカスタマイズするときの注意
- CSSカスタマイズができるのはPC版のみ
- PC版のカスタマイズも、カスタマイズ用のテンプレートでCSSを編集する程度
- サイドバーやグローバルメニューは「フリースペース」を使って作成する
- 「フリースペース」はbrタグがそのまま文字列で出力されたりするので、できる限り改行はbrではなく改行で行う。
- サイドバーの1パーツ目の後ろに強制で広告が入る。jQueryなどで後ろにずらす方法が昔はあったようだが、今は動かなかった。
- スマホ版とアプリ版はAmebaが独自の見た目を配信するので、カスタマイズを諦める。
↓まずうれしデザインさんの記事を読んで、カスタムCSSが入れられるPCテンプレートを選んで設定します。まずはそこから全てが始まる!!

難易度★(コピペだけでぐっと雰囲気変わる)
フォントをMS P ゴシックからメイリオに変える
/* (1-1) 基本テキスト全体
--------------------------------------------*/
/* 地色テキスト */
html {
color: rgba(0, 0, 0, 0.87); /*マテリアルデザイン推奨黒87%*/
}
body{
font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}
同じ場所を貼り替えるだけ。ついでに本文の色も上品にした。
メイリオにするだけでWindowsで見ても上品な感じに。
Macだとヒラギノ角ゴなので元からあまり気にならないかもしれないけど、Winだと実はメインがMS P ゴシックなんですよね。そのせいで古いイメージというかダサいイメージを生みます。そこで、後ろにあったメイリオを前に持ってきます。
1番前に持ってきてしまうとMacでもメイリオ最優先になってしまうので注意。
記事タイトルの見た目を変える
記事タイトルの見た目を変えると一気に普通のWordPressブログっぽくなります。
既に素敵な見出しサイトがたくさんあるので好きなものをコピペすれば良いと思います。
.skin-entryTitle が記事タイトルに相当するので、h2とか書いてあって配布しているコードを .skin-entryTitle に置き換えます。
.skin-entryTitle{
color: #d04255; /* 文字色 */
padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
position: relative;
}
.skin-entryTitle:before{
content: '**'; /*花に見せかけるためのアスタリスク*/
color: #fff; /* アスタリスクの色 */
display: inline-block;
font-size: 30px; /* アスタリスクの大きさ */
font-weight: bold;
position: absolute;
top: 0px;
left: 0px;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
text-shadow: 0px 0px 6px #EAA8BF, 0px 0px 4px #EAA8BF, 0 0 0.5px #EAA8BF; /* アスタリスク周りの影 */
}
.skin-entryTitle:after{
border-bottom: 2px dotted #EAA8BF; /* 下線 */
content: '';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
}
こんな感じ。
今回は女性っぽいガーリーな感じがほしかったのでこちらのサイトからお借りしました。

難易度★★(易しい)
CSSの基本がわかっていれば書けるレベル。background-imageとか、display:noneとか。
全般的なカスタマイズ
うれしデザインさんの「アメブロカスタマイズ講座まとめ」が最強なので、まずはここを読んで実践するのが吉。

私も「グローバルメニュー」のカスタマイズを使わせていただきました。コピペで動く!!すごい!!
ヘッダー画像のカスタマイズ
ヘッダー画像を置くとき、CSSでどこにつっこんだらいいかわからなくなるのでメモ。
/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-image: url(https://stat.blogskin.ameba.jp/…………);
width: 1120px;
height: ●●px;
margin: 0 auto; /*中央寄せ*/
}
bodyに背景画像をつけるときの注意
実は、あちこちにbackground-colorが入っているので、bodyに画像を設定しただけでは全然反映されません。自分のCSS書き方おかしいのかな(汗)みたいな自責になりがちですが、実は上から塗りつぶされているだけなのでした。
/* (1-2) 基本背景
--------------------------------------------*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
/*background-color: #ffffff;*/ /*このようにコメントアウトしてbgcolorを消す*/
}
↑こことかね。他にもあります。探すポイントは、デフォルトCSSの状態で「background-color: #ffffff;」で検索をかけることです。背景色変えるまえならすぐに見つかります。
今回は、ヘッダー画像が華やかだったので、bodyの背景画像はrepeat-yで縦に長くシンプルに演出することにしました。こういうときはIllustACとかじゃなく、古のホームページ時代から存在するweb*cirtonさんの素材がオススメ。
このページとか見てくださいよ!この左端の柄の可愛さ!!いいでしょ!!!イチ押し。
グローバルメニューの設置
もう、うれしデザインさんのコピペコードを改造すれば全て解決。HTMLさえわかってればドロップダウンも思いのままです。


トップにある「ページナビゲーション」と各種「一覧」を隠す
/* ヘッダーページナビゲーション */
.skin-blogHeaderNavInner,.skin-paging{
display:none;
}
これがあると最新記事のタイトルまでの間がとても長いので隠すことにしました。HTMLがいじれないので直接CSSでdisplay:noneにしてしまいました。
難易度★★★(HTMLが1から自分で書ける必要がある)
サイドバーをWordPress風にする
普通にやると、サイドバーにフリープラグインを入れてそこに入れたいものを入れたりすると思いがちなんですけど、実際はフリースペースだけで作ったら広告も入らず綺麗に作れました。理解のためのポイントをいくつか説明します。
「フリースペース」の性質
- 「フリースペース」はHTMLが使えるが、改行がbrの代わりになるのでbrの扱いに気をつける
- 「フリースペース」を「サイドバーの設定」で一番上に設置する。
- 「フリースペース」に記述する順番は「グローバルメニュー」→「サイドバーの中身」の順。
- なるべくプロフィールっぽいこともフリースペース内で書くようにすれば広告の前に全部終わる。
アメブロのサイドバーで広告の入る位置
サイドバーで1番上に設定したパーツの下に1つ目の広告が必ず入る仕様になっているみたい。
つまり、広告がフリースペースの後にくるということを利用して……
このようにすれば、一番上に広告がきてしまうのを防ぐことができる。
サイドバーウィジェットのタイトルをWordPress風にする
<div class="sidebar_widgettitle"><p>ウィジェットタイトル</p></div>
/* サイドバーウィジェットのタイトル
--------------------------------------------*/
.sidebar_widgettitle,
.skin-widgetHead{
background: #FF96A9; /*背景色*/
width: 300px;
height: 40px; /*縦の幅*/
display: flex;
justify-content: center;
align-items: center;
margin-bottom:15px;
margin-top:20px;
}
.sidebar_widgettitle p,
.skin-widgetTitle{
letter-spacing: 0.1em; /*文字間ちょっと調整*/
color: #FFF; /*文字色*/
font-size: 16px; /*文字サイズ*/
font-weight: normal; /*boldかは好みで*/
}
こんな風にすれば、WordPressテーマでよく見るサイドバーウィジェットタイトルの外見になります。
カスタマイズした感想
アメブロカスタマイズでは、かなりシンプルに書くことができます。
思ったよりハードルは高くなかったなって感じる理由は、CSSが複雑じゃないからでした。WordPressだとクラス指定がめちゃくちゃ長くて、追加CSSでひどい時はimportant濫用することになったりしますが、 今回はそれがなかった! 素直なCSS!!
サイドバーの既存のパーツを魔改造するのはなかなか大変。HTMLをいじれないので。だったらある程度既存のパーツを使うことを諦めて、自分でHTMLかけるフリースペースに色々突っ込んだほうが◎
というわけで、アメブロカスタマイズ体験記録でした。いや~勉強になったわ。