アメブロ スマホのデザインをCSSでカスタマイズする方法

この記事を読むのに必要な時間は約 7 分です。

[アイキャッチモデル: 茜さやさん]

このブログは基本的に、メンタルセラピストやスピリチュアル系を仕事にしている方もしくはしたい方で、ITが苦手な方を対象にしています。

この記事で伝えたいこと
  • アメブロが表示され方は3パターン
  • スマートフォン版の表示にCSSを適用する方法

[アイキャッチモデル: 茜さやさん]

アメブロの表示方法は３種類

あなたもご存知だと思いますが、アメブロはPC（タブレット含む）、スマートフォンのブラウザ、アプリと表示のされ方が変わります。

そしてアメブロのデザインをカスタマイズする方法のほとんどがPC版のカスタマイズのみとなっています。※1

僕のところに相談が多いのが、スマートフォンでのCSSの編集方法を教えてほしいというのをいただきます。

今回は、スマートフォン版のアメブロでCSSを使う方法を解説します。

※1スマートフォンのカスタマイズ方法がないわけではありませんがかなりめんどくさいです。


スマートフォン版アメブロにCSSを使う方法 スマートフォンのみでする方法

この方法は僕はお勧めしません。

スマートフォンだけでもできる方法というだけで紹介しているだけです。

お勧めしない理由は単純です。

ものすごく面倒臭いただそれだけです。

方法はPC版のCSSをタグに打ち込むのと同じです。

ブログの入力画面の左下のHTML編集をタップしてHTML形式に切り替えタグに直接スタイルシートの記述を書くだけです。

例えば 大見出しを赤色にするのであれば

のように記入すればスマートフォンでも装飾することができます。

ただ、これを毎回、書くのは面倒ではありませんか？

まぁスマートフォンしか持っていないのであれば致し方ありません。

ただこのブログはメンタルセラピストやスピリチュアル系を仕事にしている方というか、個人事業主の方に向けて書いています。

仕事をする上でスマホだけで全部、完結させるのは効率が悪いと思いますよ。

スマートフォン版アメブロにCSSを使う方法 PCを使って編集する方法

次に紹介するのは、PCを利用してCSSを編集する方法です。

この方法は応用すればPC版とスマートフォン版で違うデザインにすることもできなくはないですが、デザインを統一しておくことをお勧めしておきます。

まずは、「知っておきたいアメブロのカスタマイズ方法 CSS編集」で紹介していように、アメブロのデザインをCSSで編集しておきます。

次にどんな内容でもいいので、記事を一つ作り公開します。

公開した記事を表示した状態で[ツール]-[開発者]-[ソースの表示]をクリックします。※2

これで今あなたが書いている記事のHTMLソースが表示されます。

はっきり言って何書いてあるかわからなくても構いません。

HTMLソースが表示されたら次は、[編集]-[ページ内の検索]-[検索]をクリックします。

これで検索用のキーワードを入力する欄が出てきます。

そこに以下のように入力してください。

これで、あなたが使用しているCSSファイルを特定することができます。

そこには https://usrcss.ameblo.jp/skin/templates/xx/xx/xxxxxxxxxx.css ※3

と記述されていると思います。

このURLをコピーしてどこかに保存しておきましょう。

続いて、ここからがスマートフォン版にPC版と同じデザインを適用する方法です。

記事作成の画面を開いたらHTML形式に変更しますそして1行目に

↑を加えます。

これで、PC版とスマホ版のデザインを統一することができます。

※2.お使いのブラウザによってHTMLソースの表示方法は異なります。
記事では Microsoft Edge またはGoogle Chrome での表示方法です。

※3.xx/xx/xxxxxxxxxx.cssの部分はあなたの利用しているアメブロのCSS名が表示されます。


スマートフォンとPCのデザインを統一の注意点

この方法を利用すれば、今後はスマートフォン版とPC版で同じデザインの表示が可能です。

しかし注意点が2つあります。

1.PC版はブログ全体、スマートフォンは記事ごと

もともとスマートフォン版はCSSの編集ができない仕様になっているので、今回の方法で無理やりスマートフォン版に対応させています。

そのため、上で紹介した記述を忘れると、その記事だけ、スマートフォンでは反映されます。

同様に過去の記事も、適用したいのであれば、全ての記事に適用する必要があります。


2.デザインを変更するとファイル名も変わる

通常は意識することはないのですが、アメブロはCSSを変更する度にファイル名が変更されます。

つまりhttps://usrcss.ameblo.jp/skin/templates/xx/xx/xxxxxxxxxx.cssのxx/xx/xxxxxxxxxx.cssが変更する旅に変わります。

そのため、追加した下記の記述をすべて書き換える必要があります。

ちなみに修正しない場合は、過去のデザインのままということになります。

 

これらを踏まえて、デザインは開設時に決めて、あとは変更しないようにするのが望ましいです。

amecareの導入

今回の方法を簡単に導入する方法等して、Microsoft EdgeやGoogle Chromeの拡張ツール[amecare]を導入することお勧めします。

インストールするには下記のURLからできます。

https://chromewebstore.google.com/detail/amecare/fgkanlmklljnikahejmaiohmkgmaifmm?hl=ja&authuser=0&pli=1

インストールしたら、定型分に

セットしておけば、記事を書く度に簡単に挿入することができます。

amecareの使い方については製作者のサイトをご覧ください。

 

 

最後までお読みいただきありがとうございます。

今回の記事があなたの役に立ったなら幸いです。

質問疑問ございましたらコメント欄へお願いします。

アメブロ関連記事

設定編

技術編

デザインCSS集

集客編

WordPress関連記事

設定・インストール

トラブルシューティング

動作環境・リリース情報