iPodやiPadでポッドキャストを再生する際、画面に表示される文章(歌詞)を左寄せにしフォントサイズを変更する(※追記分)

Total 663 views
この記事の所要時間は約 4分です。

「iPhoneや iPodで ポッドキャストを再生する際、画面に表示される文章を左寄せにする」の追記分が予想以上に長くなりそうなので、あらためて別投稿として掲載します。

今回は iPadでの表示も検証してみました。
その結果新たな問題点もわかってきましたよぉ。

スポンサーリンク


 

イメージ画像

 

このカスタマイズに終わりはあるのか

この投稿は「iPhoneや iPodでポッドキャストを再生する際、画面に表示される文章を左寄せにする」をベースに追記として書いているので
いきなりここから読まれてもおそらく何を言ってるのかわからないと思います。

また内容は極めてマニアックでそこまでやるかと言われそうな内容だと思いますので
興味のない方はささっと飛ばしてくださいネ。

追記 -2012.3.5-

iOS5 にアップデートするとこの投稿内容はすべて反映されないのでご注意を。
iOS5 の仕様変更かバグか?アップデートに期待しましょう。

追記概要

追記分はこコチラの 3点。

 

iPadでのフォントの色が暗い件について

下図が iPodと iPadでの表示の違いです。

表示の違い画像

 

なぜか iPad はフォントの色が白ではなくグレーなんですよ。
iPodに較べて視認性がよくなったために敢えて色味を落としたんでしょうか。

ただ個人的には見にくいので、フォントの色をに変えてみます。

 

前回、フォントの大きさと左寄せの命令を「歌詞」のド頭に下記のように記しました。

今回は全体的にフォントを白くしたいので
ここに color: white;を付け足します。

「iPadで表示されるフォントの色がなぜか暗いのを修正する」はこれで解決です。

 

フォントを大きくしたり小さくしたりがスムーズにいかないについて

これはどういうことかと言うと
これまでは全体のフォントサイズの表記方法を相対サイズである「%」(font-size: 140%; など)という単位を使ってきました。
フォントの大きさが一律ならこれでも問題ありません。

しかしところどころフォントサイズを変えようと思った場合
狙った通りに表示されないこともあることが判明しました。

例えば全体のフォントサイズは「大きめ」で
語句説明は「青っぽい色」で「多少小さめ」に。

そして分割点の役割を持たせた記号は「黄色味」で「大きめ」に……などととしたい場合
(普通ここまでやる人はあまりいないと思いますが)
私は下記の書き方にしてみました。

HTMLコード画像

 

しかし結果はご覧の通り。

iPad表示画像

 

なぜこういうことになったのか。

その原因と対応策を説明するとかなり長くなるしわかりにくいので
単純に別のやり方に変えてみます。

そのやり方というのが
フォントサイズに「相対値」ではなく「絶対値」を当てはめるというもの。

例えば何かを基準にした 150%という相対サイズではなく
絶対的に 22px(ピクセル)といった風に。

HTMLコード画像

 

この結果は……

iPad表示画像

「フォントを大きくしたり小さくしたりがスムーズにいかない」は一応解決。

 

フォントの色が思った通りに変化しなくなる時がたまにあるについて

これは例えば下記のように打ったとします。
設定は上記と同じですが文章が若干異なってます。

HTMLコード画像

 

これの結果は……

iPad表示画像

 

どういうわけか本来「白」色に戻らなければならないはずのところが
「青」になっていますね。

この原因は全くわかりません。

特定の文字が影響しているのかそれとも字数の問題かと散々試したところ
最終的には以下のようにすることで解消しました。

「最初の青文字指定の箇所の最後の</span>を改行させる……」

HTMLコード画像

 

これの結果がこちら。

iPad表示画像

 

なぜ解消したのかについては全く謎です。
少なくとも私の知識の中にはありませんです。

おそらく独特の仕様があるのでしょうね。

それゆえ表示方法に何らかの異常が見受けられたらスペースを消すとか改行するとか
いろいろ試してみるしか方法はないらしいというのが今回の結論です。

 

最後にこれまでの結果を反映させた HTMLを付けておきます。
あとは文章を変えるなり設定を変えるなりお好みでどうぞ。

ここでの色の設定は whiteや yellowといった明示的なものではなく 16進数表記で書いてます。

まあ、ここまでやってみようという人は、ほとんどいないと思いますが。

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)