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

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タグ対策は、また違う記事で書きたいと思います!

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

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

      よかったらシェアしてね!

      コメント

      コメントする

      ジャンプできる目次
      閉じる