Amazon 初売り

« 継続に力を入れよう | トップページ | 【ココログ】スマホ版で改行位置を調整する方法 »

2019.12.10

【ココログ】スマホ版で改行位置を調整したいが「問題あり」

| |コメント (0)

 このエントリーをはてなブックマークに追加

この記事では、確認した問題点を書いてます。
まだ、問題解決には至っていませんが、分かったことをまとめています。

スマホ版の改行位置

Screenshot_20191204010022

PC向けに設定した改行位置では、スマホだと読みづらい…orz

この問題を解決するため
【レスポンシブWEBデザイン】スマホとパソコンで改行の位置を変える方法」という記事を参考にする。

メディアクエリーとviewport

この記事のCSSで「PC版とスマホ版の判断」で使っているのは
メディアクエリーというものだ。

以前のCSSのバージョンにあった印刷用のCSSを作る機能をCSS3で拡張して、
画面サイズによりCSSの設定を切り分けるのにも使えるようにしたもので
使用にあたっては、HTMLのhead部のmetaタグでviewportを設定する必要がある。

viewportは、「画面サイズ」や「画面の拡大縮小率」を指定するものだ。
画面サイズで「デバイスのサイズ」を指定することで
デバイスのサイズによるCSSの切り分けには、必要な設定である。

なお、viewportの設定は、PCだと無視される。

ここまではOK。

問題はここからだ。

ココログが用意したスマホ版のデザインが持つ問題

ココログでは、ユーザーが特に何も設定してなくても
ココログが用意したスマホ版のデザインが適用される。

ココログが用意したスマホ版のデザインは
ココログのプロプランで上級テンプレートを使っていても
HTML や CSS の修正ができない。

スマホ版の HTML や CSS は、
上級テンプレートとしても公開されていないからだ。

このため、PC 版とスマホ版で「改行位置」を調整しようとしても、
CSSで切り分けることができない。

viewportについては、
Android の Chromeでスマホ版のHTMLで設定されていることを確認した。
(26行目)

※URLの頭に「view-source:」を付けると、下図のようにスマホ版のChromeでもソースを確認できる。

Screenshot_20191210233442

ここから先は、後日、確認が必要

ココログベーシックでスマホのスタイルを設定したい」という記事によると、
ブログサブタイトルの部分に書かれた内容は
タグも含めてそのまま出力される。

上記の記事を書いた人は実際に試してみて記述通りに出力されてることを確認している。

ただし、出力位置が head部でなく body部のため、
W3C の定めた CSS の仕様を満たしているかは不明とのこと。

一度、組み込んでソースを表示し、
そのソースが EmEditor の構文チェック機能で
どう判定されるか確認が必要だ。

ココログのスマホ表示」という記事によると
PC のブラウザでも スマホのエミュレーター機能があり
IE で ユーザーエージェント情報を入力するとスマホの画面が確認できる。

これができると、スマホ版の確認がしやすくなる。

CSSが、別々なことも分かった。

Androidで読み込まれるスタイルシート
/.shared-cocolog/themes/android/styles.css

iPhoneで読み込まれるスタイルシート
/.shared-cocolog/themes/iphone/styles.css

ただ、この記事にはユーザエージェントの指定方法が書かれていないので
これも調査が必要だな。

■まとめ

  • PC版とスマホ版での改行位置を分ける方法は存在する
  • ココログは、プロプランで上級テンプレートを使ってもスマホ版のHTMLやCSSを修正できない
  • ココログのスマホ版のデザイン修正はできそうだが、継続調査が必要

一応、希望あり。
追加調査しながら、頑張って対応していこう!


 このエントリーをはてなブックマークに追加

| |コメント (0)

このエントリーへのリンク

このエントリーのリンクを入れるHTML:

コメント

このブログの新着コメントをRSSリーダに登録する為のxml




←名前とメールアドレスは必須です。
URLも記入すれば、URLのみが公開されます。
メールアドレスのみですと、メールアドレスが公開されてしまいますので、御注意ください。

↓コメント本文では、「a href」「b」「i」「br/」「p」「strong」「em」「ul」「ol」「li」「blockquote」「pre」のタグが使えます。絵文字をクリックすると、本文にタグを挿入できます。