[ライブドアブログ]広告は外せる?スマホページのカスタマイズを解説

こんにちは。ユージーン(@Eugene_no2)です!

このサイトでは、ライブドアブログのデザインのカスタマイズ方法について、基礎知識やノウハウを紹介しています。

ライブドアブログの特徴として、PC(パソコン)向けページのデザインはかなり自在にカスタマイズできる一方で、スマホ向けページは、カスタマイズする上での制約が多いんです。

このページでは、ライブドアブログのスマホページのカスタマイズについて、詳しく解説したいと思います。

注記:16年9月、当ブログはライブドアブログからWordPressに移転しました。現在はライブドアブログではありませんが、引き続き、ライブドアブログを使っている方のお役に立てれば幸いです。ライブドアブログからWordPressへの移転方法の解説はこちら。

PC用ページのカスタマイズについて詳しく知りたい方はこちら。↓

合わせて読みたい


[ライブドアブログ]デザインのカスタマイズ方法まとめ(初心者向け) : No.2宣言




ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。…

※ライブドアブログサービスの仕様が変更された場合には、このページも随時更新をする予定ですが、一時的に最新情報ではない可能性もありますのでご容赦ください。(最終更新日:2016/4/24)

スマホ向けページの広告は外せない?

まず、スマホ向けページの基礎知識として、絶対にどうにも動かせないものがあります。

それが、ライブドアブログ側が設置する広告です。

ライブドアブログのスマホサイトでは、1ページにつき2か所3か所、

  • トップページの場合、ブログタイトル下と、記事一覧の下
  • 個別記事ページの場合、ブログタイトル下と、記事本文の下
  • 16年9月追記:上に加え、スマホ画面の下に常にオーバーレイ広告

が、自動的に広告が挿入されます。

スマホ向けページに強制挿入される広告

この広告は、例え読者がクリックしても、ライブドアブログ側の収益となり、わたしたちの手元には一銭も入りません。

知らなかった方はガッカリかも知れませんが、このライブドアブログが設置する広告は、非表示にすることも出来なければ、広告の位置を変えることも出来ません。

そしておそらく、この広告に関しては、今後も、動かしたり消したり出来るようになることは、まずないと思います。

なぜなら、この広告こそが、ライブドアブログの主要な収益源のはずだからです。

ライブドアブログは、2015年5月に、完全に無料化されました。

2015年5月1日、ライブドアブログは有料プランを撤廃いたしました。すべてのブログでPREMIUMプラン相当の機能を無料でご利用いただけます。

それはつまり、ライブドアブログはユーザー課金による収益を捨て、広告による収益に集中させたということ。

そしてこの強制的に挿入される広告は、割とクリックされやすく、収益性の高いと言われている位置に貼られているんですよね。

広告収入で稼ぎたいブロガーの方にとっては、「いい場所取られちゃってる状態」、と言えるかも知れません。

スマホ向けページでは、CSSが機能しない?

さて、ライブドアブログでスマホ向けページをカスタマイズしようとする場合、もう一つ知っておくべき制約があります。

それは、スマホ向けページではCSSが効かないということ。

CSSとは、簡単に言えば、ブログに書かれている文章の背景色やフォント、余白、囲み線、影など、デザインを指定するための言語です。

PC向けページでは、CSSの記述(内容)を変えることによって、サイトのデザインを自在にカスタマイズすることが出来ます。

詳しくは、こちらのページをご覧ください。

合わせて読みたい


[ライブドアブログ]デザインのカスタマイズ方法まとめ(初心者向け) : No.2宣言




このサイトでまとめているカスタマイズ方法は、CSSというものをいじり倒します。 CSSが何なのか良く分かっていなくても…

しかし、せっかく書いたCSSも、残念なことにスマホ向けページのデザインには反映されないんですよね。

例えば、このブログも、PCでページを見た場合、見出しや引用部分は次のようなデザインにしています。

PC向けページから見たデザイン

ところが、これをスマホからスマホ向けページで見ると、

スマホ向けページから見たデザイン

こんな感じになってしまうんです。

PC向けページのサイトデザインをどんなに装飾しても、スマホ向けページでは必ずこのデザインになります。

つまり、ライブドアブログを使っている以上、スマホから見たサイトデザインは、どのブログでもあんまり違いがない、ということなんです。

もしスマホ向けページも、PC向けページと同じようにデザインを自在にカスタマイズしたい方には、ライブドアブログは向いていないかも知れません。

WordPressなどを使ったほうがいいでしょう。

合わせて読みたい 親ライブドアブログ派の僕がWordPressに移行した理由 | No.2宣言
わたしがなぜ、ライブドアブログを辞めたのか?今回はその理由について…
合わせて読みたい ライブドアブログを6か月運営して感じた7つのメリット : No.2宣言
ライブドアブログで開設してから6か月が経ちました。 今回は、わたしが感じているライブドアブログのメリットをまとめ…

ちなみに、ライブドアブログではスマホ向けページのテンプレートが山ほど用意されていますが、そのほとんどは、ヘッダー(タイトル部分)や背景のデザインや文字色が異なるくらいで、基本となるデザインは、みんな一緒です・・・。

スマホ向けページでは、スクリプトも動かない?

スクリプトって何?っていう方は、この章は読み飛ばしても問題ないと思います。(この章を飛ばす)

JavaScriptは、Webブラウザ上で動かすことのできる簡単なプログラム言語です。HTMLだけでは動くWebページはできませんが、JavaScriptを使うとWebページにさまざまな動きを入れることができるようになります。

ライブドアブログでは、スクリプトもまた、CSSと同様にPC向けページでしか機能しないのです。

例えば、このブログでは、「Milliard関連ページ」を導入しています。

このブログの記事の下にある、「こんな記事も書いてます!」ってやつです。

Millard関連ページ

このMillard関連ページは、自動的にそのページを訪れた読者が興味を持ちそうな記事を表示してくれる優れたサービスですが、このプログラムにはスクリプトが使われています。

なので、残念ながらライブドアブログでは、Millard関連ページをスマホ向けページに導入することが出来ないということです。

ちなみに、Millard関連ページのWebサイトには、次のようにあります。

Livedoorブログのスマートフォン版で表示されるには、Milliard関連ページが公式のブログパーツとして認定頂く必要があります。現在は認定されていませんが、いつの日か認定されることを夢見ています。

スマホ向けページでカスタマイズ出来ることとは?

さて、ここまでは出来ない事ばかり並べて来ましたが、じゃあ何なら出来るのさ?って話をします。

ライブドアブログのスマホ向けページのデザインとしてカスタマイズ出来るのは、

  • タイトル文字の大きさ、色
  • 背景色
  • 各ブログパーツの枠線の有無、色

といったあたりです。

タイトル文字の大きさを変えたり、タイトルを自分で用意した画像にするには、「ブログ設定」のデザイン / ブログパーツ設定の「スマートフォン」から、「レイアウト」のタブを開き、「ブログタイトル」の「設定」からカスタマイズすることが出来ます。

タイトル部分のカスタマイズ方法

背景色や文字、枠線の色などをカスタマイズするには、先ほど同様、デザイン / ブログパーツ設定の「スマートフォン」の「カスタマイズ」タブから、もろもろ変更することが出来ます。

文字色や背景、枠線などのカスタマイズ方法

「記事を書く」以外のHTMLも反映されない?

もう一つ、デザインに関連して、HTMLについても補足しておきたいと思います。

実は先ほどスマホ向けページはCSSが機能しないという話をしましたが、実はHTMLについても、ライブドアブログ特有の制限があります

例えば、このブログのPC向けページを見ると、必ず記事本文の直下に「人気記事セレクション」という、リンク集を入れています。

記事直下にある人気記事セレクション

これは、ブログ記事ごとに編集画面で毎回書いているわけではなく、ブログ設定のHTMLを編集して、どの記事にも、自動的に入るようにしているんです。

もし、毎回決まった文章を記事ごとに手入力されている方は、ブログ設定のHTMLを使えば、一括で入れられるので、覚えておいたほうが良いですよ!

「ブログ設定」のデザイン / ブログパーツ設定の「PC」から、「カスタマイズ」のタブを開き、そこにHTMLを書き加えていくやり方です。

「記事を書く」ページ以外で、定型文を入れる方法

具体的な方法については、こちらのページで解説していますので、興味があればぜひ。

合わせて読みたい [ライブドアブログ]記事に定型文を挿入する2つの方法 | No.2宣言
今回は、ライブドアでブログ運営される方向け、定型文を挿入する2つの方法について…

ところが、このように「記事を書く」ページ以外で書き加えたHTMLもまた、スマホ向けページだと反映されないんです。

スマホ向けページの記事本文の中には、あくまで、「記事を書く」ページで書いた内容しか、表示されないんですね…。

うーん、これほんと不便だなぁ…。

さて、今回はライブドアブログのスマホ向けページのカスタマイズについてまとめました。

先ほども書きましたが、スマホ向けページのデザインもがっつりカスタマイズしたい人は、ライブドアブログは向いていないかも知れません。

かくゆうわたしも、スマホ向けページの不自由さが原因で、ライブドアブログからWordPressへ移行を決意しました。

合わせて読みたい 親ライブドアブログ派の僕がWordPressに移行した理由 | No.2宣言
わたしがなぜ、ライブドアブログを辞めたのか?今回はその理由について…

それでもライブドアブログを使うメリットはこちら。

特にこれからは、PCよりもスマホからのアクセスが中心になる時代です。

離脱率を下げたり、回遊率を上げる効果もあると思うのでぜひ、もうちょっとスマホ向けページもカスタマイズ出来るようにしてくれたら嬉しいなぁ・・・。

では、今日も頑張らずに楽しんでいきましょう~!