MENU

アメブロ(Amebaブログ)のCSSカスタマイズ

HTML & CSS & JS
  1. TOP
  2. Tips
  3. HTML & CSS & JS
  4. アメブロ(Amebaブログ)のCSSカスタマイズ

アメブロ(Amebaブログ)のCSSカスタマイズについて。主にサイドバーと広告の関係やフリースペースの上手な活用法についてメモしておこうと思います。

Contents

Amebaブログをカスタマイズするときの注意

  1. CSSカスタマイズができるのはPC版のみ
  2. PC版のカスタマイズも、カスタマイズ用のテンプレートでCSSを編集する程度
  3. サイドバーやグローバルメニューは「フリースペース」を使って作成する
  4. 「フリースペース」はbrタグがそのまま文字列で出力されたりするので、できる限り改行はbrではなく改行で行う。
  5. サイドバーの1パーツ目の後ろに強制で広告が入る。jQueryなどで後ろにずらす方法が昔はあったようだが、今は動かなかった。
  6. スマホ版とアプリ版はAmebaが独自の見た目を配信するので、カスタマイズを諦める。

↓まずうれしデザインさんの記事を読んで、カスタムCSSが入れられるPCテンプレートを選んで設定します。まずはそこから全てが始まる!!

基本が網羅されてるサイト
アメブロカスタマイズ講座まとめ | うれしデザイン アメブロカスタマイズ解説記事をまとめました。一通り順番に読んで、実装していけばアメブロのフルカスタマイズができます。（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 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
CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】 | 第0版 ブログをお持ちの方必見！ スタイルシートをコピペするだけでOKな、シンプル可愛い見出しを作成しました。 ※アイキャッチ画像では10個になってますが、徐々に増えて現在19…

難易度★★(易しい)

CSSの基本がわかっていれば書けるレベル。background-imageとか、display:noneとか。

全般的なカスタマイズ

うれしデザインさんの「アメブロカスタマイズ講座まとめ」が最強なので、まずはここを読んで実践するのが吉。

Akila

私も「グローバルメニュー」のカスタマイズを使わせていただきました。コピペで動く!!すごい!!

ヘッダー画像のカスタマイズ

ヘッダー画像を置くとき、CSSでどこにつっこんだらいいかわからなくなるのでメモ。

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-image: url(https://stat.blogskin.ameba.jp/…………);
width: 1120px;
height: ●●px;
margin: 0 auto; /*中央寄せ*/
}

CSSのbackground-imageのURLですが、外部URLだと画像が読み込まれなかったので、CSS編集画面の一番上にある画像アップロードからアップするか、アメブロの記事執筆エディタのサイドバーから画像をアップしたものを使用してください。

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さんの素材がオススメ。

このページとか見てくださいよ！この左端の柄の可愛さ！！いいでしょ！！！イチ押し。

フリー素材サイト
フリー素材web*citron – シンプルな壁紙,アイコン,テンプレートフリー素材 web*citron シンプルな壁紙、ア… シンプル、軽い、ほんのり可愛い。無料で使えるフリー素材とテンプレート。

グローバルメニューの設置

もう、うれしデザインさんのコピペコードを改造すれば全て解決。HTMLさえわかってればドロップダウンも思いのままです。

グローバルメニュー参考サイト
アメブロにグローバルメニュー（メニューバー）を設置するカスタマイズ | うれしデザイン アメブロカスタマイズの今回はグローバルメニュー（ナビゲーションバー）編です。初めてアメブロカスタマイズをされる方は↓の導入編の記事もご参照下さい。 グローバルメニ…

トップにある「ページナビゲーション」と各種「一覧」を隠す

/* ヘッダーページナビゲーション */
.skin-blogHeaderNavInner,.skin-paging{
display:none;
}

これがあると最新記事のタイトルまでの間がとても長いので隠すことにしました。HTMLがいじれないので直接CSSでdisplay:noneにしてしまいました。

難易度★★★(HTMLが1から自分で書ける必要がある)

サイドバーをWordPress風にする

普通にやると、サイドバーにフリープラグインを入れてそこに入れたいものを入れたりすると思いがちなんですけど、実際はフリースペースだけで作ったら広告も入らず綺麗に作れました。理解のためのポイントをいくつか説明します。

「フリースペース」の性質

  • 「フリースペース」はHTMLが使えるが、改行がbrの代わりになるのでbrの扱いに気をつける
  • 「フリースペース」を「サイドバーの設定」で一番上に設置する。
  • 「フリースペース」に記述する順番は「グローバルメニュー」→「サイドバーの中身」の順。
  • なるべくプロフィールっぽいこともフリースペース内で書くようにすれば広告の前に全部終わる。

うれしデザインさんにある「グローバルメニュー」のCSSを見ていただくと、absoluteを使って<nav>を浮かせてヘッダー画像の下に置いていることがわかります。なので、その下に普通にサイドバーの中身を書けばサイドバーの一番上に反映されるようなのです。

アメブロのサイドバーで広告の入る位置

サイドバーで1番上に設定したパーツの下に1つ目の広告が必ず入る仕様になっているみたい。

＜例１＞サイドバーに「プロフィール」→「記事一覧」の順で設置した場合。
サイドバーは上から、プロフィール→【広告】→記事一覧の順番になる。

＜例２＞サイドバーに「フリースペース(グローバルメニュー)」→「プロフィール」の順で設置した場合。
グローバルメニューはヘッダー下にabsoluteになるのでサイドバーには影響せず、サイドバーは上から、【広告】→プロフィールの順番に。広告がサイドバーの一番上に来てしまう。

つまり、広告がフリースペースの後にくるということを利用して……

＜例３＞サイドバーに「フリースペース(グローバルメニュー→何か画像とか)」→「プロフィール」の順でで設置した場合。
グローバルメニューはヘッダー下にabsoluteになるのでサイドバーには影響せず、サイドバーは上から、何か画像とか→【広告】→プロフィールの順番に。

このようにすれば、一番上に広告がきてしまうのを防ぐことができる。

サイドバーウィジェットのタイトルを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かけるフリースペースに色々突っ込んだほうが◎

というわけで、アメブロカスタマイズ体験記録でした。いや～勉強になったわ。

HTML & CSS & JS
CSS アメブロ
シェアしてね
  • URLをコピーしました！
Contents