めぐみの気まぐれガールズトーク

更新停止中。年内に消滅します。

はてなブログ無料版でPC・スマホ両方に同じCSSを適用する方法。

はてなブログのカスタマイズ記事って、有料版を前提にしているものが多いですよね。借金600万抱えた元バブル女子としましては、今後とも無料版にこだわっていきたいと存じます。

借金600万円のハナシとかバブル崩壊のハナシとかはまたそのうち書くとして、例えば私の場合、このブログをはじめるにあたりまずは以下のようなリンク装飾CSSを適用しています。

リンク先は実際に参考にさせていただいた記事です。というかソースまるコピさせていただいております。ありがとうございます。

ところが設置が問題です。

スマホで使う場合は、<style> ~ </style> で囲んでヘッダーのタイトル下にでもぶっこんでください。

…なーんてさりげなく書かれてありますが、そのとおりにいざデザイン画面を開いてみますと、こうでございます。

はてなブログProに登録するとご利用いただけます。」おお。なんという甘美な響きでございましょう。やはり貧乏はつらい。それもこれもすべてバブル崩壊が悪いのです。こうなったらタイムマシンに乗って総量規制を止めに行くのです。
どうも、広末涼子です。


広末涼子を自称するずうずうしい47歳のおばちゃん


「どこが広末だ!」

ムダばなしが過ぎたので結論を言うと、無料版でもこのように同じCSSを適用することができます。貧乏でも大丈夫です。

レスポンシブデザインを使用する、というのが一般的な解決策として多く示されていますが、レスポンシブだと重くなりがちですし、何より私は、デフォルトのスマホデザインが好きなのっ!!「お前の好み知らんがな(´・_・`)」

その場合にポイントになるのが「PC版デザイン設定で、2箇所に同じCSSを設定する」という点です。
スマホデザイン設定をよーく見ると、以下のような設定項目があります。これを利用します。

「PCと同じHTMLを表示する」コレ何かというと、PC版の「記事上下に書くHTML」と同じ記事上下HTMLをスマホに適用する、ということなんです。変則的なやりかたですが、ここにCSSをぶちこめばスマホの個別記事にもPCと同じCSSが適用されるのですよ。

んで。じゃあここだけでいいかっていうと、PC版の場合は個別記事以外にもトップ画面などに記事文面が出ますよね?そこにCSSが適用されないんです。なのでやはり通常通り、「デザインCSS」の設定も入れないといけません。

HTMLは、ゆっるーーーーい言語なので。同じCSS記述が同じHTML上にあったからって干渉とかしません。平然と同じ記述を二箇所入れればよろしいのです。上記画像のように、記事上HTMLに「デザインCSS」と同じCSSを書き込むとよいでしょう。スマホデザインで「PCと同じHTMLを表示する」チェックを入れることを忘れずに。

初心者向けに念のためですが記事上HTMLはあくまでもHTMLを書き込むものであってCSS専用の書き込みスペースではないです。なのでCSSだけポンと書いてもだめですよ、具体的にいうと、<style> ~ </style> で囲んで書くことが必要です。

ぜひとも、ご参考にしていただきたいと思いますー(生活笑百科風締め

借金600万円のハナシとかバブル崩壊のハナシとかに興味がおありの方は、そのうち記事にしますので↓↓読者登録をお願いします。


ブログランキングに参加しています。この画像をクリックしていただけると大変助かります。
にほんブログ村 その他生活ブログ 雑学・豆知識へ
にほんブログ村

ツイッターもフォローよろしくです。アカウントの性質上鍵アカにしてる時もありますがご容赦。
平川めぐみさん( @shmegmeg )※

http://twitter.com/shmegmeg/

↓スターやブックマークも、もしいただけましたら大変うれしいです。