【アメブロ】スマホのデザインを変更するには？

今回は、アメブロのスマホデザインを変更する方法を解説しています。

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

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

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

でも、パソコンとスマホで連動していません。

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

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

有料版では部分的に変えられそう

有料版では、一部スマホのデザインを変更する機能があります。
私は有料にしていないので詳細わからないのですが、記事内の定型文デザインも入っているのかな？

スマホ：全体デザインとレイアウトの変更方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

見出しなど記事内の装飾をカスタマイズするには？

現状、スマホでは、見出しや囲み枠など記事内の装飾をCSS をカスタマイズはできません。

アメブロのテンプレートを使う

アメブロには記事のテンプレートが用意されています。

見出しや、写真、記事全体のテンプレートなどはこちらを利用するとスマホでも綺麗に表示されます。

スマホだと「T」の中に見出しの設定があります。

またその隣のテキストのアイコンで、その他のテンプレートが見れます。

テンプレートが豊富なので、デザインはなるべく公式のものを使って欲しいという意図があるのかなと思います。

オリジナルのデザインにするには：
記事のHTML表示に直接コードを入力

HTMLとCSSの知識が必要になりますが、直接コードを入れると記事のデザインができます。

通常表示に切り替えると、そのコードのデザインを確認できます。

よく使うデザインは、記事の下書きに保存しておいて、記事を複製したり、コードだけコピーして使うやり方がやりやすいかもしれません。

まとめ

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

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

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