スマホのCSS設定に試行錯誤したけど、とうとう解決策が見つかったぜ！
こんにちは。CSSはぶっちゃけ苦手、赤ペソ先生（@spinf60 ）です。
試行錯誤の期間が長かったんですが、ブログ読者さんからのコメントで、一気に解決しました！
そんなわけで今回はタイトルにもある通り、スマホ表示・PC表示共通のCSSを適用する方法の解説です。
目次
ブログ読者さんのコメントが解決の糸口に！
※適用方法だけ知りたい人は、こちらをクリック下さい
このブログは、コメントを記入できるように開放しているので、ホントたま～にですけどコメントが来ます。
ある日、こんなコメントをいただきました。。
はじめまして。
自然観察Blogを運営しております、ちたまと申します。「Livedoorブログ スマホ CSS」で探してたどり着きました。
外部にCSSファイルを起き、記事内でlink relで呼び出す…
目からうろこで、とても参考になりました。Dropboxを利用する方法も、驚きましたが、代替案がないとのことで試行錯誤した結果、Livedoorの「画像/ファイル」にCSSをアップロードすることで解決しました！
すでに既出でしたら申し訳ないのですが。おかげさまで、スマホのデザインが解決できそうです。
ありがとうございました。
ちなみにこちらの記事に対するコメントです。
コメントくださったのは、同じライブドアブログで書かれている自然観察blogの、ちたまさんでした。
いやいやいや、目からウロコはこちらの方ですよ！
『Dropbox使えなくなるならめんどくさいなぁ』とか
『サーバー借りてアップロードするしか無いのかな？』と思っていたら、灯台下暗し。
ライブドアブログのファイル管理で普通にできたんじゃないか(；´Д｀) すげぇ遠回りしてた(・_・;)
そんなわけで早速検証です！！
ライブドアブログのスマホ・PC共通のCSSを適用する方法
ここからは、実際にやってみた結果をツイートしたもので、まとめますね。
★ライブドアブログのスマホ・PC表示に共通のCSSを適用する方法★
１．管理メニューの『画像／ファイル』から『ファイル管理』メニューに入る。
２．CSS用のフォルダを作成し、そこにcssファイルをアップロードする。
PC画面での操作になりますが、こちらの画像です。
★ライブドアブログのスマホ・PC表示に共通のCSSを適用する方法★
３．アップロードされたCSSファイルをクリックしてURLをコピー
４．記事本文内に <link href=&vquot; コピーしたURL &vquot; type=&vquot;text/css&vquot; rel=&vquot;stylesheet&vquot; /> を記述
記事本文中……というのは、実際に記事を書く時に文章入力する『記事を書く』の画面のことです。
コレに関しては、こちらの記事に詳しく書いています。
これで完成です……マジかよ(；´Д｀)
ただ……ちょっとだけ注意事項。
このコードを記事本文に貼り付ける時、スマホでやるとおそらく失敗します。
パソコンの編集画面で記事を書いたほうが良いです。
あと、実際に表示させる際に注意点がいくつかありますので、そちらもまとめます。
★ライブドアブログのスマホ・PC表示に共通のCSSを適用する方法★
※注意点１
・見出しタグ(h2,3等)、pcの設定では .article-body-inner と、クラス指定されているけどこれを付けてるとうまくいかない。
★ライブドアブログのスマホ・PC表示に共通のCSSを適用する方法★
※注意点２
・ただしh2タグだけは別のクラス指定が必要。スマホ表示した際、他のアイテムの見出しも一緒に変わってしまうため。
※注意点３
・GIFもアップロード可能。ただし１ファイル10MBまで。容量に制限はない。
※『容量に制限はない』とつぶやいていますが、実際は500MBまでです。失礼しました。
見出しの色が変わってしまう問題については、次のツイートをご覧ください。
見出し・カエレバ・ふきだしのCSS読み込み成功。ただ、本文以外の見出しも色が変わっているのだ。 https://t.co/5qhklC71jO
見ていただくとわかるように、記事本文以外の『人気記事』も色が変わっています。
ですので、h2だけ別のクラスを設定しています（ h2 .akapeso みたいな感じ ）。
★ライブドアブログのスマホ・PC表示に共通のCSSを適用する方法★
※注意点４
・複数ページに渡る場合、２ページ目以降CSSが適用されない可能性がある。
記事本文中にはじめてCSSを書き込んだ時に気づいたんですが、冒頭に記述したCSSは２ページ目になると適用されてませんでした。
今回の方法で試してみましたが、やはりダメでした。
記事後半でもう一回記述すれば良いようなきがするけど、それで良いのかは微妙。
★ライブドアブログTips★
このURLにアクセスすると、パソコンのブラウザからでも、スマホ表示での編集・プレビューができます。
https://t.co/o95uKdjr7E
パソコンで記事を書いている時に、スマホでの見た目を確認したくても表示できなかったので、わざわざスマホで確認してたんですが、このページからログインすればスマホ表示でのプレビューが見れますよ♪
ブラウザの別タブに開いておくと便利です。
スマホ表示を確認する時は F12キーで開発者モードを利用したほうが見やすい。
Google Chromeではスマホの画面サイズに合わせた表示確認ができるので、実際のスマホで見る状態に近いプレビュー画面が確認できます。
ここからは、実際に適用させた画像です。
画面中に広告が入っているのがPC表示。
両サイド青いのがスマホ表示。
一応どちらも同じCSSで処理されてます。 https://t.co/yUG5ovMnGJ
ちょっと見づらいと思うので、別々に画像を貼りますね～♪
こちらがPC画面での表示
そしてこちらがスマホ画面での表示です。
記事の途中で紹介した、記事本文以外のh2タグの色が変わってしまう問題も解消されてますし、吹き出しもきちんと表示できてるのです(*^_^*)
カエレバのボタン部分の配置に今後の課題が残っていますが、これに関しては誰かのお力を借りるとしましょう(；´Д｀)
まとめ
これでほぼ解決でしょ！
ライブドアブログのスマホ表示にCSSが適用できなくて悩んでた皆さん！この方法でお楽しみ下さい。
ちなみに……このまとめのように、ふきだし会話も実現できるので、下の関連リンクから見てね♪
コメントくださったちたまさん。本当に有難うございますm(_ _)m
みなさんも、自分好みのデザインをガンガンいじってくれたまえ。
※ライブドアブログのカスタマイズ方法を色々まとめてみたので、こちらもご覧ください(*^_^*)
そんなわけできょうのブログはここまで。
最後までご覧いただきありがとうございます。
またどこかの備忘録で(^_^)/~
赤ペソ先生（@spinf60 ）でした。
28 件のコメント
赤ペソ先生のこちらの記事のおかげで、ライブドアブログのスマホ表示にCSS適用できました！とてもためになる記事をありがとうございました！
>saxopia さん
コメントありがとうございます。
無事にCSS適用できたみたいで良かったです(*^_^*)
ふきだし会話も使えるようになったのでお試しください＼(^o^)／
はじめまして。
この記事を拝見し、スキルのない私でもCSS適用ができました。
諦めていたことだったので、成功したスマホ画面を見た時は嬉しかったです。
ありがとうございました。
> ジャモカさん
コメントありがとうございます。
うまく行ったようで嬉しいです。
記事の最後に追記しましたが、この方法でLINE風のふきだし会話も実現できます。
またお試しください♪
赤ペソ先生様、はじめまして。ライブドアブログのスマホ表示が、もっと見やすくなればいいと思い、検索していたら、赤ペソ先生の記事に辿り着きました。
どの方法をとってもスマホ表示、うまく表示しません。暫定版にあるように、記事内に
と、ｂタグのみを張り付けてもスマホでは表示できません。
私のCSSの表記そのものが違うのでしょうか？
スマホのデザイン設定に問題があるのでしょうか？
何をどう表記すればいいのか分かりません。
どうか詳しく解説していただけないでしょうか？
宜しくお願い致します。
追記になります。
勝手ながら、
当方のブログと、http://hiroshan-medaka.blog.jp/
なります。
どうかよろしくお願いいたします
> ひろさん
コメントありがとうございます。
http://hiroshan-medaka.blog.jp/archives/70545697.html
こちらのページの記事で仮に話をしますと
さて突然ですが
の前に
を貼り付けてスマホ表示を見ると、黄色で強調されますよ。
お返事ありがとうございます。
記事編集にて一番上に
を貼り付けたとき
PC表示は黄色で強調されますが、スマホ(iphone)では、強調されません。
PC表示は、デザイン設定からCSSの編集にて、
b {
background: linear-gradient(transparent 40%, #ffff66 40%);
}
を書き込んであるので、
一度それを削除したあと。
同じ要領で記事の一番上に、
を書き込み更新すると、
PCもスマホでも黄色で強調されません。
（現在、その状況になっています）
当方の、スマホのデザイン設定は、シンプル→BASIC2013を使用しています。
”を貼り付けてスマホ表示を見ると、黄色で強調されますよ。”というのは、赤ペソ先生様のスマホで見ると、「強調されて見えているよ」ということですか？
どうかよろしくお願いいたします。
> ひろさん
私はiPhoneSEを使っています。
デザインを シンプル→basic2013に変更して、新規記事で同じように記入してプレビューしたら、黄色で強調されてます。
あ！
もしかして、ひろさんは、ライブドアブログスマホアプリで記事を書かれてます？
モードが『見たまま編集モード』になってるんじゃないかと思います。
ちょっとめんどくさいのですが
マイページ→アプリ設定→見たまま編集→オフ にして、その冒頭に記述すると大丈夫だと思います。
ただ……これだと、ブログを書く時にHTMLを直に書かないといけないので、切り替えて貼り付けて、また戻して記事を書く必要があるので、ちょっとめんどくさくなります。
お返事ありがとうございます。
普段は、スマホのアプリで記事を書いています。みたまま編集のチェックは、OFFです。
もう一度、みたまま編集のチェックが、OFFの状態にて、スマホアプリで、
さて突然ですが
メダカのオス(雄)とメス(雌)の見分けってどうやってますか？
と記事を書き、更新。
(PCのCSS設定
/* 記事本文
———————————————– */
より下に
〈b〉については書いてません)
これでもPC、スマホどちらも表示されません。
は、青文字表記 になっています。
プログラムとして認識はされているのでしょうが、記事にうまく反映されません
朝から色々と試行錯誤していただきありがとうございます。
よろしくお願いいたします。
> ひろさん
確認したところ……
パソコンお持ちなら、cssファイルを作成したほうが、記事本文もスッキリするし、もっと色々できるのでおすすめです。
赤ペソ先生様。
このまま貼り付けることで、スマホで無事に表示することが出来ました(*´꒳`*)
先生の言われた通り、〈br〉タグが邪魔をしてたようです。
コレで、今後のブログ作りが楽しめそうです。
ありがとうございます。
次の休日にて、pcを使いってcssを編集し、【完全版】にあるようなスマホ表示を目指したいと考えています。
勝手ですが、また、つまづいた時は、お力を貸して頂ければ幸いです。
今回は、本当にありがとうございました。
> ひろさん
無事に表示できたようで良かったです(^_^)
ふきだし会話とかも面白いのでお試しください（笑）
初めまして。
赤ペソ先生さんの記事、Twitterを参考にスマホにもcss適用させることが出来ました。
本当に助かりました。ありがとうございます。
コメントありがとうございます(*^_^*)
うまく適用できたみたいで良かったです。
『ふきだし会話』もなかなか楽しめるので チャレンジしてみるといいですよ～♪
この方法３年前くらい前からやってましたが、ライブドアのスマホはページ分割されるので記事の長さによって適当な所でCSSを追加で入れ込まないといけないんですよね。
デフォルトのCSSに優先順位で負けないように!important使いまくってます。
おぉ、3年前から！
いい加減 スマホでのデザインも自由にいじれるようにしてほしいですね(･_･;
おはようございます。
以前、共通のcssをスマホに適用させる際には、大変お世話になりました。それ以降、綺麗なブログ運営ができてます。ありがとうございます。
過去のリンクなどを貼るのに、もう少し楽ができないか？と考えていると、前回使用した、ファイルのアップロードが使えないものか？と考えているのですが、調べてみてもファイルの呼び出し方法や設定方法も出てきません。
この、ファイルのアップロード機能を使ってリンク集を表示したり、することはできないものでしょうか？
よろしくお願いします。
> ひろさん
リンク集のページを作って公開するのであれば、例えば『link.html』のようにhtmlファイルでリンク集のページを作成して、cssファイル同様、ファイルをアップロードして、記事のページ内にiframeタグで表示するのが良いかなと思いますよ。
ありがとうございます。
iframeタグ。
少し頑張ってみます(^^;;
こんにちは、
ライブドアブログでスマホにスタイルシートの記事はとても助かりました。
もともとPCオンリーでとも思っていたのですが、スマホでもちゃんと見れたほうが良いですよね。
で、私のほうでは洋楽の歌詞に発音記号をつけてアップしています。
よかったら見に来てください。
http://engsong.blog.jp/archives/5842866.html
> tasaさん
コメントありがとうございます。
最近はスマホから見る人のほうが多いですからね♪
お役に立てたようで良かったです。折を見てお伺いします(*^_^*)
こんにちわ、最近ブログを始めた者です。
こちらの記事を参考にCSSファイルや吹き出しの導入を行いました。ありがとうございます！
ただ二つほど問題が発生しまして、意見をお伺いしたくコメントさせて頂きました。 という記述によりcssファイルを導入して色々とカスタマイズができたのですが、導入したcssファイルを編集追記し、ファイル管理から消去→アップロードを行ってもなぜか反映されず、消去してもurlを叩くとファイルがクラウド上に存在していることになっています。時間がたてば完全に消えるようですが、同じ名前のままアップロードをしなければ全ての記事のurlを書き換えなければならないので非常に困っています。
上記の問題から、編集追記する場合は新たにcssファイルを作り（例えば、見出しのcss、吹き出しのcssと分ける）ファイル管理にアップロードし記事上部に下記のように記述しました。 すると、どういうわけか吹き出しが上手く機能しなくなりました（デザインが大きく崩れてしまう）。一つにまとめていた時は上手く機能していただけに、理由が分かりません。複数のcssファイルを導入する場合は上記のやり方ではできないのでしょうか？
以上２点の問題に、お手数ですが、ご回答頂けますと嬉しいです。
クロさん
①わたしは、編集したファイルを削除せず、同名のままアップロードしています。
その後、アップロードしたファイル名をクリックするとCSSが見れますが、その段階では更新されていません。
F5キーで更新すると、新しくアップロードしたCSSに書き換えられて、適用できますよ。
②は、CSS見ないことにはわからないのですが、記述が間違えている可能性が考えられます。
ただ私の場合、①の方法で追記したり変更してもそのまま適用できているので、解決するんじゃないかと思います
返答ありがとうございます！
まさかコメントを書いた直後に返信が来るとは、とても助かりました！
F5キーで更新できるとは、目から鱗です。
試してみたところ、今までの苦労が何だったのかと言うくらいスムーズに編集できそうです。また、仰る通り、デザインが崩れる問題も解決致しました。
大変厚かましいのですが、もう一つ質問よろしいでしょうか？
記事違いではあるのですが続きと言うことでここに書き込ませて頂きます。
『LINE風吹き出し完全版』の赤ペソ先生が左右（lr）の編集をされている方の記述を使用させて頂いたのですが、スマホ表示の際（iphone7）に画像の端側に余白ができてしまい気になっています。
｜余白｜画像左「吹き出し」
「吹き出し」画像右｜余白｜
↑こんな感じです。
この余白部分をどうにかして消したいのですが、どこを弄ればいいでしょうか？
よろしくお願い致します。
クロさん
実は私もそんなに詳しくないんです(笑)
@media screen の-84の数値を変えると変更できます。
ただ、それだけだと吹き出しの方が動かないのですが、そちらがいまいちわかってないです(;´д｀)
回答ありがとうございます。
スマホアプリの方はcssの反映が上手くされず試行するのに難儀していたのですが、Chromeの開発者モード？ を知り、スマホ表示で色々弄っていましたら、解決しましたのでご報告いたします。
@media screen and (max-width: 620px) {
.article-body .l-fuki,
.article-body .r-fuki {
width: 75%
}
.article-body .r-fuki {
margin-right: 15%;
}
.article-body .l-fuki {
margin-left: 25%;
}
}
とすることでmobileM（主流）サイズ上では綺麗なデザインになりました。その弊害として、mobileSサイズではやや端が出てしまいます。また、根本的な解決にはなってなく、依然としてmobileLサイズ上では余白が目立ちました。
おそらく (max-width: 620px) の部分をmobileサイズごとに作らなくてはいけないようです。そこで、それぞれの値を以下のように変更追記しました。
(max-width: 450px) 80%、20%、20%
(max-width: 425px) 79%、21%、21%
(max-width: 400px) 78%、22%、22%
(max-width: 375px) 76%、24%、24%
(max-width: 350px) 74%、26%、26%
(max-width: 325px) 72%、28%、28%
このようにすることで殆どのスマホの表示に対応することが可能になりました。可変式にできればいいのですがそのような知識はなく、暫定的ですが、これで解決としました。
長くなりましたがお付き合い頂きましてありがとうございました。とても助かりました。
クロさん。
いろいろな検証＆情報ありがとうございます！
これは良いですね！