CSSベース既知の不具合
「ラテ式CSS」ベースver 1.5時点でのデザイン上の不具合をまとめました。公式テーマ側の不具合、ラテ式CSS側の不具合の両方があります。
共通HEADの上限が5,000字のため修正に限界があり、また、すべての公式テーマに合うような汎用CSSは実現不可能でした。
「一カ所にコピペでOK」「簡単にデザインを着せ替えできる」この二点を満たすため、妥協することにしました。
CSS不具合の原因は突き止めていますので、各テーマごとにCSSを当てたい方はご自由にどうぞ。軽くヒント(対策例)を置いておきます。
さらに公式テーマは、おそらく「ユーザーエージェントによってスタイルシート(.css)を振り分けている」ようで、iPadは「PC用のCSS」を読み込んでいます。
一方、iPhoneは「スマホ用のCSS」を読み込んでいるため、既知のバグ(fixed)は公式側が対策してくれています。
もし該当テーマを使いたい場合、且つ、iPadでもきれいに全画面背景画像を表示させたい場合は、
マイテーマを作成し、「CSSを編集」欄に以下のコードをコピペしてください
これは100%完璧な答えではありません。完全対応させるには
これで対応できるテーマがほとんどかと思いますが、すべてのテーマを確認できていないので、もしかしたら対応できないかも。
woodland
調整が難しいのでカギカッコは非表示にするのが楽かと思います。
もし該当テーマを使いたい場合は、
マイテーマを作成し、「CSSを編集」欄に以下のコードをコピペしてください
ハロウィン・ストライプ
(横長の画面ならばギリ被らないかもしれませんが、かなり厳しいと思います)
スマホでは背景画像自体が切り替わるので可読性は問題ありません。
マイテーマを作成し、「CSSを編集」欄に以下のコードをコピペしてください
ハロウィン・ストライプ(白)
ハロウィン・ストライプ(黒)
私が適当にピッカーで拾ってきたものを透明度調整しただけなので、カラーコードはお好きに調整してください。
アラベスク(グレー・ホワイト)
PC版のみで不具合を確認しています。スマホではすべて表示されているように見えました。
マイテーマを作成し、「CSSを編集」欄に以下のコードをコピペしてください
共通HEADの上限が5,000字のため修正に限界があり、また、すべての公式テーマに合うような汎用CSSは実現不可能でした。
「一カ所にコピペでOK」「簡単にデザインを着せ替えできる」この二点を満たすため、妥協することにしました。
CSS不具合の原因は突き止めていますので、各テーマごとにCSSを当てたい方はご自由にどうぞ。軽くヒント(対策例)を置いておきます。
全画面背景画像とiPadの相性が悪い
該当テーマ
- 桜吹雪
- Starry Lights
- ベッドと本
- 宝石(エメラルド・アメジスト)
- 窓越しの景色
- 見知らぬ旅路へ
- rainy days
- 星降る夢色(ネイビー・バイオレット・イエローグリーン・ブルー)
- 航海日誌(モノトーン・セピア)
- 一通の手紙(モノトーン・セピア)
- natural photos(茶・白)
不具合内容
background-attachment: fixed;
がiPadで効かないバグがあるため。昔からある有名なバグです。さらに公式テーマは、おそらく「ユーザーエージェントによってスタイルシート(.css)を振り分けている」ようで、iPadは「PC用のCSS」を読み込んでいます。
一方、iPhoneは「スマホ用のCSS」を読み込んでいるため、既知のバグ(fixed)は公式側が対策してくれています。
対策
もし該当テーマを使いたい場合、且つ、iPadでもきれいに全画面背景画像を表示させたい場合は、
マイテーマを作成し、「CSSを編集」欄に以下のコードをコピペしてください
@supports ( -webkit-touch-callout : none) {
.wrapper {
background-attachment: scroll !important;
background-size: contain !important;
}
}
これは100%完璧な答えではありません。完全対応させるには
<body>
の擬似要素に背景画像を当てる必要があります。今回はCSSだけで対応する、の一例なので妥協しています。これで対応できるテーマがほとんどかと思いますが、すべてのテーマを確認できていないので、もしかしたら対応できないかも。
メインコンテンツ上下のカギカッコがはみ出る
該当テーマ
woodland
不具合内容
<div class="main">
の擬似要素(::before, ::after
)の位置がpx指定のため、ラテ式CSSベースと相性が悪く、右端のカギカッコがずれてはみでる対策
調整が難しいのでカギカッコは非表示にするのが楽かと思います。
もし該当テーマを使いたい場合は、
マイテーマを作成し、「CSSを編集」欄に以下のコードをコピペしてください
.main::before, .main::after {
content: none !important;
}
PC/タブレットで文字色が背景色と同化する
該当テーマ
ハロウィン・ストライプ
不具合内容
<h3>
の文字と、PC版CSSの背景画像が同じオレンジ色なので、<h3>
が背景に同化して読めなくなる。ラテ式CSSと相性が悪く、メインコンテンツが左右中央配置だとかぶってしまいます。(横長の画面ならばギリ被らないかもしれませんが、かなり厳しいと思います)
スマホでは背景画像自体が切り替わるので可読性は問題ありません。
対策
マイテーマを作成し、「CSSを編集」欄に以下のコードをコピペしてください
ハロウィン・ストライプ(白)
.main {
background-color: #f9f7eecc;
}
ハロウィン・ストライプ(黒)
.main {
background-color: #0f0f0d87;
}
私が適当にピッカーで拾ってきたものを透明度調整しただけなので、カラーコードはお好きに調整してください。
メインコンテンツ上下の装飾が左右途切れる
該当テーマ
アラベスク(グレー・ホワイト)
不具合内容
<div class="main">
の上下背景画像の右端、左端が途切れる。PC版のみで不具合を確認しています。スマホではすべて表示されているように見えました。
対策
マイテーマを作成し、「CSSを編集」欄に以下のコードをコピペしてください
.main {
background-size: contain !important;
}