アメブロ カスタマイズ
モバイルページをカスタマイズするための『ステップ③』です。
ここでは、アメブロがどのようにしてデザインを変更しているかのお勉強をします。
ちょっと小難しい内容になりますが、紅茶を片手に、ゆっくりと読んでみてください。
実験結果
- パソコンページでは、『CSS編集用デザイン』を選択すれば『CSSの編集』が可能で、そこで設定されたデザインが読み込まれる。
- モバイルページでは、運営側が用意したデザインから選択したデザインが読み込まれるため、基本的にはデザインの変更が出来ない。
-
2020.04.05現在、パソコンページもモバイルページも記事の中で、<style> タグを使用すればその記事が表示されるタイミングでデザインを『半ば無理やり』変更が出来る。
パソコンページでのスタイル適用順
- 運営側が用意したスタイルが適用される
- ユーザーが『カスタマイズ』したスタイルが追加・上書で適用される
- 記事内に書かれたスタイルが追加・上書で適用される
モバイルページでのスタイル適用順
- 運営側が用意したスタイルが適用される
- ユーザーが『選択』したデザインスタイルが追加・上書で適用される/li>
- 記事内に書かれたスタイルが追加・上書で適用される
考察と注意事項
以上の結果から、2020.04.05現在、モバイルページでデザインを変更することは一応可能ではあるが、下記の注意が必要です。
- 記事が読み込まれていないページ（例えば、『トップページ』や『記事一覧』など）では、デザインが変更されない。
- 記事ごとに、スタイルを書き込む必要があるため、別のスタイルを設定した記事が存在している場合、後から読み込まれた記事のスタイルによってデザインが変更される。
※モバイルページで記事を表示すると、選択した記事とその前の記事が表示される。 - 記事内でスタイル設定をするため、パソコンページにも影響を与える。
パソコンページに影響を与えないようにするには
下記のコードを、記事を書くときに、『HTML表示』に切り替えて、先頭にコピーします。
<style type="text/css">
/* ここに、パソコン・モバイルページカスタマイズ共用の css を記述 */
@media screen and (orientation:portrait) and (max-width:568px),screen and (orientation:landscape) and (max-width:896px){
/* ここに、モバイルページカスタマイズ専用の css を記述 */
}
</style type="text/css">
上記の良く分からないコードの説明
- @media screen で、画面解像度により条件を指定して、スタイルを適用するかどうかを指定することが出来ます。
- orientation:portrait は、縦表示の時という意味になります。
- orientation:landscape は、横表示の時という意味になります。
- max-width は、最大の横方向の画面解像度という意味になります。
- and は、そのまま「～かつ」という意味になります。
- [ , ]（カンマ）で区切ることで、「～または」という意味になります。
- screen and (orientation:portrait) and (max-width:568px) は縦表示で、画面解像度が568px以下の時という意味になります。
- screen and (orientation:landscape) and (max-width:896px) は横表示で、画面解像度が896px以下の時という意味になります。
さらに踏み込んだ説明
- 機器性能上の画素数（デバイスピクセル）が、2,160×3,840(4K)あったとしても、サイトを表示する場合、Android端末では、360×640（cssピクセル）などとして、iPhoneでは414×896（iPhone11 Pro Maxなど）など、として表示されます。
- 一方、モバイル端末なのに、PC端末として振る舞う iPad では、768×1,024など、として表示されます。
- 上記以外にも、端末ごとに、『デバイスピクセル』と『cssピクセル』の組み合わせが多数存在します。
と言うことで・・・
上記の良く分からないコードを使っていただければ、きっと、パソコンページに影響を与えることなくモバイルページのカスタマイズが出来るでしょう。
以上です。お疲れさまでした。
記事を気に入って頂けたら
お願いします m(_ _)m
本でしっかり勉強したい人は、こんな本はいかがですか？
