アメブロの記事をCSSを使ってカスタマイズする

スポンサーリンク

アメブロのCSS

アメブロでもCSSを使うことができます。PC用のCSSファイルについては別の記事(アメブロのページデザインを簡単なCSSでカスタマイズ【PC版】)で解説しています。
今回はスマホ用とAmebaアプリ用での表示に絞って解説します。

PC用のデザインカスタマイズで使ったCSSファイルはスマホやアプリでは読み込まれません。よって別の方法を使いますが、別ファイルを準備してアップロードするというのはアメブロではできません。別のサーバーを準備すればできますが、そこまでするとお手軽なアメブロの意味がなくなります。
さらにAMP用ページではCSSファイルを読み込むことが出来ないためAMPも意識すると必然的にHTMLの中にCSSを書くことになります。
AMP用CSSはこちらの記事を参照(アメブロ AMP対応ブログ記事の書き方、CSSの使い方

style要素

HTMLの中にstyle要素を記述していきます。
ここではPCの編集画面で解説します。

「ブログを書く」の画面で記事を書いた状態で一番下のタグを「HTML表示」に切り替えます。
この画面で記事のhtmlタグを編集できる状態になります。

HTML編集

記事の下にstyle要素を追加します。

※記事を書きます。
<style>
この間にCSS設定を記述していきます。
</style>
※type=”text/css”は勝手に追加されますので記述しなくても問題ありません。

上記のstyle要素の設定だと以下のような表示になります。

style設定プレビュー

これはスマホ用プレビューでみた画面になります。

表は要注意

表を入れたい場合は<table>タグを使います。ただし<table>タグだけだとPC画面やスマホでは線が表示されますがアプリで見ると線は表示されません。

アプリ画面で線を表示するにはCSSで線を設定する必要があります。

.mycss2{border: 1px solid #000000;}

ここで

table{border: 1px solid #000000;}

とtableを指定してしまうとすべての表に適用されてしまいますのでclass指定を使って適用したい表にだけ

<table class=”mycss2″>

と指定しましょう。
tableは記事で一つしか使っていないと思っていても<table>タグを使っているものは意外とあるのでそれらも全部表示が変わってしまいます。

tableタグを使っているもの

  • サイドバーのカレンダー
  • Amazonなどのアフィリエイト

なるべくHTMLタグで設定する

CSSを使わずにHTMLタグで設定できる物はHTMLで記述します。最終的にはAMP用ページを意識しておくためです。style要素で書いた設定はAMP用ページではすべて消えてしまいます。
例えば表のサイズを指定するのであればCSSを使って指定せずに<th>タグの中で指定します。

PCとアプリで確認する

PCを使って記事を書いた場合は下書き保存したあとにアプリから下書き記事を開いてプレビューで確認をしてください。意図しない表示になっている可能性があります。アプリのプレビューでも正しく表示されることを確認してから公開するようにします。
アプリで記事を書いている場合は逆です。アプリで下書き保存したあとにPCでPC用とスマホ用のプレビューを確認してください。

アメブロはPC・アプリ・スマホ・AMPの表示を意識して書く