【完成版】ライブドアブログのスマホ・PCに、共通のCSSを適用する方法

  • ブックマーク

css

スマホのCSS設定に試行錯誤したけど、とうとう解決策が見つかったぜ!

こんにちは。CSSはぶっちゃけ苦手、赤ペソ先生(@spinf60 )です。

 

試行錯誤の期間が長かったんですが、ブログ読者さんからのコメントで、一気に解決しました!

そんなわけで今回はタイトルにもある通り、スマホ表示・PC表示共通のCSSを適用する方法の解説です。

 

ブログ読者さんのコメントが解決の糸口に!

※適用方法だけ知りたい人は、こちらをクリック下さい

 

このブログは、コメントを記入できるように開放しているので、ホントたま~にですけどコメントが来ます。

ある日、こんなコメントをいただきました。。

はじめまして。
自然観察Blogを運営しております、ちたまと申します。

「Livedoorブログ スマホ CSS」で探してたどり着きました。
外部にCSSファイルを起き、記事内でlink relで呼び出す…
目からうろこで、とても参考になりました。

Dropboxを利用する方法も、驚きましたが、代替案がないとのことで試行錯誤した結果、Livedoorの「画像/ファイル」にCSSをアップロードすることで解決しました!
すでに既出でしたら申し訳ないのですが。

おかげさまで、スマホのデザインが解決できそうです。
ありがとうございました。

 

ちなみにこちらの記事に対するコメントです。

 

コメントくださったのは、同じライブドアブログで書かれている自然観察blogの、ちたまさんでした。

 

いやいやいや、目からウロコはこちらの方ですよ!

『Dropbox使えなくなるならめんどくさいなぁ』とか

『サーバー借りてアップロードするしか無いのかな?』と思っていたら、灯台下暗し。

ライブドアブログのファイル管理で普通にできたんじゃないか(;´Д`) すげぇ遠回りしてた(・_・;)

 

そんなわけで早速検証です!!

 

ライブドアブログのスマホ・PC共通のCSSを適用する方法

ここからは、実際にやってみた結果をツイートしたもので、まとめますね。

PC画面での操作になりますが、こちらの画像です。

 

ライブドアブログでCSS


記事本文中……というのは、実際に記事を書く時に文章入力する『記事を書く』の画面のことです。

コレに関しては、こちらの記事に詳しく書いています。

 

これで完成です……マジかよ(;´Д`)

 

ただ……ちょっとだけ注意事項。

このコードを記事本文に貼り付ける時、スマホでやるとおそらく失敗します。

パソコンの編集画面で記事を書いたほうが良いです。

 

あと、実際に表示させる際に注意点がいくつかありますので、そちらもまとめます。

 


 

※『容量に制限はない』とつぶやいていますが、実際は500MBまでです。失礼しました。

 


見出しの色が変わってしまう問題については、次のツイートをご覧ください。

見ていただくとわかるように、記事本文以外の『人気記事』も色が変わっています。

ですので、h2だけ別のクラスを設定しています( h2 .akapeso みたいな感じ )。

 

記事本文中にはじめてCSSを書き込んだ時に気づいたんですが、冒頭に記述したCSSは2ページ目になると適用されてませんでした。

今回の方法で試してみましたが、やはりダメでした。

記事後半でもう一回記述すれば良いようなきがするけど、それで良いのかは微妙。

 

パソコンで記事を書いている時に、スマホでの見た目を確認したくても表示できなかったので、わざわざスマホで確認してたんですが、このページからログインすればスマホ表示でのプレビューが見れますよ♪

ブラウザの別タブに開いておくと便利です。

 

Google Chromeではスマホの画面サイズに合わせた表示確認ができるので、実際のスマホで見る状態に近いプレビュー画面が確認できます。

 

ここからは、実際に適用させた画像です。

ちょっと見づらいと思うので、別々に画像を貼りますね~♪

 

こちらがPC画面での表示

ライブドアブログ-PC CSS適用後

 

そしてこちらがスマホ画面での表示です。

ライブドアブログ-スマホCSS適用後

 

記事の途中で紹介した、記事本文以外のh2タグの色が変わってしまう問題も解消されてますし、吹き出しもきちんと表示できてるのです(*^_^*)

カエレバのボタン部分の配置に今後の課題が残っていますが、これに関しては誰かのお力を借りるとしましょう(;´Д`)

 

まとめ

これでほぼ解決でしょ!

ライブドアブログのスマホ表示にCSSが適用できなくて悩んでた皆さん!この方法でお楽しみ下さい。

 

ちなみに……このまとめのように、ふきだし会話も実現できるので、下の関連リンクから見てね♪

 

コメントくださったちたまさん。本当に有難うございますm(_ _)m

 

みなさんも、自分好みのデザインをガンガンいじってくれたまえ。

 

※ライブドアブログのカスタマイズ方法を色々まとめてみたので、こちらもご覧ください(*^_^*)

 

そんなわけできょうのブログはここまで。

最後までご覧いただきありがとうございます。

またどこかの備忘録で(^_^)/~

赤ペソ先生(@spinf60 )でした。

  • ブックマーク

この記事を書いた人

赤ペソ先生

とにかく仕事をしたくないオッサンです。自分の好きなペースで働きたいので、契約社員+在宅ワークの複業で生計を立てています。#今日の買物 ヤギと昼寝が大好き。