記事の上にある「このブログの読者になる（チェック）」を消す

ブログを開いた時にスクロールしなくても記事が視界に入るように余計なものを排除。

記事の上にある「このブログの読者になる（チェック）」を消してみました。

CSSに以下を追記。

/* ■読者になるチェックを消す■ */
.readerMainLink{
display:none ;
}

少しスッキリ。

あとはグローバルナビをどうするか、しばらく考え中です。

・アメブロカスタマイズ目次

siteコマンドでアメブロ過去記事検索

先日の記事で少し触れたので、site:コマンドについて少し。

これは特定のドメイン内にあるページを探す時に使用される検索コマンドと呼ばれるもののひとつです。

別にGoogleだけでなく、Yahoo検索エンジンでも同じように使用出来ます。

例えば、
このブログのURLは http://ameblo.jp/insomniac-rabbit/ となっています。

そこでこのブログの過去記事の中から【アメブロ】というキーワードを探したい場合、Googleの検索窓に

「アメブロ　site:ameblo.jp/insomniac-rabbit/」

と入力すれば、【ameblo.jp/insomniac-rabbit/】のドメイン内にある【アメブロ】というキーワードを含んだ記事一覧が検索結果に表示されます。

当然ですが、Googleにキャッシュされている記事のみしか検索結果に出ません。
「Googleにインデックスされていないページはこの世に存在しない」という例のアレです。

ちなみに何のキーワードも入れず、「site:サイトURL」で調べて検索結果に何も表示されなければ、そのサイトはGoogleからペナルティをくらっています。

どちらかと言えば、このsite:コマンドというのは

・検索エンジンにちゃんとキャッシュされているか？
・検索エンジンからペナルティを受けてないか？

ということを確認する為によく使われています。


思えばYahoo検索エンジンが全盛の頃、突如検索結果からトップページが吹き飛ばされるというペナルティ（不具合？）がよく発生し、その度に確認の為このsite:コマンドを使っていました。


そんな訳で、別にブログ内検索のブログパーツを使用しなくても、そのブログの中から特定の記事を探したい時にはこんな方法もあります。

また、いちいち検索窓にコマンドを入力するのが面倒だという場合には、ブラウザFirefoxを使っているのであれば、Goog All Sites & Similar Sites Searchという｢ブラウザにサイト内検索用の検索窓を設置してくれる｣アドオンもありますので、使用してみてもいいかもしれません。

アメブロのブログ内検索を見た目はそのままでグーグル検索へ変更

以前にアメブロの記事下【フッター】に記事編集ボタン設置の記事の中でも書きましたが、過去記事を編集する時によくアメブロのブログパーツ【ブログ内検索】を使用します。

しかし何人もの人が書いていますが、アメブロ純正のブログ内検索は精度がいまいち。と言うより、どうも一定期間より前の記事については検索対象から外しているようです。

おかげで普通に検索エンジンで探せば出てくる記事が、何故かブログ内検索では存在しない事になっているという現象が結構起こります。

これでは正直使い物になりません。

ブログ内検索の機能を改善するというような事が以前に発表されていましたが、現状何も変わっていないに近い状態のようです。

とはいえ、過去記事を探しづらいのはなかなか困ったもの。
（site:コマンドでドメイン内検索すれば済む話ですが、それはちょっと置いておきます。）

そこで利用されているのが、Googleのカスタム検索窓をブログ内に設置するという方法。検索してみると色んな方が導入されているようです。

ただ、このやり方ではいかにも【Google検索】といった見た目になってしまい、どうも検索窓だけ浮いた感じになってしまいます。
デザインも弄れるようですが、なかなか面倒です。


そこで

「見た目はアメブロ純正の検索窓だけど中身はグーグル検索」

といった風に出来ないものかと思い調べてみました。


発見したのがこちらの記事。

アメーバブログの歩き方
Googleカスタム検索 or アメブロ検索 ?

早速使わせていただきました。

導入にはGoogleカスタム検索の【検索エンジンID】が必要なので、前提としてGoogleのアカウントを取得しておかなければなりません。

Googleカスタム検索のコードを取得すれば、自動的に検索エンジンIDも手に入ります。Google検索のコード取得までの手順は、こちらの方やこちらの方の記事に詳しく載っています。


今回のやり方では、出来上がった検索エンジンコードそのものは使用しません。
コード取得まで進めば、【コントロールパネル】→【基本】→【検索エンジンID】を探します。

こんなやつ

（取得した検索エンジンのコードの中にも含まれているので、そちらで判別がつくようであればここを見なくてもいいです。）

この【検索エンジンID】を上記アメーバブログの歩き方さんのブログにあるコードの中に埋め込みます。

ちょっと説明の為に該当記事より引用させてもらいます。

<div id="search" class="mainMenu"> 
<h4 class="menu_title">Search</h4> 
<form action="http://www.google.com/cse"><div><input type="hidden" name="cx" value="Googleから付与されたID" /> 
<input type="hidden" name="ie" value="UTF-8" /><input type="text" name="q" class="searchbox" /><input type="submit" name="sa" value="検索" class="searchbtn" /> 
</div> 
</form> 
</div>

赤文字部分に自分の【検索エンジンID】を差し込みます。
あとは出来上がったコードをフリープラグインかフリースペースに放り込めば、純正ブログパーツと同じ見た目の【ブログ内検索（中身はGoogle）】が出来上がりです。


ただこの場合、当然ですが【ブログ内検索】単独で配置場所を変える事が出来ません。
フリープラグインやフリースペースごと位置を動かさなければダメ（もしくはそれぞれのスペース内で）。

純粋に、現在あるアメブロ純正のブログ内検索の中身を入れ替えたい場合には、こんな方法もあるようです。

こちらのやり方なら、ブログパーツとして【ブログ内検索】単体で配置場所を変える事が可能となりますが、フリープラグインに記述する文字数は比較して多め。

このあたりどれを選ぶかは状況と好みでいいのではないでしょうか。
どちらにしても、こういったコードをあっさり作成できる人を本当に尊敬します。

・アメブロカスタマイズ目次

アメブロ・preタグとcssで本文中にソースコードをきれいに表示

このブログの中で、時々htmlやcssのコードを記述していますが、少し見栄えが良くなるように表記方法を変更してみました。

どういう事かといえば

以前の記事では
---------------------------------------------------------------------
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-********-*']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
----------------------------------------------------------------------

↑こんな風に表示していたのを

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-********-*']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

↑こう変更しました。


最初はエンジニアさんが使っているようなSyntaxHighlighterを利用してみる事も考えたのですが、アメブロに導入するのがかなり大変だったのと、記事更新毎にあまりにも手間がかかりそうだったので断念。


結局、「preタグでソースコードを挟みcssで装飾する」のが一番楽そうだったのでこちらの方法を選択しました。


良さそうなcssのデザインを探し廻り、最終的に参考にしたのはこちらの記事

参考：Layer8
preタグスタイルいろいろ CSS - Layer8 Reference

記事内でコードを折り返したくなかったので、スクロールバーが出現する一番上のcssを使わせてもらいました。

上記の記事そのままですが、アメブロcssに以下を追記

/* ■ Preタグ装飾■ */
pre{
font-family: "Courier New",Courier,monospace;
font-size: 1em;
color: #007000;
background-color: #fafafa;
border: solid 1px #bbbbbb;
line-height: 120%;
margin: 1em 0 0 0;
padding: 0.99em;
overflow-x: auto;
overflow-y: auto;
}

あとは本文中に記述したコード（もちろん実体参照変換した後）の前後を「<pre><code>」と「</code></pre>」で挟めばOK。
※実体参照についてはこちらの記事も

ちなみに
<pre><code>～</code></pre>
とすべきなのか
<pre class=”code”>～</pre>
とした方がいいのか判断がつかなかったのでとりあえず前者にしています。

このあたりになると自分の知識ではさっぱり。
あまりこだわらずに行きましょう。

念の為各種ブラウザでちゃんと表示されるか調査。
やはりIEだけ特殊ですね。
IE6に至ってはもう諦めました。
それ以外はGeckoもChromiumもOperaも大体問題なく表示されます。

・アメブロカスタマイズ目次

Google Analyticsの非同期コードに国内検索エンジン追加

ある日のこのブログのGoogle Analyticsの解析データです。




このブログの場合、読者やお気に入りに比べて検索エンジン経由のアクセスが大多数を占めています。

ではどの検索エンジン経由が多いのか参照元を見てみると



こんな感じです。
何の気なしに眺めていると何も思いませんが、よく考えると不思議なデータとなっています。

GoogleとYahoo以外の検索エンジンからのアクセスが全くありません。

この謎についてはこちらの記事で解説されています。
→Yahoo!とGoogle以外の日本の検索エンジンから、検索アクセスがないのはなぜ？


簡単に説明しますと、Google AnalyticsはGoogleやYahooなどのようなメジャーな検索エンジン以外を認識していません。

日本国内の、ある意味ローカルな検索エンジン（Livedoorやinfoseek、hi-hoなどなど）を解析してもらおうとすれば、手動で追加定義を行う必要があります。

まあ大半がGoogleやYahooからのアクセスなのであまり気にしなくてもいいのかもしれませんが、せっかくなので色々と追加してみました。


参考サイト
運営堂
→Google Analyticsの非同期コードで検索エンジンを追加する

トイレのうず
→Google Analytics に検索エンジンを追加＋外部ファイル化


このブログで使用しているAnalyticsのコードは非同期コードなので、１つ目のサイトを主に参考にしました。

※非同期トラッキングコードと同期トラッキングコードの違いなどについてはこちらの説明を→Google Analytics 非同期トラッキング コードとは
あまり難しく考えなくても、今現在は普通にGoogle Analyticsのコードを取得すれば全て「非同期トラッキングコード」となっています。

■手順
今現在Analyticsコードを取得した場合、このような形になっているはずです

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-********-*']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

「UA-********-*」は各自のID

赤文字の部分の間に検索エンジンのドメイン名とクエリ変数を追加します。
手作業でする場合にはこちらの記事を参考にして下さい。

自分は運営堂さんの記事をそのままコピペさせてもらいました。


するとこんな感じになります。

<script type="text/javascript">
  
　var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-*********-*']);
  _gaq.push(['_addOrganic', 'images.google', 'q']);
  _gaq.push(['_addOrganic', 'biglobe', 'q']);
  _gaq.push(['_addOrganic', 'nifty', 'q']);
  _gaq.push(['_addOrganic', 'azby.search.nifty', 'q']);
  _gaq.push(['_addOrganic', 'infoseek', 'qt']);
  _gaq.push(['_addOrganic', 'rakuten', 'qt']);
  _gaq.push(['_addOrganic', 'livedoor', 'q']);
  _gaq.push(['_addOrganic', 'so-net', 'query']);
  _gaq.push(['_addOrganic', 'fresheye', 'kw']);
  _gaq.push(['_addOrganic', 'auone', 'q']);
  _gaq.push(['_addOrganic', 'ocnsearch', 'MT']);
  _gaq.push(['_addOrganic', 'hi-ho', 'MT']);
  _gaq.push(['_addOrganic', 'odn', 'search']);
  _gaq.push(['_addOrganic', 'eonet', 'search']);
  _gaq.push(['_addOrganic', 'goo', 'MT']);
  _gaq.push(['_addOrganic', 'excite', 'search']);
  _gaq.push(['_addOrganic', 'asahi', 'Keywords']);
  _gaq.push(['_addOrganic', 'luna', 'q']);
  _gaq.push(['_addOrganic', 'lunascape', 'p']);
  _gaq.push(['_addOrganic', 'hatena', 'word']);
  _gaq.push(['_addOrganic', 'ecnavi', 'Keywords']);
  _gaq.push(['_addOrganic', 'mixi', 'keyword']);
  _gaq.push(['_addOrganic', 'twitter', 'q']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

赤文字以外の部分についてはそのままでOK。

あとはこのコードを通常通りアメブロのフリープラグインに記述すれば解析が始まります。

しかし見てわかる通り、どう考えてもフリープラグインの文字制限を圧迫します。従ってこれを行うにはプラグインの外部ファイル化が必須となるでしょう。

このブログの場合は、例によってこちらの記事で作成した外部ファイルの中に、「<script type="text/javascript">」と「</script>」を外した状態で放り込んで動作させています。