« 我が家におけるWindows Home Server興亡記 | トップページ | Microsoft Bot Frameworkを使ってSlashのbotを作ってみた(前編) »

2016年5月 8日 (日)

ココログの「スマートフォン表示」に無理矢理スタイルを設定してみた

このブログ、 「PC表示」〔ママ〕に対してはスタイルを設定していましたが、 「スマートフォン表示」〔ママ〕に対しては設定していませんでした。 というか、 ココログの追加料金なしのプランでは「スマートフォン表示」にCSSを設定する方法がありません。

携帯版のブログのデザインをカスタマイズすることはできますか? (公式FAQ)

でも、素の「スマートフォン表示」は、 箇条書きが箇条書きにならないし、 表に枠がつかないし、 インデントもうまくできないし、 非常に見づらい。 制限の多かったガラケー時代の名残なのかな?

まあ、 モバイル系がこのままなのもアレなので、 頑張って「スマートフォン表示」に独自CSSを設定する方法を探しました。 結果としては、スマートフォンではなんとかなったんじゃないかな? ガラケーでどう見えているかはわからん。 ガラケーで見ている人はすいません。

別に小綺麗にしたいわけではなく、 単に文章構造を明確にしたいだけなんですけどね。 まあ、ちゃんとカスタマイズできる他のブログサービス使えと言われれば、 そうなんだけどさ。

まず、「カスタムCSS」について確認

ココログのブログ管理ページの「デザイン」の項には「カスタムCSSを編集」というメニューがあり、 独自CSSを設定できます。 しかし、「カスタムCSS」機能は「PC表示」にのみ有効で、 「スマートフォン表示」には反映されないようです。

では、「スマートフォン表示」に有効な独自CSS編集機能は?

前記FAQの通り、追加料金が必要。

なんとか追加課金なしでできないか?

直接的な方法はないし、 可能だったとしても「PC表示」と「スマートフォン表示」で別々のCSS書くのもいやだし、 どうしたものかな、 と考えていたところ、 ファビコンを設定した方法を思い出したわけです。

ファビコン(ブログアイコン、サイトアイコン)を設置してみましょう

これは要するに、 ココログの設定の「ブログのサブタイトル(キャッチフレーズ)」に設定した内容は、 HTML要素も含めてそのままページに埋め込まれるという仕様を利用した方法です。 そんなんでいいのか。

まあともかく、 この方法を流用し、 「ブログのサブタイトル(キャッチフレーズ)」にファビコンを参照するlink要素と並べて、 独自CSSを参照するlink要素を追加したら、 「スマートフォン表示」でもCSSが効くようになりました。

CSSは少し手直しが必要でした。 「PC表示」と「スマートフォン表示」でページの構造が結構異なります。 で、その各構造に割り当てられているクラス名がずいぶんと違う。 が、entry-contentというクラスが記事のコンテナとして共通に存在するので、 それを手がかりにスタイル設定対象を限定できました。 こんな感じ。

.entry-content td, .entry-content th {
  border: solid thin #999999;
  padding: 0.3em;
}
...

後は、 「PC表示」用に従来設定していた「カスタムCSS」は設定が重複するので削除して、 作業完了。 めでたしめでたし。

問題点

「ブログのサブタイトル(キャッチフレーズ)」の内容は、 ブログのページのh2要素の中に埋め込まれます。 ということで、 ページは以下のようになっております。 (このHTMLは説明のためのモノで、指定されているURL等は正しくありません)

<html>
...
 <body>
...
  <h2>サブタイトル
   <link rel="shortcut icon" href="favicon.png">
   <link rel="stylesheet" type="text/css" href="my.css">
  </h2>
...

h2要素中にlink要素を入れてよいのだろうか?

HTML5では大丈夫。 h2要素の内容はフレージングコンテンツであり、 link要素は条件付きでフレージングコンテンツと見なされる。 その条件とは、itemprop属性が存在する場合。 なので、itemprop属性を追加しておきましょう。

厳密には、文法的に許容されるというだけで、 head要素中に記述された場合と同じように機能する保証があるのかはよく分からんが、 まあ主なブラウザで機能しているみたいだし。

なので、 HTML5な「PC表示」ではOK。 ところが、 「スマートフォン表示」はXHTML 1.0なのです。 XHTMLでは、本当はだめだと思うなあ。 XHTMLではh2要素の内容モデルはテキストかインライン要素で、 インライン要素にlink要素は含まれない。 でもまあ、Windows 10 Mobile, iOS, Androidの標準ブラウザで効いているみたいだから、 いいや。

« 我が家におけるWindows Home Server興亡記 | トップページ | Microsoft Bot Frameworkを使ってSlashのbotを作ってみた(前編) »

その他」カテゴリの記事

作業記録」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/595179/63600766

この記事へのトラックバック一覧です: ココログの「スマートフォン表示」に無理矢理スタイルを設定してみた:

« 我が家におけるWindows Home Server興亡記 | トップページ | Microsoft Bot Frameworkを使ってSlashのbotを作ってみた(前編) »