スマホ版ブログにCSSを適用する方法 ~ ウェブリブログで記事をカスタマイズ! ~

ウェブリ酷い

■スマホ版ブログにPC版CSSを適用する方法



ブログの記事をカスタマイズするにあたって、何かと不具合の多いウェブリブログ。ウェブリブログだけではないでしょうが、運用側の不都合を強引に制限してしまうのはいかがなものでしょうか?

■スマホ版ブログにCSSが適用されない原因


単純に、ウェブリブログはスマホ版では「CSS編集」で作成されたユーザーカスタマイズのCSSを読込みません。ウェブリブログは"スマホ対応"などとうそぶいていたようですが、このざまで"スマホ対応"とは呆れてしまいます。

●不具合の現象


PC版では見栄えの良いページでも、スマホで閲覧するとがっかりします。特に、「CSS編集」に力を入れていた方は1ヶ月は立ち直れないでしょう。私も思わずBIGLOBEを解約しようと、他のブログサービスを調べてみました。

でも、光に換えたばかりだったんですよね。

■不具合の対処


実はウェブリブログではPC版でもユーザーカスタマイズのCSSはスクリプトで読込んでいます。それなら、それをそっくりスマホ版でも使ってしまえばいいわけです。そこで、スマホ用フリースペースにJavascriptを追加します。

スマホ用フリースペース
// ユーザーカスタマイズのCSSの読込みを追加
<script type="text/javascript">
document.write("<link href=¥"http://tomato-aza.at.webry.info/customize.css\" rel=¥"stylesheet¥" type=¥"text/css¥">");
</script>

●解説


"tomato-aza"の部分をご自分のURLに書き換えてください。上記のスクリプトはウェブリブログがPC版で読込んでいる"index_css.js"に記述されている"include_article_css"関数の該当部分をコピーして貼り付けただけです。

●動作確認


スマホでこのページを見てください。



■まとめ


・スマホでは「CSS編集」でカスタマイズしたCSSは適用されない
・スマホでのユーザーカスタマイズのCSS適用はJavascriptで対処する

この記事へのコメント

この記事へのトラックバック