プロフィール (1)






こんにちは、よっしゃらまるです。
ブログ訪問ありがとうございます。

ブログのデザインって重要ですよね。きれいにデザインされたブログを見ると、それだけで、

おっ、やるね

ってなります。

何より、記事の信頼性も増します。デザインが雑なブログにアフィリンク貼っていても絶対にクリックする気にはなりませんよね。

ですから、私も最低限ブログのデザインにはこだわっているのですが、ブログ開始当初はひどかったもんです。

特にスマホから見たデザインがひどい!

実はライブドアのブログって、 PC版で設定したCSSが反映されないんですよ。

いまどきありえんでしょ!!!

このスマホ時代全盛期に、せっかく苦労して作り上げたデザインがスマホに反映されないなんて。泣

xx

上の画像は、私のブログの過去90日間のアナリティクスの分析結果ですが、PCからのアクセスなんてたった19.1%しかありません。

スマホが77.2%、タブレットが3.7%。

つまり、ほとんどのブログ閲覧者がPC以外で見ていることになります。

なのに、PCのデザインをいくらいじってもスマホには反映されないなんて。泣

納得いかない私は、スマホ表示にCSSを適用させる方法を血眼になって探しました(大げさです)。

とうとう見つけましたよその方法を!

お教えしましょう!!(といっても人のパクリですが)

今回のネタはこちらの方のブログを勝手に参考にさせて頂いています。(感謝感謝でございます)

iF-Log










ライブドアブログのスマホ表示にCSSが適用されないとはどういうこと?


まずは、スマホ表示にCSSが適用されないとはどういうことかを先に説明しておきます。

次の画像は、PCから見た見出しタグ(h2、h3)のデザインです。

ga


H2タグ、H3タグともにきれいに表示されていますね。



では、次にこのままスマホの表示を確認してみます。

aa


・・・ね? 見出しタグが正常に表示されないでしょ?

ただ字が太くなるだけです。

これがまさに、スマホ表示にPCのCSSが適用されていないということです。 



では、次にスマホ表示にCSSを適用させた場合を見てみます。

aaa


きれいにタグが表示されました。

こっちの方が断然見やすいでしょ?(異論は挟ませませんよ)

ちなみにこのタグは、下のサイトを参考にさせて頂いてます
[ライブドアブログ]全体レイアウトをカスタマイズしよう | No.2宣言







ライブドアブログのスマホ表示にCSSを適用させる方法

実は、めちゃくちゃ簡単なので、その方法を丁寧に説明していきますね。


まずは「デザイン/ブログパーツ設定」の「PC」をクリックします。

bb




次にカスタマイズをクリックします。スマホの表示に適用させたいCSSの部分をコピーします。(今回は、記事本文の見出しタグの部分をコピーします)

bbb




コピーしたCSSをメモ帳に貼り付けます。ファイル名は何でもいいですが、保存する際に必ず拡張子を「css」にしてください。

cc




次に、①「画像/ファイル」から②「ファイル管理」、③「フォルダを作る」の順でクリックします。

hy





フォルダ名を記入してください。(適当でいいです。今回は仮に「sample」というフォルダ名にします)

ccc




作成したフォルダをクリックします。

dd





次に「アップロード」をクリック。

ddd





先ほどメモ帳で作成したcssファイルを選択して「開く」をクリックしてください。

ee




アップロードしたcssファイルをクリックします。

ff




下の画面が現れますので、URLをコピーしてください。

gg




コピーしたURLを下のコードの “ ここにコピーしたURLを入力 ” 箇所に入力してください。

<link  href="ここにコピーしたURLを入力" type="text/css" rel="stylesheet">



このコードを記事本文のHTMLに貼り付ければ完成です。

zz



あとは通常通り記事を書いていくだけです。




これだけで、下のようにスマホの表示にCSSが適用されます。

aaa


簡単でしょ?

これ使えると本当にスマホのデザインがきれいになります。



下の画像のように、アンダーライン引いたり吹き出しを使ったりとかいろいろ出来るので、カスタマイズの幅が広がります。


yy

(※上の画像は「確定拠出年金制度のメリットとデメリットを分かりやすく徹底解説!!」から一部抜粋したもの)




ちなみにこういうボックスデザイン(☟)もスマホで表示できるようになります。(「サルワカ」のCSSとHTMLを参考にさせてもらっています)

サンプル

サンプル

サンプル







ライブドアブログユーザーはクリック報酬型広告「nend」で収入アップしよう

1

少し話は逸れますが、ライブドアブログユーザーって残念ながらクリック報酬型の「グーグルアドセンス」に申込みできません。(ライブドアブログに関わらず無料ブログ全般)

どうせブログを書くならなら広告を貼って少しでも収益化したいところです。

そこで、アドセンスの代わりに「nend」を導入してみてはどうでしょうか?

アドセンスと同じくユーザーにクリックされただけで報酬が発生する「スマホ専用」のクリック報酬型広告です。

登録料・利用料等は一切発生しませんので、貼っておくに越したことはありませんw 

詳しくは下の記事をご覧ください。


↓↓公式サイトはこちら↓↓




\スマホ広告はnendでブログ収入UP!!/




スポンサードリンク