PC向けのデザインcssを少しだけ弄っていましたが、これまでスマホには反映されていませんでした。
「ま、いっか」とも思っていたのですが重い腰を上げることにしました。
中身は見出しのh3とh4の設定だけですが、これをスマホにも設定したい!
で、スマホにもと思うとこのレスポンシブデザインに対応したテーマじゃないとおかしくなるそうで、実際に試したところ変になっちゃったので解除。
調べるとスマホ向けのHTMLを編集すると出来るそうなんだけど・・・Proじゃなきゃ弄らせてくれないそうです。orz...ですよねー
で、解決方法なのですが、
スマホの設定から「PCと同じHTMLを表示する」にチェックを入れます。
で、PC用デザインの「記事」を開いて
「記事上」の項目を弄ります。
「記事上」のHTMLに直接スタイルシートを追記するのです!
内容はPC向けと全く同じcssで、スタイルの宣言をするだけです。(スマホ用にカスタムしてもいいけど)
<style type="text/css">
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #2d70a4;
}.entry-content h4 {
position: relative;
color: #111;
border-bottom: 4px solid #ccc;
padding: 8px 10px;
}
.entry-content h4::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 4px;
background-color: #2d70a4;
z-index: 2;
content: '';
}
</style>
で、保存してスマホから確認すると!
わーい!
できてるー!
ということで、Proじゃなくてもスマホ向けデザインは弄れるんです!