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

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

はじめに

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

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

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

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

その証拠に

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

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

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

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

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

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

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

（②③は前の画面なので省略しました。）

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

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

テキストエディタは何でもいいです。私はWindowsに付いている「メモ帳」を使いました。

上の画面は、ペースとしたところです。本当はもっと下までコードが並んでいます。

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

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

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

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

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

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

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

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

少し解説すると、

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

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

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

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

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

そうすると下の画面のようになります。
②の選択中のフォルダがちゃんと「SmartPhone」になっています。
③「SmartPhone」フォルダ内にはまだにも入っていないはずなので、デフォルトではここは空っぽです。

アップロードは超簡単！
①アップロードをクリックして、２．で作ったスマホ用のCSSファイルを選ぶだけです。
そうすると、上の画面のように③にスマホ用のCSSファイルが表示されます。

これで終了！

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

ブログ記事にスマホ用のCSSファイルのリンクを貼って、スマホでもCSSの設定が反映されるようにします。

上の画面は、まさにこの記事のHTMLコードです。このように記事の中にHTMLのlinkタグを書いてください。私はわかりやすいように一番上にしました。どこでもいいですが、HTMLはコンピュータが上から読んでいくので一番上がいいと思います。ホントはヘッダーに書くものだとは思いますが、ライブドアブログがそんな仕様になっていないので。

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

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

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

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

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

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

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

注意事項

ＰＣの表示例

スマホの表示例

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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