ソネットブログカスタマイズ編

ソネットブログカスタマイズ編
ソネットブログは非常に良いブログなのですが、
いかんせん無料なのでデザイン的によろしくないです。
また、HTML という言葉を知らない人は
アドセンスの広告をどこに突っ込んだら良いのか
わからないと思います。
そこで、このマニュアルでは
ソネットのカスタマイズ方法について
触れていきたいと思います。
1.テンプレートはどれが良いか？
ソネットにはたくさんテンプレートがありますが、
できることなら反応の取れやすいテンプレートを
選びたいところですよね？
なので、個人的にオススメする
テンプレートを紹介しておきます。
オススメなのは「テンプレート一覧」の中の
「ベーシック」という項目のテンプレートですね。
ソネットの中ではこの辺りのデザインが
最も無難なものでは無いかと思います。
ただし、背景が黒色のデザインだと見難いので、
白背景のテンプレートを選んだほうが良いででしょう。
「デザインを追加する」を選ぶと
このような画面が出てきますが、
個人的には「２カラム右」を選ぶのがベストかと思います。
以上で、テンプレートの設定は完了ですね。
２.サイドバーの整頓
次はサイドバーをキレイに整えていきましょう。
メニューの「デザイン」を選択してから
「レイアウト」を選択してください。
こんな感じの画面が出てくると思います。
現在の状態でサイトを見てみると、
サイドバーが不要なものだらけで大変見苦しいです。
このままではサイトの汚さから
すぐに帰ってしまう人も出てくるかもしれません。
そこでまずはサイドバーをキレイにしていきます。
先ほどのレイアウト画面に来てもらって、
サイドバーのゾーンの
・最新記事一覧
・マイカテゴリー
・読者になる
・Powered By
以外の項目を全て右上の✖
で
消してしまってください。
ここの「✖」をクリックすると、
その部分が消えるようになっている
ジャマなものを消していくことで
サイトが見やすくなります。
あと、最後に「設定を保存する」を
押すのを忘れないようにしましょう。
ここまでやらないと保存したことにならないので、
またサイドバーが元に戻ってしまいますからね。
だいぶキレイになりました！！
これでサイドバーの設定は完了です。
３.アドセンス広告の表示
では、肝心のアドセンス広告を
表示させて行きましょう。
アドセンス広告は記事の下と記事の上に１つずつ貼ります。
なので、先程と同じように
「デザイン」「レイアウト」と選択してもらって、
その中から「記事」という部分をクリックします。
すると一番右上の方に「コンテンツ HTML 編集」
という文字が有るはずなのでそこをクリックしましょう。
そしたら HTML（英数字の羅列）が出てくるので、
そこを少しいじらなければいけません。
■記事上広告
<div class="articles-body">
<% if:page_name eq 'article' -%>
という部分を探して、
そのすぐ下にアドセンス広告のタグを入れましょう。
うまく探せないという人は
キーボードの「Ctrl」＋「F」を押して
検索をしてみてください。
これで記事上の広告の表示は完了です。
■記事下広告
記事下の広告も非常に近い場所をいじります。
<% article.entire_body | bodyfilter(article_info,blog) %>
という部分が先ほどの広告を入れた部分の
すぐ下にあると思いますので、
その下にまたアドセンス広告を入れます。
最後にかならず「保存」と「設定を保存する」を
忘れずに行なっておきましょう！！
２次審査に受かる前は広告は表示されないですが、
代わりに広告のスペース分だけ空白が表示されます。
4.ネタ記事の表示
サイドバーにネタ記事を
表示する方法を解説していきます。
「デザイン」をクリックした後に
次は「レイアウト」をクリックします。
その後左の「サイドコンテンツ」をクリックして、
そしてその中で一番右下にある「カスタムペイン」を
ドロップしてサイドバーのエリアに持って来ます。
続いて「カスタムペイン」をクリックして、
こんな感じの画面が出てきますので、
そこにネタ記事用のコードを打ち込みます。（後述します！）
あとは「設定を保存する」をクリックして、
レイアウト画面に戻った後に
もう１度「設定を保存する」をクリックします。
これでネタ記事が表示されます！！
■ネタ記事のコード
<div class="textwidget">
<a href="記事 URL">
リンク文章
<center>
<img src="画像 URL" width="170" height="100">
</center>
</a>
</div>
これを入力します。
ちなみに自分で書き換える部分は
赤文字の３つの部分で、「記事 URL」「リンク文章」「画像 URL」
の３つの部分ですね。
記事 URL というのは、
クリックした時に飛ばしたいページのこと。
リンク文章というのは、画像の上に表示される文字のこと。
そして画像 URL というのが
サイドバーに表示される画像になります。
ソネットであれば記事投稿ページの中に
画像をアップロードする場所があります。
「ファイルを選択」で使用したい画像を選択して、
「アップロード」をクリックします。
あとは今アップロードした画像の「編集」をクリックして、
更に「元ファイルを見る」をクリックします。
そうすると原寸画像が表示されますので、
その時の URL が画像 URL になります。
・例
記事 URL：http://naruhiko1111.com/
リンク文章：なるひこのブログ
画像 URL：http://naruhiko1111.com/wp-content/uploads/2012/10/puro1.jpg
これでネタ記事を
サイドバーに表示しようと思うと、
下のようになります。
<div class="textwidget">
<a href=" http://naruhiko1111.com/">
なるひこのブログ
<center>
<img src=" http://naruhiko1111.com/wp-content/uploads/2012/10/puro1.jpg
width="170" height="100">
</center>
</a>
</div>
"
これだとネタ記事はこんな感じで表示されますね。
width="170" height="100"という部分の
数字の大きさを変えると画像の大きさを
変更することが出来ます。

Download Report