アクセスカウンタ

頑張る父さんの記録帳

プロフィール

ブログ名
頑張る父さんの記録帳
ブログ紹介
平凡なサラリーマンが取り組んでいる、ダイエット・ゴルフ・株式投資などのさまざまな記録を掲載しています。
  • @ 1月9日から、半年間で23Kg減量するダイエットに取り組んでいます。
  • A 3月から、株式投資・ゴルフ・資格試験勉強に取り組む予定で準備中です。
zoom RSS

【ブログ編集】 ウェブリブログ対応

2017/02/19 17:40
当ブログはウェブリブログを用いている。このひと月、フリースペースやスタイルシートをさわり、見栄えを更新したので、それらをまとめてみた。

1. Googleアナリティクスの設置
2. Googleアドセンスの設置
3. Googleカスタム検索の設置
4. ファビコンの設置
5. ウェブクリップアイコンの設置


Googleアナリティクスの設置

Googleアナリティクスを設置したのにどうしても動いてくれない。どうしてなんだー!とググっていると、Takasui様のブログ『気になる…(きになるてん)』に答えがあった。ウェブリブログは運営者様もGoogleアナリティクスを利用されているらしく、トラッカーを作成する必要があるとのこと。赤字のところを追加して、このコードをできるだけ上の方のフリースペース7に置いたら、次の日に動いていることが確認できた。

フリースペース7、SP用トップ上部、SP用記事上部

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-********-*', 'auto', 'clientTracker');
ga('clientTracker.send', 'pageview');

</script>


Googleアドセンスの設置

ブログ最上部中央に970x90のスペースを設け、Googleアドセンスのレスポンシブ広告を掲載しようと、ページレイアウトを再調整した。このスペースには970x90のサイズの広告のほかに728x90のサイズの広告も使われることがわかり、この両方の広告バナーがいつも左右の真ん中に表示されるようにCSSで位置を設定する。同時に、ブログの記事の幅を従来の500pxから570pxに変更した。

フリースペース7

<div class="gads"><p style="width:970px;height:90px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-****************"
data-ad-slot="**********"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p></div>


スタイルシート(CSS編集)

/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/

/* コンテナ(広告・フッタを除くメイン領域) */
#container{
/* コンテナの上からの配置指定 */
top: 90px;
/* ブログ全体の幅 */
width: 970px;
}

/* Google AdSense 970x90 レスポンシブ用 */
.gads{
position: absolute;
left: 50%;
width: 970px;
height: 90px;
margin-left: -485px;
}


/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*------------------ 新着記事 ------------------*/
#contents{
/* 記事の幅 */
width: 570px;
}

/*-------------- コンポーネント群 --------------*/
#utilities{
/* 右サイドバーの幅 */
width: 200px;
}
#utilities2{
/* 左サイドバーの幅 */
width: 200px;
}

/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/

/*-- ブログ(記事+トラックバック+コメント) --*/
#blog{
/* 記事の幅 */
width: 570px;
}


Googleカスタム検索の設置

ウェブリブログにはブログ内検索機能が備わっている。その結果表示に満足できなかったのとGoogle広告で収益を出したかったという2つの理由で、Googleカスタム検索をフリースペース(幅200px)に設置することにした。スタイルの記述をスタイルシートに書かずに直接htmlで記述してしまった。

フリースペース(右)

<div style="border:0px; height:30px; overflow:hidden;">
<div style="border:0px; width:220px; position:relative; top:-20px; left:-10px;">

<script>
(function() {
var cx = '*********************************';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div></div>


ファビコンの設置

ブラウザのタブやお気に入りなどのブックマークやアドレスバーに表示されるユニークなアイコンを「ファビコン」または「ブックマークアイコン」と呼ぶ。まずは、ファビコンを作成する。エーオーシステムのサイト『ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます』で簡単に作成できる。そして、ええかげんブログ(本店)のサイト『ブックマークアイコン(ファビコン)をウェブリブログで表示する方法』にもとづいて、そのファビコンをウェブリブログに設置してみた。インターネットでファイルを指定してアクセスできる格納場所にアイコンファイル(.ico)を保存し、下記コードをフリースペースに追加するだけ。確かにブラウザのタブやURLにファビコンが表示された。

フリースペース(左)、SP用トップ上部、SP用記事上部

<script langage="JavaScript" type="text/javascript">
fabicon_link = null
function appendIcon(){
if(fabicon_link) return;
fabicon_link = document.createElement("link");
fabicon_link.rel = "shortcut icon";
fabicon_link.type = "image/vnd.microsoft.icon";
fabicon_link.href = "http://***(.icoファイルの格納場所)***/***.ico";
document.head.appendChild(fabicon_link);
}
appendIcon();
</script>



ウェブクリップアイコンの設置

ウェブクリップアイコンはスマホで「ホーム画面に追加」する際に使われるアイコンである。Hassie(ハッシー)様の『【ブログ】ウェブリブログでファビコン(favicon)やウェブクリップアイコンを表示する方法』にもとづいてウェブリブログに設置してみた。ユーザがインターネットでファイルを指定してアクセスできる格納場所にアイコンファイル(.png)を保存し、下記コードをフリースペースに追加するだけ。確かにiPhoneでホーム画面に追加する際にウェブクリップアイコンが表示された。

SP用トップ上部、SP用記事上部

<script langage="JavaScript" type="text/javascript">
touch_link = null
function appendIcon(){
if(touch_link) return;
touch_link = document.createElement("link");
touch_link.rel = "apple-touch-icon";
touch_link.type = "image/png";
touch_link.href = "http://***(.pngファイルの格納場所)***/***.png";
document.head.appendChild(touch_link);
}
appendIcon();
</script>



にほんブログ村 ブログブログ ブログ活用法へ
さまざまな活用法を読んでみよう!
記事へなるほど(納得、参考になった、ヘー) ブログ気持玉 2 / トラックバック 0 / コメント 1


続きを見る

トップへ

月別リンク



免責事項: 無断転載はおやめください。当ブログへのリンクはフリーですが、いかなる不利益・損害、期待した効果や実績が得られなかったとしても一切責任を負いませんので、ご自身の責任において行動をお願いします。また、当ブログから他のサイトにリンクをしている場合があります。移動された先のホームページは当方が管理するものでも運営するものでもございません。よって、その内容の真偽につきましても一切責任を負いませんのでご了承下さい。

プロフィール


ニコッとタウンへ

頑張る父さん こちらからメールをお送りください☆
[プロフィール詳細]
[プライベートポリシー]
頑張る父さんの記録帳/BIGLOBEウェブリブログ
文字サイズ:       閉じる