まとめブログをつくってみようと思い、某速報をみていまして、タイトルはかわいい動物系でいこう！

と決めてまずは検索してみました。

パンダ速報

http://pandalover4533.blog.fc2.com/

第一候補だったパンダ速報がすでにあり、、ゴロがいいかなと

きりん速報

http://meanwhile.doorblog.jp/

残念。すでに実在していました。
これはもう調べてみるしかないと思い続けて検索してみました。

みじかな動物系速報

ねこ速報

http://occhandesuga.blog.fc2.com/

その名もストレートに「ねこ速報」。ねこ画像はネットでは人気でメジャーな存在ですね。ですがこのブログの更新はもう止まっているようです。

ワンワン速報

http://chomp.blog.jp/

犬の写真があると思いきやヘッダーもありません。まとめサイトではなくテキストサイトっぽいです。エロ系の広告あり。

犬速報はさすがに普通すぎるのかありませんでした。

にわとり速報

http://blog.livedoor.jp/niwatorisokuho/

ディスクリプションと中段の二か所に「ニワトリってかわいいよね 抱きしめたいなあ！にわとり！」のテキストが。
にわとりってイラストなどのイメージではかわいいかもしれないですが、実物を見るとそんなにかわいくない気もします＾＾；

ラビット速報

http://rabitsokuhou.2chblog.jp/

まどかマギカのイラストが使われていますが、芸能ネタ記事が多いようです。

ひつじ速報

※個人ブログのようなのでリンク自重
ひつじ速報もありました。大きなひつじテンプレートの青空の左上にちょこんとかかれた「プリキュアは至高」の文字がツボですｗ

サファリ系速報

ゴリラ速報

http://blog.livedoor.jp/news4gorilla/

ゴリラ速報もありました。背景色もゴリラを意識してそうですね。

チーター速報

http://cheetahsokuho.blog.jp/

livedoorテンプレート型のまとめブログサイト。左上にチーターがいますが、なんと背景にもチーターがいます。

インパラ速報

※お店のブログなのでリンク自重

動物のインパラではなく車のインパラ＾＾；

無いと思ったらあった動物系速報

V系たぬき速報

http://blog.livedoor.jp/bangya_/

あまりかわいい動物ではなく、割りと地味目な動物たぬき。ないだろうなと思ったらなんとありました！
ブログの内容はなぜかヴィジュアル系専門のようです。

サイ速報

http://cysoku.com/

これも動物のサイではなく、、最速のサイで自動車系ブログです＾＾；

総合

どうぶつ速報

http://blog.livedoor.jp/petmatomesite/

可愛い動物系はほとんどすでに実在しているようなのでざっくりと動物で！と検索すると、ありました。これも。

アニマル速報

http://blog.livedoor.jp/ani_soku/

ライブドアブログですが、まとめテンプレートを使っていないまとめブログっぽくないサイト。右上に動物感がありますね。

ハムスター速報

本家

http://hamusoku.com/

ご存じ（？）大手まとめサイト。

カピバラ速報

http://capybara.publog.jp/

ハムスターの親分的な名前のまとめサイト。livedoorblogまとめテンプレートなとこも意識してますね。

ロブスター速報

http://blog.livedoor.jp/notaffiliate/

ハム速に対抗して有志によってつくられたサイトですが、更新停止ということでハム速に屈してしまったのでしょうか？

ジャンガリアン速報

かなりの情報量のサイト。手が込んでます。

今回は動物系の名前のブログを調べてみました。
実験のためにまとめブログもやってみたいと思っているので、いくら稼げるのか、いくらアクセスがあるのかもいつかはブログのネタにできたらなぁと思います＾＾；
身近な動物で「やぎ」はでてこなかったのですが、あんまりかわいくないしなぁ・・・。

最後に。最近すきですキュウソネコカミ（バンド）

スレタイだけでおもろいね！

EFO（Entry Form Optimization） すなわちメールフォーム最適化。

MFOだったかEMOだったか覚えられないことがたびたびあります・・。

説明はLIG先生にゆずり・・・

入力してくれる時に吹き出しがでると楽しいですよね！！（？） 真面目なフォームだけじゃつまらない！

ということで吹き出しがでるうざいメールフォームを制作してみました。

吹き出しっぽいものがでるメールフォーム　サンプル

Jquery

$(document).ready(function(){
    $(".formcheck div").hide();
  });

$(function() {
	$("#a").focus(function(){
	if($("#a").val() == ""){
         $("#fa").fadeIn("slow");
				}
    })
    .blur(function(){
         $("#fa").hide();
    })
  });
～～以下くりかえし～～

CSS

.formcheck input{
	display:block;
	margin-bottom:10px;
}

.formcheck label{
	padding: 5px;
	border-radius:5px;
	background-color: #F99;
	font-size: 11px;
	margin:0px;
}

.formcheck div{position: absolute;}

HTML

<div><form class="formcheck"><input id="a" type="text" value="" /> 
<div id="fa"><label>入力してね</label></div> 
</form></div>

アコーディオン型リスト サンプル

ういーんって開くヤツにしてよとか頼まれたり、ブログの項目が増えてくるとやりたくなる時ってあるあるですよね。
スマートフォンサイト全盛のいまならなおさら。

いつのころからかアコーディオン型リストと呼んでいます。

プログラムは人によっていろいろなやり方があると思いますが、できるだけシンプルなのをメモメモ。

jquery読み込み呼び出しで隠してから、.slideToggleを使ってみてます。 普通の.toggleも以前は使われていましたが、jQuery 1.9にて削除されてしまったようです。

他にもトグル系イベントとしては.slideToggleのほかに.fadeToggle、toggleClassもあります。

Jquery

  $(document).ready(function(){
    $(".list").hide();
    $("h3").click(function () {
      $(".list").slideToggle();
    });
  });

※もちろんJqueryが必要です。呼んでください。

HTML

<div class="slidetoggle">
<h3>アコーディオン</h3>
<ul class="list">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</div>

ついでにリストのシマシマCSS

.list li:nth-child(even) {background-color:#ddd;}
.list li:nth-child(odd) {background-color:#eee;}