新CSS編集用デザインのカスタマイズ方法 目次

このページには、新CSS編集用デザイン向けの様々なカスタマイズ方法を説明した記事へのリンクを掲載しています。

旧CSS編集用デザインのカスタマイズはこちら

アメブロの旧CSS編集用デザインのためのカスタマイズ方法をまとめた目次記事です。ヘッダー画像の表示やグローバルナビの設置など、アメブロを自分らしくカスタマイズする方法を掲載しています。新しいカスタマイズのノウハウ記事やハウツー記事を追加した場合は、こちらの目次も更新しますので、時々チェックしてみて下さい。

ヘッダーおよびヘッダー周辺のカスタマイズ

ヘッダー画像を設置・表示する方法

アメブロの新CSS編集用デザインで、ヘッダー部にヘッダー画像を設置・表示するカスタマイズ方法について解説します。基本的な設定から画面いっぱいに表示する方法まで詳しく説明しています。

ヘッダー部の背景色や文字色を変える方法

アメブロの新CSS編集用デザインで、CSSを編集してヘッダー部の背景色や文字色を好みの色に変更するカスタマイズ方法を解説します。

標準ナビゲーションバーを消す(非表示にする)方法(新CSS)

アメブロの新CSS編集用デザインで、ヘッダー下に表示される標準のナビゲーションバーを消す（非表示状態にする）カスタマイズ方法を解説します。自前でグローバルナビを設置する場合などで邪魔に感じることがあれば参考にしてみて下さい。

ヘッダーにスライドショーを設置・表示する方法

アメブロの新CSS編集用デザインで、ヘッダー部にスライドショーを設置するカスタマイズ方法です。アメブロは基本的にJavaScriptを使えないため、CSSだけで（CSSアニメーションを使って）スライドショーを表示します。

グローバルナビ(グローバルメニュー、メニューバー)

ヘッダー下にグローバルナビを設置する方法

アメブロの新CSS編集用デザインで、フリースペースとCSSを使ってヘッダー下にグローバルナビを設置するカスタマイズ方法について解説します。5つボタンのシンプルなものからボタン数や色など好みで変更することが可能です。

グローバルナビにサブメニューを追加する方法

アメブロの新CSS編集用デザインで、フリースペースとCSSを利用して設置したグローバルナビにプルダウン型のサブメニューを追加するカスタマイズ方法を解説します。

ヘッダーの上にグローバルナビを設置する方法

アメブロの新CSS編集用デザインで、フリースペースとCSSを使ってヘッダーの上にグローバルナビを設置するカスタマイズ方法について解説します。ヘッダー下に設置する方法を流用して上側に移動させます。

ヘッダーの上下にグローバルナビを設置する

アメブロの新CSS編集用デザインで、フリースペースとCSSを使ってヘッダーの上と下に合わせて2つのグローバルナビを設置するカスタマイズ方法について解説します。ヘッダー下に設置する基本的な方法を流用して上側にも追加します。

グローバルナビを更にカスタマイズする簡単な例

アメブロの新CSS編集用デザインでフリースペースとCSSを使ってヘッダー下に設置したグローバルナビを、いろいろカスタマイズしてみる方法をご紹介します。

ページ背景のカスタマイズ

ページ全体の背景色の設定と背景画像を敷き詰める方法

アメブロの新CSS編集用デザインで、ページ全体の背景色を設定したり、画背景像を並べて敷き詰めるカスタマイズ方法について解説します。

フォントのカスタマイズ

表示フォントを変える（メイリオ、游ゴシック、BIZ UDPゴシック）

アメブロのCSS編集用デザインで、ページの表示に使うフォントを「メイリオ」「游ゴシック」「BIZ UDPゴシック」などにするカスタマイズ方法について解説します。新CSS編集用デザイン・旧CSS編集用デザインのどちらにも対応しています。

メッセージボードのカスタマイズ

メッセージボードに画像で飾り枠をつける

アメブロの新CSS編集用デザインでトップページに表示されるメッセージボードに画像を利用した飾り枠を付けて、目を引くデザインにするカスタマイズ方法をご紹介します。

記事部分のカスタマイズ

記事内の見出し(大・中・小)を分かりやすくカスタマイズする方法

アメブロの新CSS編集用デザインで、記事本文内の見出し(大、中、小)の表示をもっと分かりやすく、見やすく、見出しらしくするカスタマイズ方法について解説します。

コメント欄のカスタマイズ

コメント欄をふきだし風にする方法

アメブロの新CSS編集用デザインで、コメント欄を「吹き出し風」にするカスタマイズ方法を解説します。ユーザー間の交流が多くSNS要素の強いアメブロで交流の場となるコメント欄を会話風にできます。

サイドバーのカスタマイズ

スクロールでサイドバーやグローバルナビがズレる原因と防ぐ方法

アメブロのPC向け画面で、スクロールした時にサイドバーやフリースペースに設置したグローバルナビの位置がズレてしまう問題の原因と防ぐ方法について解説します。

サイドバーのプロフィール画像を大きく表示する方法

アメブロの新CSS編集用デザインで、サイドバーのプロフィール欄に表示されるサイズの小さいプロフィール画像を、もっと大きなサイズに拡大（変更）して表示するカスタマイズ方法について解説します。

サイドバーのプロフィール欄をシンプルにする方法

アメブロの新CSS編集用デザインで、サイドバーのプロフィール欄から「プロフィール画像」「名前」「フォローボタン」以外の項目を消してシンプルなプロフィール欄にするカスタマイズ方法について解説します。

サイドバーの「フォロー」や「一覧を見る」ボタンの大きさや色を変える方法(新CSS)

アメブロの新CSS編集用デザインで、サイドバーの「フォロー」ボタンや「一覧を見る」ボタンの、大きさや色を変えるカスタマイズ方法です。初期状態の、濃いグレーの「フォロー」ボタンや、控えめで存在感の薄い「一覧を見る」ボタンを、ブログのデザインに合わせてカスタマイズできます。

サイドバーの「フォロー」や「一覧を見る」ボタンを画像ボタンにする方法(新CSS)

アメブロの新CSS編集用デザインで、サイドバーにある「フォロー」ボタンや「一覧を見る」ボタンを、画像を使ったボタンに変更するカスタマイズ方法です。プロフィールとフォロワー、サイドバーの種類によって個別に設定することが可能です。

検索ボックスの色を変えるカスタマイズ方法（新CSS）

アメブロの新CSS編集用デザインで、ブログ内検索用の検索ボックスの色をデザインに合わせて好みの色に変更するカスタマイズ方法を解説します。通常時、入力時、ボタンのマウスホバー時などの色を変更することが可能です。

サイドバーのウィジェットのタイトルを英語に変えてみる

アメブロの新CSS編集用デザインで、サイドバーの各ウィジットのタイトル部分を、英語など別の表記で表示するカスタマイズ方法について解説します。

サイドバーのフォローボタンの表示テキストを変える方法

アメブロの新CSS編集用デザインで、サイドバーの「プロフィール」や「このブログのフォロワー」欄にあるフォローボタンに表示される「+フォロー」や「フォロー中」という表示を別のテキストに変えるカスタマイズ方法について解説します。

リンクに関するカスタマイズ

マウスホバー時にリンクを半透明化させない方法(新CSS)

アメブロの新CSS編集用デザインで、各種リンクがマウスホバー時（マウスカーソルをリンクに重ねた時）に半透明化されるようになっているのを無効化するカスタマイズ方法について解説します。半透明化によって問題が発生する場合に参考にして下さい。

トップページのカスタマイズ

リスト型トップページのカスタマイズ方法(新CSS)

アメブロの新CSS編集用デザインの「リスト型」のトップページのカスタマイズ方法を例を上げて解説します。記事のアイキャッチ画像がない場合のデフォルト画像表示、一行しか表示されない記事本文の出し部分の複数行表示など。

アメブロカスタマイズに関する基礎知識など

カスタマイズ向けのベースデザイン「CSS編集用デザイン」にする手順

アメブロをカスタマイズ専用のベースデザイン「CSS編集用デザイン」に変更する手順を解説します。現時点でアメブロのカスタマイズのためにユーザーが編集できるCSSが用意されているのは「CSS編集用デザイン」のみです。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

カスタマイズに使う画像のアップロード方法と画像のURLの取得方法

アメブロで画像を使ったカスタマイズをする場合に必要な、カスタマイズで使用する画像をアメブロにアップロードする方法と、アップロードした画像をCSSなどから呼び出すために必要な画像のURLを取得する方法について解説します。

CSSを編集してもブログに反映されない！その原因と対応方法

アメブロをカスタマイズしていて、CSSを編集したのになぜか編集結果がブログ画面に反映されないという場合に考えられる主な原因と、それぞれの原因に対する対応方法について解説します。

アメブロのカスタマイズに関する制限・制約・注意事項など

アメブロでは、カスタマイズする際にハマりやすいアメブロならではの制限・制約・注意事項などがあります。他の無料ブログシステムなどではあまり経験することが無いものもありますので、まとめてご紹介します。

「CSS編集用デザイン」は4つある！違いや特徴について解説

アメブロのカスタマイズ向けベースデザイン「CSS編集用デザイン」には同名で選択肢が4つもあります。これら4つの違いや特徴、見分け方、選ぶポイントなどについて詳しく説明します。

新CSS編集用デザインのヘッダーやカラムのレイアウトとサイズ

アメブロの新CSS編集用デザインをカスタマイズする際に参考になる、初期状態でのヘッダーの幅や、2カラム・3カラム各々の場合のメ記事領域やサイドバーの幅など、重要な部分のレイアウトとサイズについて説明します。