livedoor Blogのカスタマイズ・Tipsまとめ

  • ブックマーク
ライブドアブログ;カスタマイズまとめ

ライブドアブログで見た目を変える方法をまとめたよ♪

こんにちは。ライブドアブログ歴2年、赤ペソ先生(@spinf60 )です。

今回は私が実際に活用しているカスタマイズを(主にスマホ向け)紹介します。

CSSを適用する

ライブドアブログは、パソコンで見た場合と、スマホで見た場合のデザインを変えることができます。

ただ、パソコン版は自由にデザインを変えることができるのですが、スマホ版はいじれない状態。

そこで試行錯誤した結果、なんとか実現できたので紹介します。

あとで出る『ふきだし会話』などもこの方法を使います。

ちなみに、実際に適用した場合のサンプルはこちらの記事をご覧ください。

アイコンフォントを使う

フォント……といえば言わずと知れた『文字』のことですが、アイコンフォントと呼ばれるものがあります。

……例えば、こんなの→

入力するのは文字ですが、スマホやPCの画面上ではアイコンとして表示されるものです。

これをライブドアブログにも導入したいと思います。

LINE風の吹き出し会話を作る

LINEみたいな吹き出し会話がブログの中にあると、文章だけで構成されているよりも見やすく、店舗良く読めるので良いですよね。

これをどうにかして実現したかったので、試行錯誤した結果、いろいろな方の協力で実現できました。

アフィリエイト関連

ここでは、ブログのマネタイズで重要な項目をまとめます。

スマホのフリーエリアに広告リンクを貼る方法

スマホ表示のフリーエリアには、広告がリンクを貼ることができません。

Amazonのほしいものリンクでさえも、表示され無いのです。

その対策として

  1. 広告に転送させるページ(記事)を作る
  2. そのページのリンクを貼る

という方法で対策可能です。

AdSenseの関連コンテンツ広告を貼る

ブログ内の関連記事と一緒に広告を表示してくれる『関連コンテンツ広告』

これの貼り方について書きました。

AdSenseの広告がクリックされやすいのは

  • タイトル下
  • 記事中
  • 記事下

らしいです。

この位置に自動的にAdSenseの広告を挿入する方法を調べました。

ただ、この記事はパソコン版向けです。

スマホではライブドアが一番いい位置に広告入れてくるので難しい。

ブログ執筆Tips

ブログを書く時にちょっと便利になるアイデアをまとめます。

サムネイル付き記事紹介リンクを作る

記事を紹介する時に、テキストのリンクだけよりも、サムネイル画像が表示されていたほうが、見た目がいい場合があります。

そんな時に、私が使っているのが『embedlyエンベッドリー

お気づきだと思いますが、この記事の中で使っているのもこの『embedly』です。

ブラウザの別タブで開くリンクを作る

他のブログへのリンクを作る場合、同一ページのまま移動すると、自分のブログに戻ってきてくれない可能性があります。

ということで、外部のサイトやブログを紹介する時は、別のタブで開くようにしておいた方が良いです。

そんなブックマークレットです。

iPhoneのブラウザ、サファリとかだと使えるけど、主にパソコン向けの記事です。

PCでスマホ表示を確認しながら書く

わたしは、ブログで長文を書くことが多いので、主にパソコンで書いています。

しかし、閲覧者の6割近くはスマホからです。

スマホで見た場合の読みやすさを考えながら書く必要があるので、実際にどのようにやっているのかを紹介します。

記事……まだ書けてませんので動画をご覧ください(*_*;

まとめ

わからないことあったらコメントしてね♪

ニーズがあれば、CSSのデザインして販売するかも……(無いかwww)

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

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

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

  • ブックマーク

この記事を書いた人

赤ペソ先生

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