css

ライブドアブログのスマホCSS設定に試行錯誤していたんだけど、とうとう解決策が見つかったぜよ!

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


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

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


SPONSORED LINK


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

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

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

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

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

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

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


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


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


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

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

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

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


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


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

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

PC画面での操作になりますが、下のツイートに添付してある画像です。


わたしは、styleフォルダを作成して、そこにCSSを入れました。


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

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


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

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



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


コレに関しては、次のツイートをご覧ください。

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

ですので、h2だけ別のクラスを設定しています。


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

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

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


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

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


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


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

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


こちらがPC画面での表示

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


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

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


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

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


まとめ

ライブドアブログでスマホ表示にCSSが適用できなくて悩んでた皆さん!

これでほぼ解決でしょ!


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


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


そんなわけできょうの備忘録はここまで。
最後までご覧いただきありがとうございます。
またどこかの備忘録で(^_^)/~ 赤ペソ先生(@spinf60 )でした。


読者登録すると、ブログ更新した時にLINEでお知らせします♪


↓↓赤ペソ先生が利用しているサービスまとめ

おすすめ

SPONSORED LINK


「この記事がいいね!」と
君が言ったから
2月 23 日は
赤ペソ記念日♪

最新情報をお届けします

Twitterで赤ペソ先生をフォローしよう!