こんにちは。ユージーン(@Eugene_no2)です！
このサイトでは、ライブドアブログのデザインのカスタマイズ方法について、基礎知識やノウハウを紹介しています。
ライブドアブログの特徴として、PC（パソコン）向けページのデザインはかなり自在にカスタマイズできる一方で、スマホ向けページは、カスタマイズする上での制約が多いんです。
このページでは、ライブドアブログのスマホページのカスタマイズについて、詳しく解説したいと思います。
PC用ページのカスタマイズについて詳しく知りたい方はこちら。↓
| 合わせて読みたい
|
[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言
ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。… |
※ライブドアブログサービスの仕様が変更された場合には、このページも随時更新をする予定ですが、一時的に最新情報ではない可能性もありますのでご容赦ください。（最終更新日：2016/2/5）
スポンサーリンク
スマホ向けページの広告は外せない？
まず、スマホ向けページの基礎知識として、絶対にどうにも動かせないものがあります。
それが、ライブドアブログ側が設置する広告です。
ライブドアブログのスマホサイトでは、１ページにつき２か所、
- トップページの場合、ブログタイトル下と、記事一覧の下
- 個別記事ページの場合、ブログタイトル下と、記事本文の下
に、自動的に広告が挿入されます。
この広告は、例え読者がクリックしても、ライブドアブログ側の収益となり、わたしたちの手元には一銭も入りません。
知らなかった方はガッカリかも知れませんが、このライブドアブログが設置する広告は、非表示にすることも出来なければ、広告の位置を変えることも出来ません。
そしておそらく、この広告に関しては、今後も、動かしたり消したり出来るようになることは、まずないと思います。
なぜなら、この広告こそが、ライブドアブログの主要な収益源のはずだからです。
ライブドアブログは、2015年5月に、完全に無料化されました。
2015年5月1日、ライブドアブログは有料プランを撤廃いたしました。すべてのブログでPREMIUMプラン相当の機能を無料でご利用いただけます。（引用：有料プランガイド - ライブドアブログ）
それはつまり、ライブドアブログはユーザー課金による収益を捨て、広告による収益に集中させたということ。
そしてこの強制的に挿入される広告は、割とクリックされやすく、収益性の高いと言われている位置に貼られているんですよね。
広告収入で稼ぎたいブロガーの方にとっては、「いい場所取られちゃってる状態」、と言えるかも知れません。
スポンサーリンク
スマホ向けページでは、CSSが機能しない？
さて、ライブドアブログでスマホ向けページをカスタマイズしようとする場合、もう一つ知っておくべき制約があります。
それは、スマホ向けページではCSSが効かないということ。
CSSとは、簡単に言えば、ブログに書かれている文章の背景色やフォント、余白、囲み線、影など、デザインを指定するための言語です。
PC向けページでは、CSSの記述(内容)を変えることによって、サイトのデザインを自在にカスタマイズすることが出来ます。
詳しくは、こちらのページをご覧ください。
| 合わせて読みたい
|
[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言
このサイトでまとめているカスタマイズ方法は、CSSというものをいじり倒します。 CSSが何なのか良く分かっていなくても… |
しかし、せっかく書いたCSSも、残念なことにスマホ向けページのデザインには反映されないんですよね。
例えば、このブログも、PCでページを見た場合、見出しや引用部分は次のようなデザインにしています。
ところが、これをスマホからスマホ向けページで見ると、
こんな感じになってしまうんです。
PC向けページのサイトデザインをどんなに装飾しても、スマホ向けページでは必ずこのデザインになります。
つまり、ライブドアブログを使っている以上、スマホから見たサイトデザインは、どのブログでもあんまり違いがない、ということなんです。
もしスマホ向けページも、PC向けページと同じようにデザインを自在にカスタマイズしたい方には、ライブドアブログは向いていないかも知れません。
WordPressなどを使ったほうがいいでしょう。
ちなみに、ライブドアブログではスマホ向けページのテンプレートが山ほど用意されていますが、そのほとんどは、ヘッダー（タイトル部分）や背景のデザインや文字色が異なるくらいで、基本となるデザインは、みんな一緒です・・・。
スマホ向けページでは、スクリプトも動かない？
スクリプトって何？っていう方は、この章は読み飛ばしても問題ないと思います。(この章を飛ばす)
JavaScriptは、Webブラウザ上で動かすことのできる簡単なプログラム言語です。HTMLだけでは動くWebページはできませんが、JavaScriptを使うとWebページにさまざまな動きを入れることができるようになります。（引用：初心者のためのJavaScript入門）
ライブドアブログでは、スクリプトもまた、CSSと同様にPC向けページでしか機能しないのです。
例えば、このブログでは、「Milliard関連ページ」を導入しています。
このブログの記事の下にある、「こんな記事も書いてます！」ってやつです。
このMillard関連ページは、自動的にそのページを訪れた読者が興味を持ちそうな記事を表示してくれる優れたサービスですが、このプログラムにはスクリプトが使われています。
なので、残念ながらライブドアブログでは、Millard関連ページをスマホ向けページに導入することが出来ないということです。
ちなみに、Millard関連ページのWebサイトには、次のようにあります。
Livedoorブログのスマートフォン版で表示されるには、Milliard関連ページが公式のブログパーツとして認定頂く必要があります。現在は認定されていませんが、いつの日か認定されることを夢見ています。
スポンサーリンク
スマホ向けページでカスタマイズ出来ることとは？
さて、ここまでは出来ない事ばかり並べて来ましたが、じゃあ何なら出来るのさ？って話をします。
ライブドアブログのスマホ向けページのデザインとしてカスタマイズ出来るのは、
- タイトル文字の大きさ、色
- 背景色
- 各ブログパーツの枠線の有無、色
といったあたりです。
タイトル文字の大きさを変えたり、タイトルを自分で用意した画像にするには、「ブログ設定」のデザイン / ブログパーツ設定の「スマートフォン」から、「レイアウト」のタブを開き、「ブログタイトル」の「設定」からカスタマイズすることが出来ます。
背景色や文字、枠線の色などをカスタマイズするには、先ほど同様、デザイン / ブログパーツ設定の「スマートフォン」の「カスタマイズ」タブから、もろもろ変更することが出来ます。
スポンサーリンク
「記事を書く」以外のHTMLも反映されない？
もう一つ、デザインに関連して、HTMLについても補足しておきたいと思います。
実は先ほどスマホ向けページはCSSが機能しないという話をしましたが、実はHTMLについても、ライブドアブログ特有の制限があります。
例えば、このブログのPC向けページを見ると、必ず記事本文の直下に「人気記事セレクション」という、リンク集を入れています。
これは、ブログ記事ごとに編集画面で毎回書いているわけではなく、ブログ設定のHTMLを編集して、どの記事にも、自動的に入るようにしているんです。
もし、毎回決まった文章を記事ごとに手入力されている方は、ブログ設定のHTMLを使えば、一括で入れられるので、覚えておいたほうが良いですよ！
「ブログ設定」のデザイン / ブログパーツ設定の「PC」から、「カスタマイズ」のタブを開き、そこにHTMLを書き加えていくやり方です。
（具体的な方法については、改めて記事にしますのでお待ちくださいm(_ _)m..,）
ところが、このように「記事を書く」ページ以外で書き加えたHTMLもまた、スマホ向けページだと反映されないんです。
スマホ向けページの記事本文の中には、あくまで、「記事を書く」ページで書いた内容しか、表示されないんですね…。
うーん、これほんと不便だなぁ…。
さて、今回はライブドアブログのスマホ向けページのカスタマイズについてまとめました。
先ほども書きましたが、スマホ向けページのデザインもがっつりカスタマイズしたい人は、ライブドアブログは向いていないかも知れません。
特にこれからは、PCよりもスマホからのアクセスが中心になる時代です。
離脱率を下げたり、回遊率を上げる効果もあると思うのでぜひ、もうちょっとスマホ向けページもカスタマイズ出来るようにしてくれたら嬉しいなぁ・・・。