サイトマップ
スマートフォンで反映しない更新履歴のフォントサイズ、カラー指定対処法
サイドバーに移動した更新履歴のテキスト、フォントサイズやカラーをスマートフォン
閲覧状態（レスポンシブ効果で変化させるという仕組みをCSS指示する解説ですが
記事巻末にデフォルト配置されるサイトであればさほど必要性のないカスタマイズと
ご理解願います
あくまで、サイドバーに移動した際の可変指定...
通常スマートフォンで見ればメイン記事同様フォントサイズは縮小されますが、それ以上に
好みに合わせたいという場合の対応策で、あまりお勧めするものではありませんが、
サポートへ寄せられる質問がございまして、何かの際に役立つかもしれない備忘録と
追記した次第です
まず、HTMLから見てみましょう
<!-- ★ブログモードここから★ -->
<h3>最新記事</h3>
<% AQNewEntries %>
<div class="blog">
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="nmlbox">
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>
<div class="body"><% pageBody | tag_strip | str_replace( ,) | oneline | shorten(300,true) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</div>
</div>
<% /AQNewEntries %>
<!-- ★ブログモードここまで★ -->
ここが、記事を読み込む記載ですが、bodyの指示を直接受けるようになっているのですね
<div class="body">
ですので、新たな指示を受けるようクラス指定に書き換えます
単に、<div class="body2">とするだけ...
次にスタイルシートで指示コードを追加します（原本はそのままですよ）
==================================================
基本スタイル
==================================================
*/
body {
background-color: #F8F8F1;
border-top: 4px solid #999999;
color: #333333;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 15px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em;/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;/* 文字サイズの自動調整機能のキャンセル */
}
一つ目
ここに追加記載をします（PCで指示される記載です）
body2 {
background-color: #F8F8F1;
border-top: 4px solid #999999;
color: #333333;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 15px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em;/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;/* 文字サイズの自動調整機能のキャンセル */
}
二つ目 （スマートフォンで反映される指示ですね）
@media screen and (max-width: 640px) {
.body2 {
background-color: #F8F8F1;
border-top: 4px solid #999999;
color: #0A15FF; /*ここでフォントカラーを変更*/
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 10px; /* フォントサイズを変更 */
line-height: 180%;
text-align: center;
letter-spacing: -0.001em;/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;/* 文字サイズの自動調整機能のキャンセル */
}
}
デフォルトCSS改行で反映しないなら、クラス指定追加して動かす...です
一つ目の記載は、記載しなくとも反映はされますが、パソコン画面でメイン記事フォントと
異なるサイズ、カラー替えをする際は使えます
iPad タブレットサイズも組み入れたいとした際は、もう一つメディアコードを追加します
@media screen and (max-width: 800px) {
中身コード
}
気が付くことございましたら、都度追記いたします
関連ページ
- 2カラムを3カラム？風にサイドバーをカスタマイズしてみました
- シリウスレスポンシブサイトは、2カラムは備えございますが、3カラムがございませんね。で、試しにサイドバーをカスタマイズして3カラムにできるかに挑戦してみたのです
- サイドバーのメニューリスト区切りラインカラー変更
- シリウスレスポンシブ2カラムサイドバーのメニューリストはデフォルトカラーのラインで区切られておりますが、好みの色替えもできます
- 更新履歴をサイドバーに位置替え表示する方法
- シリウスサイトのトップページに表示される更新履歴は、巻末に位置するためスクロールしても行きつかない事情もございますのでサイドバーに位置替えして認識しやすくする..という方法
- サイドバーメニューをブログイメージにカスタマイズ
- シリウスレスポンシブ2カラムサイトのサイドバーメニューをサムネイル込みでブログレイアウトにカスタマイズする方法
- 更新履歴をサイドバー配置すると縮小しないサムネイル画像の対処法
- 更新履歴をサイドバー配置するとサムネイル画像は縮小しなくなりますが、それなりに小さくしたいとする場合は、対処しておきましょう
