アメブロのＣＳＳ
アメブロでもＣＳＳを使うことができます。ＰＣ用のＣＳＳファイルについては別の記事（アメブロのページデザインを簡単なＣＳＳでカスタマイズ【ＰＣ版】）で解説しています。
今回はスマホ用とＡｍｅｂａアプリ用での表示に絞って解説します。
ＰＣ用のデザインカスタマイズで使ったＣＳＳファイルはスマホやアプリでは読み込まれません。よって別の方法を使いますが、別ファイルを準備してアップロードするというのはアメブロではできません。別のサーバーを準備すればできますが、そこまでするとお手軽なアメブロの意味がなくなります。
さらにＡＭＰ用ページではＣＳＳファイルを読み込むことが出来ないためＡＭＰも意識すると必然的にＨＴＭＬの中にＣＳＳを書くことになります。
ＡＭＰ用ＣＳＳはこちらの記事を参照（アメブロ ＡＭＰ対応ブログ記事の書き方、ＣＳＳの使い方）
ｓｔｙｌｅ要素
ＨＴＭＬの中にｓｔｙｌｅ要素を記述していきます。
ここではＰＣの編集画面で解説します。
「ブログを書く」の画面で記事を書いた状態で一番下のタグを「ＨＴＭＬ表示」に切り替えます。
この画面で記事のｈｔｍｌタグを編集できる状態になります。
HTML編集
記事の下にｓｔｙｌｅ要素を追加します。
<style>
この間にＣＳＳ設定を記述していきます。
</style>
※type=”text/css”は勝手に追加されますので記述しなくても問題ありません。
上記のｓｔｙｌｅ要素の設定だと以下のような表示になります。
style設定プレビュー
これはスマホ用プレビューでみた画面になります。
表は要注意
表を入れたい場合は<table>タグを使います。ただし<table>タグだけだとＰＣ画面やスマホでは線が表示されますがアプリで見ると線は表示されません。
アプリ画面で線を表示するにはＣＳＳで線を設定する必要があります。
ここで
とtableを指定してしまうとすべての表に適用されてしまいますのでclass指定を使って適用したい表にだけ
と指定しましょう。
tableは記事で一つしか使っていないと思っていても<table>タグを使っているものは意外とあるのでそれらも全部表示が変わってしまいます。
tableタグを使っているもの
- サイドバーのカレンダー
- Amazonなどのアフィリエイト
- 他
なるべくＨＴＭＬタグで設定する
ＣＳＳを使わずにＨＴＭＬタグで設定できる物はＨＴＭＬで記述します。最終的にはＡＭＰ用ページを意識しておくためです。ｓｔｙｌｅ要素で書いた設定はＡＭＰ用ページではすべて消えてしまいます。
例えば表のサイズを指定するのであればＣＳＳを使って指定せずに＜ｔｈ＞タグの中で指定します。
ＰＣとアプリで確認する
ＰＣを使って記事を書いた場合は下書き保存したあとにアプリから下書き記事を開いてプレビューで確認をしてください。意図しない表示になっている可能性があります。アプリのプレビューでも正しく表示されることを確認してから公開するようにします。
アプリで記事を書いている場合は逆です。アプリで下書き保存したあとにＰＣでＰＣ用とスマホ用のプレビューを確認してください。