Livedoorブログ(ライブドアブログ)を利用していますが、他の方のブログで、よく見る「吹き出し会話」が出来ないのか?


Googleアドセンス審査のために独自ドメインを取得して審査の合格を目指す方は多いと思います。


独自ドメイン取得後、「吹き出し会話」も含めて簡単なカスタマイズで見栄えが良くなりますので個のカスタマイズ方法を紹介します。


SEO対策などで見出しの作成方法は、こちらを参考にしてください。


 >>【Livedoorブログ】目次の作成方法 ===簡単に綺麗な背景色を付けてテンプレート化できます!===


無料ブログでも色々な設定が可能ですので、試してみてください。



AdobeStock_340827371

独自ドメイン設定

当ブログは、「エックスドメイン」でドメインを取得しました。
「エックスドメイン」で独自ドメインに設定する方法です。
  • 独自ドメイン取得
ブログタイトルの「SFC修行、ときどき観光」を英訳すると「SFC training, sometimes sightseeing」と長い!
上記でドメイン名はSEOには関係ない!
何でも良いので短くて、それなりのドメイン名を検索してみると。
「エックスドメイン」で希望のドメイン名を入力するとドメイン名取得有無と料金が表示されます。
197c244b.png
  • DNS登録
エックスドメインで99円/年でドメインを取得してDNSの登録です。
①早速、DNS設定を試みると
「このドメインには、エックスドメインのネームサーバーが設定されていないため
ドメインパネルからDNSレコードの確認・設定を行うことができません。」と表示されて、出来ません!
11111
②「ドメイン詳細」でネームサーバを「Xdomainで利用する」に変更します。
無題
③DNSが編集可能になりますので、以下のレコードを追加します。
 Aレコード:203.104.130.159
 CNAMEレコード:blog-01.livedoor.jp
※ライブドアブログのヘルプはこちら
無題
  • ライブドアブログ変更
「ブログ管理」の「ブログURL」で「独自ドメインを使用する」を選択後
取得したドメインを入力するのみです。
※「現在のURLから新しいURLへ転送」のレ点は外さないように注意してください。
これが付いていると、今まで利用していたライブドアブログのURLから新しいURLに転送されます。
e91f9de9.png


以上で、簡単にドメイン名の変更ができました。
DNS登録の反映は48時間以内にはされると思いますが私の場合は約2時間ほどでした。
無題

独自ドメイン取得(1年間)を99円!
この費用なら、途中でブログを止めたりレンタルサーバへ移動検討期間で先行してドメイン取得しても
良いですよね。

吹き出し会話

無料のLivedoorブログでも吹き出し会話ができます!
WordPressの利用者が「LIQUID SPEECH BALLOON」を
利用されている方が多いと思いますが無料のLivedoorブログでも出来ますよ!

CSSの準備と言ったら、小難しいと思う方も多いと思いますが
コピペで簡単にできますので、以下の順で「吹き出し会話」が出来るようになります。
 ①画像の準備
 ②CSSの準備
 ③ブログ記事の編集

では、このブログ記事で順に、「吹き出会話」を入れて見ましょう!
  • 画像の準備
①まずは、貼り付ける顔などの画像を準備します。
Face
イラストなどのフリー素材で困ったら?
こちらのアイコンは、イラストACを利用しています

②画像は、いつものとおりアップロードするだけです。
無題
画像のURLを控えてください。
画像の上にカーソルを合わせて「編集」で確認できます。
無題
  • CSSの準備
①次のCSSをメモ帳などにコピーします。
/*--------------------
  吹き出し 会話のCSS
--------------------*/
.article-body .l-fuki,
.article-body .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.article-body .l-fuki {
margin: 20px 20% 40px 0;
}
.article-body .r-fuki {
margin: 20px 0 40px 19%;
}
.article-body .l-fuki::before,
.article-body .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.article-body .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.article-body .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.article-body .l-fuki::after,
.article-body .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.article-body .l-fuki::after {
right: -110px;
}
.article-body .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.article-body .l-fuki,
.article-body .r-fuki {
width: 70%
}
.article-body .l-fuki {
margin-right: 30%;
}
.article-body .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.article-body .l-fuki::after,
.article-body .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.article-body .l-fuki::after {
right: -84px;
}
.article-body .r-fuki::after {
left: -84px;
}
}
.AAAAA::after {background-image:url(https://livedoor/11111.jpg);}
.BBBBB::after {background-image:url(https://livedoor/22222.jpg);}
  黄色の部分:画像の名前を入れます。
  緑色の部分:画像のURLを入れます。
  ※この例は2つの画像登録ですが、1つでも大丈夫です

②拡張子をcssにして保存します。
無題
③保存したCSSファイルをアップロードします。
「画像/ファイル」→「ファイル管理」→「アップロード」で
ファイルをアップロードすることができます。
無題
CSSのURLを控えてください。
アップロードしたファイルをクリックするとブラウザで表示されますので
URLが確認できます。
無題
  • ブログ記事の編集
①記事内に以下の1行を追加します。
「HTMLタグ編集」ボタンをおすとHTML編集画面に切り替わります。
<link href="http://xxxxxx/AAAAAA.css" type="text/css" rel="stylesheet" />
       赤文字:CSSのURLを記載します。(緑色:CSSファイル名

②吹き出し会話の入力です。
<p class="r-fuki AAAAA">左からの吹き出し会話です。</p>
<p class="l-fuki AAAAA">右からの吹き出し会話です。</p>
  r-fuki:右からの吹き出し会話の時に指定
  l-fuki:左からの吹き出し会話の時に指定
  AAAAA:CSSでしたアイコン名を指定

③編集画面に戻すと、下図のように表示されています。
もう一度、「HTMLタグ編集」ボタンを押すといつもの編集画面に戻ります。
無題
④大丈夫です。「プレビュー」で確認すると吹き出し会話の完成です!
無題
⑤今後は、「プログ記事の編集」で利用可能です。

(スマホ版)ブログタイトルをオリジナル画像に変更

スマホ版でもタイトルの背景を編集できます。
プログタイトルをオリジナルにカスタマイズする方法です。
  • 変更方法
ブログタイトル下の広告のないオリジナルに変更する手順は
以下の方法になります。
①オリジナル画像の作成
②ライブドアブログ管理ページ左側の「画像ファイル」で
 オリジナルの画像をアップロード。
 無題
③アップロードした画像のURLを確認します。
  ※記事編集で、普通に張り付けて、編集でURLが確認できます。
 無題
④スマホの「レイアウト」から「ブログタイトル」を削除。
⑤「ブログタイトル」のところに「フリーエリア」を追加。
⑥「フリーエリア」に以下のHTMLを記載。
 <a target="_self" href="aaaaa"><img width="100%" src="bbbbb"></a>
 aaaaa:自分のプログのURL
 bbbbb:③で調べて画像のURL
⑦変更できた確認後は、「トップページ」以外の
「アーカイブページ」「個別記事ページ」「画像ページ」を変更。
  • 変更結果
・変更前
11
・変更後
無題
  • フリーエリア利用の注意点
「フリーエリア」アイテム・「メッセージボード」において一部の例外を除き、外部リンクを設定することが不可になっています。
*この内容については、こちらのライブドアブログのヘルプで確認できます。
(例外)
・自身のブログ内へのリンク
・livedoor Blog他ブログへのリンク(ただし、独自ドメインブログは除く)
・各種ソーシャルアカウントへのリンク(ドメインは後方一致)
・弊社の提供するサービスへのリンク(ドメインは後方一致)
・ブログランキングサイトへのリンク(ドメインは後方一致)
「自身のブログ内へのリンク」は例外ですので
「プログタイトル」と同じく画像から自身のブログに戻るのは良いです。
  • 他の広告表示
「トップページの記事一覧内」「記事ページの記事内」の下に広告は表示されますが、CSS等の編集で
非表示にすることは規約違反になります。
*この内容については、ガイドラインで確認できます。

(PC版)ブログタイトルやサイドバーなどの横幅を調整

サイドバーに表示したアフェリエイトが途中で切れる事がありますが、
横幅を調整する方法があります。

ブログタイトルやサイドバーの横幅は「デザイン設定」で調整します。
  • 設定方法
①「プログ設定」から「カスタマイズ」の「CSS」を 開きます。
 無題
width:の数値で幅を調整します。
・タイトル
 #container {
      margin: 32px auto 20px;
      width: 960px;
・2カラムレイアウト
 /* 2カラムレイアウトのとき */
 body.layout-2col #content {}
 body.layout-2col #main {
   width: 670px;
 }
 body.layout-2col #main-inner {}
 body.layout-2col #sidebar {
   width: 250px;
 } 
  *#main:記事
  *#sidebar:サイドバー
③保存します。
  • 変更前にバックアップ
レイアウトがぐちゃぐちゃになったら、直すのが面倒ですね。
変更前に、現在の状態を保存することをお勧めします。
①カスタマイズの「保存」を開きます。
 無題
②保存する行の「保存」ボタンを選んで、「実行」するだけです。
 無題
 

(PC版)プログタイトル下や記事下に広告設定

CSSの編集が必要ですが、予め用意されているサイドバーのフリーエリアを利用する以外で
ブログタイトルや記事の下にアフィリエイト(広告)を表示する方法です。
  • タイトル下に広告を表示する方法
タイトル下にアフィリエイト(広告)を表示する方法は無いのか?
無題
Googleアドセンスなどの広告を表示したい方は多いと思いますが
簡単に設定することができました。

ブログタイトルの下に広告などを表示するには「デザイン設定」で設定します。
  • 設定方法
①「プログ設定」から「カスタマイズ」の「トップページ」を
 開きます。
 deadb838.png
</header>の上に表示する広告コードなどを記述します。
 778e8768.png
③プレビューで確認して保存すれば終わりです。
※記事表示、アーカイブ表示の時も広告を表示するには
 他の「個別記事」「カテゴリーアーカイブ」「月別アーカイブ」にも同じように記述します。
  • 記述例
<!-- ブログタイトル下に表示-->
<br/>
<center>
あいうえお
</center>
<br/>
<!-- /ブログタイトル下に表示-->
*<!--:コメント
*<br/>:改行
*<center>~</center>:~が中央寄せ
↓↓↓プレビュー表示
無題

  • 記事下に広告を表示する方法
Livedoorブログ(ライブドアブログ)を利用していますが
アフィリエイトやランキングのボタンを配置する時
個々の記事にて、「HTMLタグ編集」で記事に表示する広告のコードなどを記述します。

記事毎に記述するのは面倒?
全ての記事に共通の広告などを表示するには「デザイン設定」で設定します。
  • 設定方法
①「プログ設定」から「カスタマイズ」の「個別記事」を
 開きます。
 無題
「<!-- 記事本文 -->」にある「</div></IfArticleBodyMore></div>」の下
 表示する広告コードなどを記述します。
 無題
③プレビューで確認して保存すれば終わりです。
  • 記述例
<!-- 記事下の表示 -->
    12345<br/>
  <center>
      あいうえお
  </center>
<!-- /記事下の表示 -->
*<!--:コメント
*<br/>:改行
*<center>~</center>:~が中央寄せ
↓↓↓プレビュー表示
f20bcc45.png




スポンサーリンク

参加ブログランキング
にほんブログ村 小遣いブログ ANAマイル・SFC修行へ にほんブログ村 旅行ブログへにほんブログ村