アメブロカスタマイズCSS編集方法を徹底解剖!初心者でも必ずできる
|
お知らせ(2016年3月8日追記)
2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。
新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次
>>こちらもどうぞ
このサイトでは、アメブロのCSS編集用画面の項目ごとのカスタマイズの方法を解説しています。パソコンの知識がなくても、根気よく取り組めば必ずカスタマイズができます。参考にしていただけたらうれしいです。
アメブロカスタマイズの要となるCSS編集用デザインの各コードの意味と装飾の方法を解説
初心者の方でも必ずできる!アメブロカスタマイズの目次です。
CSS編集用デザイン 完全ガイド
アメーバブログのスタイルシートの全てを徹底解説。
スタイルシートの逆引き辞典です。
- その0 ガイダンス
(1)文字のスタイル
-
- (1-1) 全体の文字
ブログ全体の文字色やリンク文字の設定、記事の日付やテーマの文字をカスタマイズ
- (1-1) 全体の文字
-
- (1-2) ブログタイトル文字
ブログヘッダー部のタイトルと説明文の文字サイズや、文字色の設定
- (1-2) ブログタイトル文字
-
- (1-3) 記事/メッセージボード内の文字のスタイル
ブログ記事タイトルとメッセージボードの文字の大きさや文字色の設定
- (1-3) 記事/メッセージボード内の文字のスタイル
(2) ボタンのスタイル
-
- (2-1) ボタン[横180px 縦35px]
Ameba会員登録ボタンのカスタマイズ(あまり必要ないかと思いますがとりあえず・・・)
- (2-1) ボタン[横180px 縦35px]
-
- (2-2) アイコン付きボタン[横128px 縦28px]
プロフィール下の4つのボタン(「読者になる」「アメンバーになる」「メッセージを送る」「プレゼントを贈る」)のカスタマイズ
- (2-2) アイコン付きボタン[横128px 縦28px]
-
- (2-3) ページ送りボタン
記事上の、ページ送りのボタンのカスタマイズ
- (2-3) ページ送りボタン
(3) エリアのスタイル
-
- (3-1) ボディ(全体)・ブログの背景色のカスタマイズ①
ブログの背景に色を付けるカスタマイズ
- (3-1) ボディ(全体)・ブログの背景色のカスタマイズ①
-
- (3-1) ボディ(全体)・ブログの背景色のカスタマイズ②
ちょっと凝ったブログ背景のカスタマイズの仕組みの解説
- (3-1) ボディ(全体)・ブログの背景色のカスタマイズ②
-
- (3-1) ボディ(全体)・ブログの背景色のカスタマイズ③
ちょっと凝ったブログ背景のカスタマイズ方法(背景画像挿入編 前編)
- (3-1) ボディ(全体)・ブログの背景色のカスタマイズ③
-
- (3-1) ボディ(全体)・ブログの背景色のカスタマイズ④
ちょっと凝ったブログ背景のカスタマイズ方法(背景画像挿入編 後編)
- (3-1) ボディ(全体)・ブログの背景色のカスタマイズ④
-
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ②
ブログのヘッダーに背景色を設定するカスタマイズ その1
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ②
-
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ③
ブログのヘッダーに背景色を設定するカスタマイズ その2
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ③
-
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ④
ブログのヘッダーに背景色を設定するカスタマイズ その3
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ④
-
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ⑤
ヘッダーに画像を挿入する方法 準備編
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ⑤
-
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ⑥
ヘッダーに画像を挿入する方法 実践編
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ⑥
-
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ⑦
ヘッダーに画像を挿入する方法 横幅が小さい画像を入れたいとき 実践編その2
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ⑦
-
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ⑧
タイトルと説明文付きのヘッダー画像を用意した場合の、既存のタイトル文字と、説明文のカスタマイズ方法
- (3-2) ブログヘッダー・ブログヘッダーのカスタマイズ⑧
-
- (3-3) コンテンツエリアのカスタマイズ
記事とサイドメニューを包括するエリアに、背景色を設定するカスタマイズ
- (3-3) コンテンツエリアのカスタマイズ
-
- (3-5) メッセージボードのカスタマイズ
メッセージボードのカスタマイズ
- (3-5) メッセージボードのカスタマイズ
-
- (3-6) 記事 のカスタマイズ①
記事をカスタマイズする前に・・・準備編
- (3-6) 記事 のカスタマイズ①
-
- (3-6) 記事 のカスタマイズ②
記事のタイトルに色つきの帯を設定するカスタマイズ
- (3-6) 記事 のカスタマイズ②
-
- (3-6) 記事 のカスタマイズ③
記事本文の部分と、記事フッターに背景色を設定する方法
- (3-6) 記事 のカスタマイズ③
-
- (3-6) 記事 のカスタマイズ④
記事本文の文字サイズと文字色のカスタマイズ
- (3-6) 記事 のカスタマイズ④
-
- (3-6) 記事 のカスタマイズ⑤
記事背景に角丸の枠をつけるカスタマイズ
- (3-6) 記事 のカスタマイズ⑤
-
- (3-7) サイドバーエリアのカスタマイズ(ブログの幅を理解する)
ブログのカラム構造を再度確認しましょう
- (3-7) サイドバーエリアのカスタマイズ(ブログの幅を理解する)
-
- (3-8) サイドバー メニューのカスタマイズ①・基本理論編
サイドメニューの構造を理解しよう
- (3-8) サイドバー メニューのカスタマイズ①・基本理論編
-
- (3-8) サイドバー メニューのカスタマイズ②・背景色のカスタマイズ
サイドメニューに背景色を設定しよう
- (3-8) サイドバー メニューのカスタマイズ②・背景色のカスタマイズ
-
- (3-8) サイドバー メニューのカスタマイズ③・背景色のカスタマイズ(解説編その1)
サイドメニューに背景色を設定しよう(解説編その1)
- (3-8) サイドバー メニューのカスタマイズ③・背景色のカスタマイズ(解説編その1)
-
- (3-8) サイドバー メニューのカスタマイズ④・背景色のカスタマイズ(解説編その2)
サイドメニューに背景色を設定しよう(解説編その2)、と実践編
- (3-8) サイドバー メニューのカスタマイズ④・背景色のカスタマイズ(解説編その2)
-
- (3-8) サイドバー メニューのカスタマイズ⑤・サイドメニュータイトルの文字のカスタマイズ
サイドメニューのタイトル文字のカスタマイズ
- (3-8) サイドバー メニューのカスタマイズ⑤・サイドメニュータイトルの文字のカスタマイズ
-
- (3-8) サイドバー メニューのカスタマイズ⑥・サイドメニューに角丸の枠画像をつけるカスタマイズ
サイドメニューに角丸の枠をつけるカスタマイズ
- (3-8) サイドバー メニューのカスタマイズ⑥・サイドメニューに角丸の枠画像をつけるカスタマイズ
-
- (3-8) サイドバー メニューのカスタマイズ⑦・サイドメニュータイトルに画像を設定する
サイドメニュータイトルを画像にする方法
- (3-8) サイドバー メニューのカスタマイズ⑦・サイドメニュータイトルに画像を設定する
-
- (3-9) サイドバーの リスト画像、ボーダーのアメブロカスタマイズ
サイドメニューの文字下のボーダーの線の太さと、色のカスタマイズ
- (3-9) サイドバーの リスト画像、ボーダーのアメブロカスタマイズ
-
- (3-9) サイドバーの リスト画像、ボーダーのアメブロカスタマイズ その2
サイドバーのメニューにリスト画像を設置しよう
- (3-9) サイドバーの リスト画像、ボーダーのアメブロカスタマイズ その2
-
- (3-10) コメント欄、トラバ欄、記事一覧などの一覧のアメブロカスタマイズ
コメント欄をカスタマイズしよう
- (3-10) コメント欄、トラバ欄、記事一覧などの一覧のアメブロカスタマイズ
その他のカスタマイズ
読者登録ボタン
- 新CSSに読者登録ボタンを置こう・ステップ1・アメブロカスタマイズ 新CSS編集用デザイン編
- 新CSSに読者登録ボタンを置こう・ステップ2・アメブロカスタマイズ 新CSS編集用デザイン編
- 新CSSに読者登録ボタンを置こう・ステップ3・アメブロカスタマイズ 新CSS編集用デザイン編
- 読者登録ボタンを記事の上に表示するアメブロカスタマイズ