2015年12月8日火曜日

Blogger 記事タイトル下と記事下に広告を表示させる

Bloggerでは通常、アドセンス広告などを表示する場合、ガジェットを用いて簡単に表示することができますが、この方法では記事タイトル下や記事下に広告を挿入することができません。




なので、こういった場所に表示したい場合は、少し手間ですが、HTMLの編集で直接広告のコードを書き込む必要があります。

※この操作はHTMLを編集しますので、念のためバックアップをとってからの作業をおすすめします。




広告コードをHTML内に書き込む前に必要なこととして、コードを実体参照化します。
HTML内では「’」「”」「>」「<」などの文字はエラーになるので、別な文字列に変換します。






元の文字変換後の文字
'
""
<&lt;
>&gt;
&&amp;




広告コード内の記号を手作業で変換するのは大変なので、今回はHTML2TEXTを使います。






①「元の文章」に変換したい広告コードを貼りつけます。

②「空白も変換する」のチェックを外します。

③「上から下へ変換↓」をクリックすると、実体参照化されたコードが生成されます。


スポンサーリンク

次に、HTML編集画面で、広告コードを貼りつける場所を探します。


探すのは下記の文字列です。



~記事タイトル下に広告を挿入したい場合~

div class='post-header-line-1


~記事下に広告を挿入したい場合~

data:post.body




HTML編集画面で特定の文字列を検索する方法も記事にしていますので良かったらどうぞ。







うまく検索ができたら、探した文字列の下に改行で空白を作り、先ほど変換した広告コードを貼りつけます。



最後にテンプレートを保存して終了です。



ちなみに私の使っているシンプルテンプレートには、上記のコードが2か所ありました。

1つ目:モバイル用
2つ目:パソコン用

と分かれている様ですので、それぞれに見合ったコードを貼ってください。


また、PC画面の場合、トップページで複数記事が表示される設定にしている場合、広告の規約に抵触する場合があります。
トップページでは広告を表示せず、個別ページのみ広告を表示させる場合は
広告コードの上下に以下のコードを追加します。


<b:if cond="data:blog.pageType == &quot;item&quot;">

変換した広告コード

</b:if>



スポンサーリンク

Blogger HTML編集画面で特定の文字列を検索する方法

HTML編集画面内で特定の文字列を検索する方法です。







①HTML編集画面で、HTML上のどこでも良いので、カーソルを合わせます。

②「Ctrl + F」 を押すと、右上に検索ボックスが表示されます。

③あとは検索したい文字列を入力しEnterキーを押すと、HTML上の該当の文字列の背景が黄色くなります。




<注意点>

検索したい文字列が複数存在する場合、カーソルを合わせた周辺のみ検索にヒットします。
ですので、文字列すべてを探し出したい場合は、複数回検索する必要があります。



スポンサーリンク

2015年12月5日土曜日

Blogger コメント一覧を表示する

Bloggerでコメント一覧を表示するためには一工夫必要です。

といっても、それほど大変ではありませんのでお試しあれ(・ω・)ノ



まず、コメント一覧用のフィードURLの確認です。

自分のブログのURLの後ろに

 /feeds/comments/default

をつけるだけです。


スポンサーリンク

次に、ブログレイアウトに移り、ガジェットの追加から、




フィードを選択(・ω・)ノ








先ほど、作成したコメントフィード用のURLを貼りつけて「次へ」をクリック










あとは、お好きな設定に変更し、保存すると・・・











こんな感じのコメント一覧が作成できます(・ω・)ノ



最大5件までしか表示できませんが、あまり表示件数が多すぎてもね~って感じもしますので、ちょうど良いのかな???




スポンサーリンク

Blogger ブログカレンダーを追加する

Bloggerのガジェットにはブログカレンダーってものがないですよね~。

でも、来訪者が過去の記事を検索するのに、ブログアーカイブだけではちょっと手間(;´Д`)




そこで、今日ご紹介するのはこちら(・ω・)ノ




BloggerCalendar
http://www.tim.jp/BloggerCalendar/entry.html





エントリーページで
ブログアドレスとパスワードを登録し、デザイン編集ページでお好みのパターンを作成すると、スクリプトコードが自動生成されます。

あとは、ガジェットの「HTML/JavaScript」に貼り付けるだけでOK( *´艸`)



すると・・・このブログの右側にあるようなカレンダーが作れちゃうんです(・ω・)ノスゴイデショ



このBloggerCalendarのすごいところは、デザインを変更したい時、新規登録時に生成されたIDとパスワードでログインすれば、いつでも編集ができ、しかもコードはそのままで、デザインが自動的に反映されるところがグ~(●´ω`●)IDメモシテネ


スポンサーリンク


ひとつ注意することとして・・・
このカレンダーはブログアーカイブを参照しているようです。
ですので、ブログ内にブログアーカイブを設置するようにしてください(・ω・)ノタイセツヨ



また、アーカイブの設定で、







アーカイブの頻度を「日別」にすることをお勧めします。


「毎月」だと、1ヶ月分のブログが全て表示されてしまいます。
「毎週」だと1週間分のブログが表示されてしまいます。

これだと、カレンダーの日付をクリックする意味がなくなっちゃいますもんね(;^ω^)



ぜひ、皆さんもお試しあれ~



スポンサーリンク