貧乏リーマンの戯言

アクセスカウンタ

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

<<   作成日時 : 2016/03/29 20:08   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 3 / トラックバック 0 / コメント 0

ウェブリ酷い

■スマホ版ブログに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で対処する

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 3
なるほど(納得、参考になった、ヘー)
驚いた
ナイス

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
スマホ版ブログにCSSを適用する方法 〜 ウェブリブログで記事をカスタマイズ! 〜 貧乏リーマンの戯言/BIGLOBEウェブリブログ
文字サイズ:       閉じる