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

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

借金600万円のハナシはともかく、例えば私の場合、このブログにおいてはご覧のようにリンク装飾CSSを適用しています。

おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ - NO TITLE

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

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

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

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

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

「どこが広末だ！」

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

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

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

↓スマホ版の設定画面で「記事」を選択

↓

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

↓PC版の設定画面で「記事」を選択

↓

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

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

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

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

ご参考になりましたら、読者登録やブックマークをお願いいたします。