ライブドアブログのスマホ表示にCSSを適用したサンプル

ライブドアスマホCSS

こんにちは。赤ペソ先生(@spinf60 )です。

ライブドアブログでブログを書きはじめて2年ほど経ちます。

ライブドアブログ気に入ってるんですが、どうしても納得行かない事があるんです。

それは……

スマホから見た場合、CSSが適用されない

ってこと。

パソコン版の表示は、デザインをガンガンいじれるし、文章を読みやすくするように入れる見出しも、わかりやすいように色付けできます。

が、しかし……

見やすいように見出しを入れて書いても、スマホから見た場合……

良く言うとシンプルすぎ……

悪く言うと文字の大きさしか変わらないので、もうわけがわかりません。

一応、この下にh2〜h6の見出しを書き出してみます。

見出し2(h2)

見出し3(h3)

見出し4(h4)

見出し5(h5)
見出し6(H6)

パソコンで見ると、見出しに色がついているのですが、スマホだと白黒です……。

しかも、スマホのデザインはほぼいじれないんですよ……

『スマホからの閲覧者が6割を超えている』というのに、ライブドアブログは何をやっているんだ?

とぶっちゃけ思うのです……(*_*;

そんなわけで、2年間ライブドアブログのスマホ表示と格闘し続けた結果……スマホ表示でCSSを適用できたので、その研究成果を発表します。

ちなみにこちらで、カスタマイズ方法を色々まとめてますのでご覧ください。

ちなみにこの下↓から適用された物を表示しています。

CSS適用サンプル

見出し

以前は見出しに直接スタイルを書き込んでましたが、ようやっとできた。

h2〜h6に、それぞれ class aka2〜6 を設定しました。

見出し2

見出し3

見出し4

見出し5
見出し6

見出し5,6はあまり使わないので同じ……(*_*;

その他のサンプル

この部分はCSSファイルに記入しています。

関連記事

関連記事へのリンク

 公式サイト

公式サイトへのリンク

 参考リンク

外部サイト、参考リンク用

ポイント

注目してほしいポイントに使う


強調したい時に使うつもりで作りました。

ドット枠

水色の強調枠

周辺ぼかし枠

縫い目のような枠

ふちがある枠

シンプルな枠

ふきだし会話

吹き出し会話は、CSSに書きましたよね?

そうそう。これね↓

まとめ

カスタマイズのまとめ記事もオススメです

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

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

またどこかのLogで(^_^)/~ 赤ペソ先生(@spinf60 )でした。

この記事を書いた人

赤ペソ先生

赤ペソ先生

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

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします