ライブドアブログでスマホでもCSSを反映させる方法

けんちゃん 喋る S

ライブドアブログを利用のみなさん!
CSSの設定をがんばった後、スマホ版を見たら
「変わってないやないか~い
となったことはありませんか?

ジャンプできる目次

ライブドアブログでスマホでもCSSを反映させる方法

はじめに

ライブドアブログでブログを書いているみなさん、今日もコツコツ書いてますかあ?きれいなブログにしようとCSSの設定をがんばったのに、スマホ版は反映されてない…ってことありますよね。スマホ版でもPC版と同じようにCSSの設定を反映させる方法を紹介します。

私の力では解決できないこともありましたので、それが気になる方は「5.注意事項」から読んでください。

ライブドアブログの仕様について

PC版ではCSSがちゃんと反映されているのに、スマホでは反映されない。それは、ライブドアブログの仕様が原因です。簡単にいうと、CSSのカスタマイズはPC版ではサポートされいるが、スマホ版ではCSSはサポートされていないということです。

その証拠に

ブログ設定 → デザイン設定 → PC or スマートフォン → カスタマイズ

と同じように進んでも、PC版にはCSSの設定画面が出ますが、スマホ版では出てきません。ライブドアブログの方でスマホを検知したら、自動的に別の設定を反映させる仕様になっています。

そこで、今回はスマホ用のCSSファイルを別に作ってリンクを読み込ませることで、スマホ版CSSを実現していきます。

おすすめ読者

・ライブドアブログを使っている人
・CSSをいじっている人
・CSSをスマホ版にも反映させたい人

スマホ用のCSSファイルを作ろう!

スマホ用のCSSファイルを作る準備をしよう。

「作る」って難しそう!
いえいえ、超簡単です。
スマホ用のCSSファイルといっても、PC版と同じCSSを反映させるので基本はコピペするだけです。

まず、もとになるPC版のCSSを開きましょう。

①ブログ設定 → ②デザイン/ブログパーツ設定 → ③PC → ④カスタマイズ → ⑤CSS

デザイン設定 PC-CSS-colored
(②③は前の画面なので省略しました。)

この画面まで来たら、⑥のように今回コピーしたいCSSの部分をスクロールさせて表示させましょう。⑥の「記事本文」の部分ですね。表示させたら、スマホ版にも反映させたい部分をコピーします。あまりこだわらない人は、「記事本文」のはじめから終わりまでコピーしましょう。

次に、テキストエディタを立ち上げてペーストします。

テキストエディタは何でもいいです。私はWindowsに付いている「メモ帳」を使いました。
メモ帳 Smart Phone-css
上の画面は、ペースとしたところです。本当はもっと下までコードが並んでいます。

では、スマホ用CSSファイルを作りましょう。

作るといっても名前を付けて保存するだけです。 ここで注意しないといけないのが、テキストファイル(txt)ではなく、CSS(css)ファイルとして保存することです。名前を付けて保存するときに、拡張子を必ず「.css」にしてください。ファイル名は何でもいいです。私は「SmartPhone.css」にしました。

これで、スマホ用のCSSファイルが完成しました CSSの設定をPC版とスマホ版で変えたい人は、このファイルをテキストエディタで編集するといいでしょう。

スマホ用のCSSファイルをアップロードしよう!

2.で作ったスマホ用のCSSファイルをライブドアブログのサーバーにアップロードして使えるようにしましょう。
といってもとっても超簡単です。順を追って説明します。

まず、アップロードするフォルダを作ります。

私はアップロード用に新しいフォルダを作りましたが、新しいフォルダを作らなくても、ルートフォルダにアップロードすることもできます。

①画像/ファイル → ②ファイル管理 → ③フォルダを作る

ファイル管理 フォルダを作る colored2
①、②、③を順番にクリックしていくとフォルダを作ることができます。

少し解説すると、

は現在選択しているフォルダです。
(画面はルートフォルダを選択しています。)

は現在選択しているフォルダの中身です。
(画面は、ルートフォルダの中にSmartPhoneフォルダがあることを示しています。SmartPhoneフォルダは私が作ったフォルダなので、デフォルトではここには何もありません。)

フォルダ名は何でもいいです。
わかりやすいように、私は「SmartPhone」にしました。
フォルダを作り終えると、上の画面のようにルートフォルダの中に作ったフォルダが表示されると思います。

スマホ用のCSSファイルをアップロードします。

上の画面の⑤のフォルダ内にアップロードしたいので、⑤のフォルダをクリックして選択します。

そうすると下の画面のようになります。
②の選択中のフォルダがちゃんと「SmartPhone」になっています。
③「SmartPhone」フォルダ内にはまだにも入っていないはずなので、デフォルトではここは空っぽです。
ファイル管理 アップロード colored
アップロードは超簡単!
①アップロードをクリックして、2.で作ったスマホ用のCSSファイルを選ぶだけです。
そうすると、上の画面のように③にスマホ用のCSSファイルが表示されます。

これで終了!

ブログ記事にスマホ用CSSファイルのリンクを貼ろう!

ブログ記事にスマホ用のCSSファイルのリンクを貼って、スマホでもCSSの設定が反映されるようにします。
CSSリンク colored
上の画面は、まさにこの記事のHTMLコードです。このように記事の中にHTMLのlinkタグを書いてください。私はわかりやすいように一番上にしました。どこでもいいですが、HTMLはコンピュータが上から読んでいくので一番上がいいと思います。ホントはヘッダーに書くものだとは思いますが、ライブドアブログがそんな仕様になっていないので。

CSSリンクコード

これは、リンクのコードだけを拡大したものです。ちょっとだけ解説します。

①linkタグ
リンクがあることを示しています。

②URL
リンク先のURLを「href」の後に続けて書きます。この記事の場合は、けんちゃんのブログの中の、SmartPhoneフォルダの中の、SmartPhone.cssファイルを参照してね!という意味になります。

③ファイルタイプ(MIMEタイプ)
拡張子みたいにファイルの種類を表します。この場合は、テキストでCSSってことです。(そのまんまですね。

④リンクの関係性
このHTMLから見たリンク先の関係性です。リンク先がCSSなので、スタイルシートですね。(これもまんまですね。

コピペ用

<link  href=”★” type=”text/css” rel=”stylesheet”>

コピペ用も用意したので、★のところをそれぞれのURLに書き換えて使ってください。

これで完成 思ったより簡単でしたね。ぜひ、自分のブログで試してくださいね。

注意事項

PCの表示例
PCの表示例
スマホの表示例
スマホの表示例

同じCSSで、PCでの表示画面とスマホでの表示画面を比べてみました。縦横比が全然違うのはすみません。パッと見た感じ、同じように表示されているようにも見えますが、よく見るとちょっと違います。

hタグはちゃんと反映されない

目次の次の小見出しは、hタグについてCSSでスタイルを設定しているので、本来であればPC版のように表示されるはずです。でも、スマホ版の小見出しは、太字になっているだけで、青地に白にはなっていません。これも、ライブドアブログの仕様のようです。

これを解決するために、解決策を公開してくれている先人もいます。「Fuzzy Match」さんの記事がわかりやすいと思います。個人的にはメンテナンス性をもう少し考えたいので、今回はこの方法は使いませんでした。

字や図の大きさは調整する必要がある

まず、スマホの方が吹き出しの中と目次の中の字が大きいです。スマホなので大きい方が読みやすいという考えもあるでしょうが、他の文章の字と比べると少し大きすぎるように感じます。

  • インパクトを与えるためにこの大きさでいくのなら、文を短くする。
  • バランスをとってフォントを小さくするのなら、スマホだけフォントサイズを調整する。

    といった調整をする必要がありそうです。

    次に、図の大きさです。けんちゃんの顔は、吹き出しのフォントサイズと合わせるのなら、このままの大きさでいいともいますが、顔も文も小さくした方がサクッと読めてテンポが出てきそうです。

    各記事にリンクを貼る必要がある

    基本的にスマホ版にCSSを反映させたければ、記事内にリンクを貼らなければいけないので、過去に書いた記事にも反映させたければ、過去記事にも全てリンクを貼っていかなければいけません。 記事が多ければ多いほど、辛い作業になります・・・。ブログの成長がわかるのもいいかなと思い、私は過去記事はノータッチの方針です。 (苦しいいいわけ・・・)

    まとめ

    PC版のCSSで設定したことは、スマホ版でもだいたい反映されるようになりました。ただし、hタグだけは反映されません。また、細かい大きさのバランスは調整する必要があります。これはライブドアブログの仕様もあるので仕方ありません。

    この記事を書くにあたって、PC版とスマホ版をたくさん見比べましたが、スマホ版はそんなに見た目はこらなくてもいいのかな、と思ったことも事実です。やはり画面が小さいので、あまりこりすぎるとゴチャゴチャして見にくいこともあります。

    現時点でけんちゃんとしては、

    • hタグはこのままの方が見やすい。
    • ただし、h2タグだけはCSSを反映させてもいいかも。

      と思っています。うちの記事は、h2タグの見出しに目次からリンクで飛ぶようになっているからです。目次の項目と対応していることが一目でわかった方が、読者が読みたいところにアクセスしやすいですからね。

      けんちゃん 笑う S

      これでスマホのCSS対策もバッチリ!
      h2タグ対策は、また違う記事で書きたいと思います!

      少しでも参考になったら、下の「♡」「コメント」いただけると嬉しいです! 質問も大歓迎です!

      この記事が気に入ったら
      フォローしてね!

      よかったらシェアしてね!
      • URLをコピーしました!
      • URLをコピーしました!

      コメント

      コメント一覧 (4件)

      • こんにちは。
        ライブドアブログ使用者で、スマホ版もデスクトップ版と同じフォントにしたかったので、こちらの記事でCSSの作り方を丁寧にわかりやすく解説してくださり、とても助かりました。

        御礼を申し上げます。

        • フォッコさん、コメントありがとうございます。m(_ _)m
          お役に立てて嬉しいです。この世界は知ってしまえば、「な~んだ」ということばっかりですからね。

          CSS使えるようになると楽しいですよね。どんどんステキなブログにしていってください!(^^)/

      • コメント失礼します。
        大変詳しく説明頂き、ありがとうございます!
        私は画像わ沢山貼った時に画像と改行後の画像の間が広いのが気になり、PC版では狭くする事に成功したのですが…
        それをスマホ版に反映させる事が出来ずに悩んでいます。
        今回の方法でリンクを作って記事の最初に貼ったのですが、反映されず…
        どうしたら良いでしょうか。
        もしご存知でしたら教えて頂けると嬉しいです。

        • 質問ありがとうございます!(^^)/
          返信遅くなってすみません!(^^;

          詳しく状況を知りたいので、できれば写真前後のHTMLコードやCSSコードを教えていただけるとありがたいです。

          ちなみに、記事本文内の写真は下のCSSで設定しているようです。ただし、私のPC版のコードです。(スマホ版はどのようなCSSになっているのかは確認できませんでした。)CSSはクラス名などが重複していると後で読み込んだ方に上書きされるので、スマホ版CSSでこのあたりをいじってみると調整できるかもしれません。参考にしてください。

          .article-body-inner img.pict{
          border: 5px solid #fff;
          box-shadow: 0px 3px 8px rgba(51, 51, 51, 0.2);
          height: auto;
          margin: 1em 6px 1.5em!important;
          max-width: 98.4%;
          }

      コメントする

      ジャンプできる目次