昨日記事に書いた、ほぼ1日かけて理解・設定した「タイトルのhタグの設定と装飾」の件。
PCページでは設定どおりタイトルが青線で囲まれ、太字表示できたのですが、スマホページは表示されないのはなぜ??
スタイルシート(CSS)はPCとスマホ別々にあるので、PCに貼りつけたソースコードと同じものをスマホのスタイルシートにも貼りつけたのに・・・
他のブログでは、そうすることでスマホページでもタイトル装飾表示されるって書いてあるけど・・・
ただし、シーサーに関しては、スマホページのカスタマイズについての他の方の記事が少なくて、参考にすることができないのが現状です。
スポンサーリンク
自分のブログ訪問者はスマホからが多い
シーサーブログ「マイページ」の機能の中には「アクセス分析」というものがあり、日時ごとにPV数やユーザー内訳などが分かるので便利です。
昨日の結果を見ると、自分のブログへは半数近くが「スマホから」という結果に。
androidユーザーは34%、「不明」っていう項目が、おそらくiOSユーザー等22%かな。
自分も、通勤電車の中でスマホから他のブログを見るもんなあ~。
だから、見やすい画面でPV数を増やすためにも、スマホページの充実が不可欠なのです。
スマホのテンプレートの種類に問題あり?
自分が今まで使ってきたスマホのテンプレートは「①のTime Line Green」
でも、①のスタイルシートに装飾コードを貼りつけても、タイトルが大きさそのままで太字になるだけで、囲み線など一切表示されず、うんともすんともいわない(涙)
もしかしたら、テンプレートの種類によって表示可否が変わるのかな?と思い、「②のまとめ」を選択してみた。
すると・・・
まだ装飾のソースコードを貼りつけてないというのに、「まとめテンプレート」画面では、囲み線表示はできないものの、左線が太線、タイトルが太字になっているではありませんか。
スタイルシートの既存のソースコードを読んでいくと、次のような設定が。
article content(記事内)でh1~h6タグをつけた文言に、boeder left 4px(左線4pxの太線)に自動設定するってコードなのでしょうか。
<h3>記事内タイトル</h3>と入力してるから、上記コードの自動的に反応してるのかな。
これは設定いらずで使える!って思ったのもつかの間、タイトル文字の大きさが記事の文字と変わらず、タイトルが全然目立たん・・・
上記コードの中にfont-size 14pxとあるので、18pxに変更するも・・・
大きさが全く変わらない。もうどーしたらいいの??
スマホページの表示まとめ
結局、変更後の「まとめ」テンプレートでしばらく様子見にしました(汗)
タイトル装飾がぜーんぜん目立たんので、読みやすいとは程遠いですが。
ただし、「まとめ」テンプレートにすると、新たな問題が・・・
記事のアイキャッチが画像が二つも表示されてしまう!
1つだけにする設定はと、あれこれ他の方の記事を探したものの見つからず。
それと、スマホページの広告表示の多いこと。どうにかして消したい、いや、無理なら少なくしたい。
そんなこんなで、シーサーブログという無料ブログの性でしょうか。
スマホのカスタマイズはまだ続く・・・
【追記】2日後、なぜか自然にタイトル装飾表示ができてました(汗)。「まとめ」と「Time Line Green」両方のテンプレートに囲み装飾表示。このタイムラグはなぜなの??
スポンサーリンク