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

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

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

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

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

独自ドメイン設定

• DNS登録

②「ドメイン詳細」でネームサーバを「Xdomainで利用する」に変更します。

吹き出し会話

イラストなどのフリー素材で困ったら？

③画像のURLを控えてください。

/*--------------------
　 吹き出し 会話の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);}

• ブログ記事の編集

<link href="http://xxxxxx/AAAAAA.css" type="text/css" rel="stylesheet" />

<p class="r-fuki AAAAA">左からの吹き出し会話です。</p>

<p class="l-fuki AAAAA">右からの吹き出し会話です。</p>

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

　

　

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

　
②width:の数値で幅を調整します。

　#container {
    　　margin: 32px auto 20px;
    　　width: 960px;

　/* 2カラムレイアウトのとき */
　body.layout-2col #content {}
　body.layout-2col #main {
   width: 670px;
　}
　body.layout-2col #main-inner {}
　body.layout-2col #sidebar {
   width: 250px;
　}　

　

　

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

• タイトル下に広告を表示する方法

　
②</header>の上に表示する広告コードなどを記述します。

　

<!-- ブログタイトル下に表示-->
<br/>
<center>
あいうえお
</center>
<br/>
<!-- /ブログタイトル下に表示-->

*<!--：コメント
*<br/>：改行
*<center>～</center>：～が中央寄せ

• 記事下に広告を表示する方法

　

　
③プレビューで確認して保存すれば終わりです。

<!-- 記事下の表示 -->
　　　　12345<br/>
　　<center>
    　　あいうえお
　　</center>
<!-- /記事下の表示 -->

*<!--：コメント

*<br/>：改行

*<center>～</center>：～が中央寄せ