MENU
  • プロフィール
  • 無料相談
  • サービス
    • オンライン自習講座
    • 単発レッスン
    • HP作成5回レッスン
  • 実績・お客さまの声
  • ブログ
  • お問合せ

    カテゴリー

    • WordPress
    • ブログ・SNS運営
    • 便利ツール
    • お知らせ
    • 活動実績・ご感想
    • プログラミング

    タグ

    ChatGPTHTML/CSSinstagramSEOSWELLWPプラグインアメブロエックスサーバーセキュリティデザイン見本初回無料相談制作実績単発レッスン技術ブログへ移動継続レッスン

    アーカイブ

    • 2025年10月
    • 2025年9月
    • 2025年8月
    • 2025年7月
    • 2025年6月
    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年3月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年9月
    • 2017年7月
    やりたいことを、自分で育てるWebの場所
    EmiのWebノート
    • プロフィール
    • 無料相談
    • サービス
      • オンライン自習講座
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    EmiのWebノート
    • プロフィール
    • 無料相談
    • サービス
      • オンライン自習講座
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    1. ホーム
    2. ブログ・SNS運営
    3. 【アメブロ】スマホデザインの変更方法

    【アメブロ】スマホデザインの変更方法

    2022 12/19
    ブログ・SNS運営
    2022-12-162022-12-19

    アメブロのデザインを自分好みにカスタマイズしたい方にむけて、今回は、スマホデザインを変更する方法を解説しています。

    目次

    パソコンとスマホのデザインは別々に設定

    動画でも設定方法を解説しています。

    アメブロのブログデザインは、
    ・パソコン
    ・スマートフォンブラウザ
    のそれぞれで設定できます。

    デザインはパソコンとスマホで連動していません。

    スマホで見たときのデザインをカスタマイズしたい場合、  
    パソコンからの設定とは別にスマホのAmebaアプリから設定する必要があります。

    スマホ版では、パソコンのようにヘッダー画像、グローバルメニュー、サイドバーなどを設定できたのですが、スマホ版は、それらが表示されません。

    スマホで変更できる箇所

    ・全体のデザイン
    ・記事一覧のレイアウト
    2箇所のみになります。


    スマホで変更できるのは全体デザインとレイアウトのみ

    ここから、変更の手順をお話ししていきます。

    Amebaアプリから、スマホ用の管理画面を立ち上げます。
    下の方に「デザイン・レイアウトの変更」を選びます。

    ブログデザインの設定から、
    デザインテンプレートを選びましょう。

    テンプレートを選ぶと
    ・ブログの背景色
    ・ヘッダー画像
    が変わります。

    ヘッダー画像や背景色はテンプレートごとに決まってるので、
    個別に変えることはできません。

    公式ブロガーの人のみ、オリジナルのヘッダー画像を入れることができます。

      
    続いて、右上の「レイアウト変更」ボタンから
    記事一覧のレイアウトを変えることができます。

    • スタンダード
    • ワイド
    • サムネなし

    3種類から選ぶことができます。

    スタンダード
    ワイド
    サムネなし

    タイトルと画像をバランスよく見てもらうスタンダードがおすすめです。

    レイアウトを決定したあと、
    「ブログを確認する」をタップすると、
    表示を確認できます。

    Amebaアプリではデザインは反映されません。

    スマホでアメブロをみるときには、
    SafariやChromeなどのブラウザで見る方法と
    Amebaアプリを使う方法、
    2つのやり方があります。

    そのうち、
    Amebaアプリから閲覧した際は、
    デザインが統一されており、
    個別にデザインの変更はできません。 

    Amebaアプリでブログを表示したとき

    パソコンと比べると、
    スマホはデザイン設定できる場所が限られています。 

    パソコンほど個性が出るものではないですが、
    ブログのイメージに合わせて
    デザインしてみてくださいね。

    他にもアメブロカスタマイズ方法を紹介しています!ぜひ、一緒にご覧ください↓

    あわせて読みたい
    自分でできる。アメブロのおしゃれなカスタマイズまとめ アメブロを、おしゃれにカスタマイズしたい! この記事では、アメブロのデザインをおしゃれにカスタマイズする方法を解説しています。 テンプレートそのままではなく、…
    ブログ・SNS運営
    アメブロ
    よかったらシェアしてね!
    中谷恵美
    東京在住のフリーランス。システムエンジニア、ITコンサルタントを経て、現在はホームページ・ブログ作成、集客などのレッスンをしています。

    趣味は、文房具、ゲーム。最近は英語学習中。運動が苦手で体が硬いのが悩み。最近、腰痛改善にピラティスを始めた。
    人気記事
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      ブログ・SNS運営
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      ブログ・SNS運営
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      ブログ・SNS運営
    • ブログで使えるタイトル付き囲み枠のCSS
      2022-12-21
      ブログ・SNS運営
    • 大人かわいいブログヘッダーの作り方
      2022-11-09
      ブログ・SNS運営
    WordPressの始め方

    目次