アメブロのおしゃれなカスタマイズ方法まとめ｜CSSコピペ＆動画で初心者でもできる
目次
アメブロを、おしゃれにカスタマイズしたい！
この記事では、アメブロのデザインをおしゃれにカスタマイズする方法を解説しています。
テンプレートそのままではなく、おしゃれでテンションのあがるブログにカスタマイズしちゃいましょう。
パーツごとに紹介していますので、簡単にブログをアレンジできます♪
各記事には、手順をYoutubeの動画でものせています。
ぜひ自分好みにカスタマイズしてみてくださいね。
アメブロのカスタマイズのやり方
パソコン版とスマホ版のデザインの違い
アメブロをカスタマイズするための初期設定
まず、カスタマイズ用のテンプレートに変更しましょう。
アメブロにはさまざまなデザインが用意されていますが、自分でカスタマイズする場合には「CSS編集用デザイン」を使いましょう。
ブログ管理 > デザインの設定
下の方にある「カスタム可能」を選びましょう
「CSS編集用デザイン」を選びます。
同じ名前のテンプレートがいくつかありますが、それぞれ記事一覧のレイアウトが異なります。
- スタンダード（記事がそのまま表示される）
- リスト（タイトルと写真が縦に並ぶ）
- カード型（写真が大きく表示される）
お好みのレイアウトを選びましょう。
クリックすると、ページ全体のレイアウトを選ぶことができます。
２カラム（記事ページとサイドバーが並ぶレイアウト）が、記事が大きく表示できるのでおすすめです。
ブログデザインを選んで、「適用する」をクリックします。
CSSのカスタマイズ方法
CSS編集用デザインを選ぶと「デザインの設定」から「CSSの編集」を選択することができます。
入力欄にCSSを記述していくことでデザインを変更できます。
この後、それぞれのパーツごとに、設定方法を解説していきます。
パーツ別カスタマイズ方法
さまざまなデザインパターンを用意しているので、自分好みにアレンジしてみてください。
ヘッダー
ヘッダー画像はページを開いてまず１番に目に入る画像のことです。
ヘッダーサンプル
ヘッダーサンプル
ヘッダーサンプル
ヘッダーサンプル
まずはヘッダー画像を作ってみましょう。
ヘッダー画像が用意できたら、アメブロに設置します。
before
after
↓ヘッダー画像の設定方法
フォント
お好みのフォントで文章を読みやすくしましょう！
before
after
グローバルナビゲーション
グローバルナビゲーションとはヘッダー画像の上か下に表示される、メニューバーのこと。（グローバルメニューとも呼ばれたりします。）
メニュー（グローバルナビゲーション）
各ページへのリンクがまとまっていて、お客さまを目的のページに案内してくれます。
背景／文字色／リンク色の変更
サイドバー
before
after
メッセージボード
準備中です。
囲み枠
コピペするだけで、記事の中に囲み枠をいれられます！
以上、パーツごとのアメブロのカスタマイズ方法をご紹介しました！
お気に入りのデザインを試してみてくださいね＾＾
