HOME > モバイル > iPodやiPadでポッドキャストを再生する際、画面に表示される文章(歌詞)を左寄せにしフォントサイズを変更する(※追記分)
公開日:2011.6.14
この記事は約3分で読めます。

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

この記事は最終更新日から8年以上経過しているため現状にそぐわない可能性もあります。

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

今回はiPadでの表示も検証してみました。

その結果新たな問題点もわかってきたんです。

SIRIUSレビューイメージ画像

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

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

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

追記 -2012.3.5-

iOS5にアップデートするとこの投稿内容はすべて反映されないのでご注意を。

iOS5の仕様変更かバグか?さらなるアップデートに期待します。

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進数表記で書いてます。

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

以上です。

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

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