css



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






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

はじめに

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

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



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

PC版ではCSSガチャンと反映されているのに、スマホでは反映されない。
それは、ライブドアブログの仕様が原因です。
簡単にいうと、CSSのカスタマイズはPC版ではサポートされいるが、スマホ版ではCSSはサポートされていないということです。
その証拠に
 ブログ設定 → デザイン設定 → PC or スマートフォン → カスタマイズ
と同じように進んでも、PC版にはCSSの設定画面が出ますが、スマホ版では出てきません。
ブログの方でスマホを検知したら、自動的に別の設定を反映させる仕様になっています。

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



おすすめ読者

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





2.スマホ用の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版とスマホ版で変えたい人は、このファイルをテキストエディタで編集するといいでしょう。




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

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


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

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

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

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

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

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


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

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




4.ブログ記事にスマホ用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に書き換えて使ってください。

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




5.注意事項

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



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

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

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



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

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

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

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



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

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



6.まとめ 

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

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

現時点でけんちゃんとしては、
・hタグはこのままの方が見やすい。
・h2タグだけは、CSSを反映させてもいいかも。
と思っています。
うちの記事は、h2タグの見出しに目次からリンクで飛ぶようになっているからです。
目次の項目と対応していることが一目でわかった方が、読者が読みたいところにアクセスしやすいですよね。



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