inputタグのtype属性も色々機能が加わってるようです。

>>参考サイト

現時点では全てのWebブラウザーが新しいtype属性に対応しているわけではないが、Webブラウザーは認識できないtype属性を”text”と同等に扱うため、仮に対応していない場合でも大きな不都合は生じないので、積極的に使うべき。

なるほどですね。

required

未入力の場合にはエラーメッセージが表示される

<form action="" method="" >
<input type="text" name="text" required>
<button>送信</button>
</form>

placeholder

入力ボックス内にガイドテキストを表示

 <form action="" method="" >
 <input type="text" name="text" placeholder="お名前(漢字)"　required>
<button>送信</button></form>

type=”url”

URLを入力するフィールドで用いる属性値。
書式の判定・http://”の書式の補完・スマホで適したキーボード表示

<form action="" method="" >
<input type="url" name="url" placeholder="URL" required>
<button>送信</button>
</form>

type=”email”

メールを入力するフィールドで用いる属性値。
書式の判定・スマホで適したキーボード表示

<form action="" method="" >
<input type="email" name="email" placeholder="メール" required>
<button>送信</button>
</form>

type=”number”

数字を入力するフィールドで用いる属性値
スピンボックスを表示・書式の判定・スマホで適したキーボード表示

<form action="" method="" >
<input type="number" name="number" placeholder="数字" required>
<button>送信</button>
</form>

pattern属性

正規表現を使ったチェック
>>HTML5 Pattern

<form action="" method="" >
<input type="text" name="text" pattern="^[0-9A-Za-z]+$" placeholder="半角英数字で入力"　required>
<button>送信</button>
</form>

type=”range”

スライダーを表示する属性値。
対応してるブラウザ　Chrome／Safari／Opera

<form action="" method="" >
<input type="range" name="range" min="0" max="3" step="1">
</form>

type=”color”

色の入力のために使う属性値
対応してるブラウザ　Opera

<form action="" method="" >
<input type="color" name="color" placeholder="色　※safariのみ">
<button>送信</button>
</form> 

type=”date”

日付入力のために使う属性値
対応してるブラウザ　Opera
ChromeとFirefoxでは代わりにスピンコントローラが表示

<form action="" method="" >
<input type="date" name="date" required>
<button>送信</button>
</form> 

type=”search”

入力ボックスとして検索ボックスを表示するための属性値
対応してるブラウザ　Chrome／Safari／Opera

<form action="" method="" >
<input type="search" name="search" placeholder="検索" required>
<button>送信</button>
</form> 

まだまだ多くあるみたいですが、覚書程度に。

早速いれようと思ったらエラー＞＜　まじか( ﾟρﾟ )

よくみたら、DW5.5.の体験版を入れてたのでEXTENSION　MANAGER　CS5.5になってるし、製品がDWしかない。
CS5に選択できないのかなーと思いつつ体験版の残数がもうなかったのでアンインストール。

無事インストール完了。

Fireworksを起動して[メニュー] → [ウィンドウ] → [エクステンション] → [CSS Propeties] でプロパティのパネルが開きます。

オブジェクトを選択して左下の更新ボタンをおせばコードをはきだしてくれます。
パネルにある「All」ボタンをクリックすると、コードがクリップボードにコピーされます。

background-color:#ffffff;

/* Firefox v3.6+ */
background-image:
-moz-linear-gradient(50% 0% -90deg,
rgb(255,255,255) 0%,
rgb(242,173,164) 98%); 

/* safari v4.0+ and by Chrome v3.0+ */
background-image:
-webkit-gradient(linear,
50% 0%,
50% 89%,
color-stop(0, rgb(255,255,255)),
color-stop(0.98, rgb(242,173,164)));

/* Chrome v10.0+ and by safari nightly build*/
background-image:
-webkit-linear-gradient(-90deg,
rgb(255,255,255) 0%,
rgb(242,173,164) 98%);

/* Opera v11.10+ */
background-image:
-o-linear-gradient(-90deg,
rgb(255,255,255) 0%,
rgb(242,173,164) 98%);

background-image:
linear-gradient(-90deg,
rgb(255,255,255) 0%,
rgb(242,173,164) 98%);

width:87px;

height:40px;

border-color:#ffffff;

border-width:2px;

/* Firefox v1.0+ */
-moz-border-radius:6px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:6px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:6px;

border-style:solid;

/* Firefox v3.5+ */
-moz-transform: matrix(2.2,0,0,2.18,0,0);
-moz-transform-origin:center;

/* Safari v3.1+  and by Chrome v9.0+ */
-webkit-transform: matrix(2.2,0,0,2.18,0,0);
-webkit-transform-origin:center;

/* Opera v10.5+ */
-o-transform: matrix(2.2,0,0,2.18,0,0);
-o-transform-origin:center;

transform: matrix(2.2,0,0,2.18,0,0);
-transform-origin:center;

/* Firefox v3.5+ */
-moz-box-shadow:3px 3px 2px rgba(0,0,0,0.25);
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-box-shadow:3px 3px 2px rgba(0,0,0,0.25);
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+  and by Opera v10.5+ */
box-shadow:3px 3px 2px rgba(0,0,0,0.25);

filter:
	progid:DXImageTransform.Microsoft.gradient(startColorstr = #ffffffff,endColorstr = #fff2ada4,GradientType = 0)
	progid:DXImageTransform.Microsoft.Matrix(M11 = 2.2,M21 = 0,M12 = 0,M22 = 2.18, SizingMethod = 'auto expand')
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 3,OffY = 3,Color = #40000000,Positive = true);

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr = #ffffffff,endColorstr = #fff2ada4,GradientType = 0) progid:DXImageTransform.Microsoft.Matrix(M11 = 2.2,M21 = 0,M12 = 0,M22 = 2.18, SizingMethod = 'auto expand') progid:DXImageTransform.Microsoft.dropshadow(OffX = 3,OffY = 3,Color = #40000000,Positive = true)";

なかなかの長さです。丸ごと全部つかうことはないだろうし。

サンプル（ちょっと修正）

それとjQuery MobileのテーマをDW連動して作成できるようです。
まさにCSS3 MOBILE PACKというネーミングどおりですね。
それはまた次の機会に　あるのかｗ

チュートリアルもあり。

jQueryに実行時に使うあれ、普通に省略されたものをつかってるけど、それがデォフォルトじゃないよってことでメモ。

jQuery(document).ready(function(){
　jQuery("div.sloeator02").hover(
    function () {
      $(this).text("ながーい");
         },
    function () {
        $(this).text("");
		}
	          );
		    });

//↓短くできるのですね。

$(function(){//readyとか省略　documentだけ省略もありみたいですが微妙らしい
	$("div.sloeator").hover(//$ = jQuery エイリアスとして使える
	   function () {
		$(this).text("短縮");
		},function () {
			$(this).text("");
				}
			);
		});

>>サンプル

夏休み＋有休で家族と友達家族で沖縄に行ってきました。
台風１４号も近づいててひやひやしましたが、熱帯低気圧に変わり４日間ともすばらしく快晴でした。
日頃の行いですね笑

早速沖縄についてソーキそば。うまかった！　>>海が見えるそば屋

そしてホテルについて海！　海の水がしょっぱいっと言ってました。　どうやらプール派のようです。

そして夜はBBQの流れです。

いいショットでした。自分的に

シーサーやってくれというリクエストに何回も答えてくれた　ゆうとまん。　ツボでした。

シーサー！

何回も撮り直して最後の方渋々感満載でした。　ごめんよ息子よ

>>元祖海ぶどう本店にいってみたり ゆうとまんはあのぶどうがでてくるとおもってました。

なんだっけｗ？

とまぁこんな感じで沖縄旅行楽しんだんですが、来年は海外かはたまた沖縄で迷ってますｗ
ON/OFFが大事で　来年に向けてガシガシ仕事もがんばっていきたいと思います。
さぁ100円貯金はじめるぞー！

wp-includes/default-filters.php
の以下のタグをコメントアウトか削除するか。

add_filter(’the_content’, ‘wpautop’);

//add_filter(’the_content’, ‘wpautop’);

add_filter(’the_excerpt’, ‘wpautop’);

//add_filter(’the_excerpt’, ‘wpautop’);

がっつり消えてましたねｗ

>>AddQuicktagというプラグインあるみたいですが、途中から変更する場合はこっちの方がいいかもね。

かれこれつくろうと思ったのは２年ぐらい前になるかと思いますが、ｇｄｇｄ気味でとりあえず公開しちゃいました。

自分自身最近はソーショルなメディアにいきがちだけど、やっぱここは勉強するという意味もこめて、ブログの方もボチボチがんばっていこうと思います。

今回のユニコーンは一人ではないというところがポイントだと思います。
複数人でやるにあたって、色んなことを共有できたらいいと思ってます。
それこそいくらでも共有できる時代ですけど笑

ちなみに名前の由来は、くだらなすぎて書くほどではありませんが、ユニットがユニコーンに派生した感じでOKですね

この世界は、横のつながりも大事ですからね。
まだまだ進化していくと思いますが、とりあえず公開しないとやる気が出ないというところで。
一緒に書いくれる身内な方募集中です（真面目にね笑）

最近はダンベル運動にはまってます

先週末は沖縄に行ってきました。社員旅行です。
この時世、社員旅行で沖縄いけるなんて幸運です。
しかも今回は宴会幹事でした。

1日目は全員でバスツアー。
沖縄ワールドとかひめゆり塔とか首里城とか回りましたが、宴会幹事の為、途中でバスを降りてホテルにむかいました。
実際の宴会は当日集計＆音係で前日にゲームを集計するアニメーションてきなものをつくり、大変でしたがみなさんのおかげでうまくいったと思います！
アタフタしてたのか宴会模様1枚も写真をとってませんｗ

2日目は自由行動でした。無人島に行く人が多い中これまたバスツアー参加ｗ
定番のちゅら海にいったり

鉄板の組み合わせだったり

古宇利島がやばかったり

アグ―豚くったり
とまだまだたくさん写真沢山撮りましたがこの辺にしときますｗ

そして沖縄旅行に行かしてもらって今週末は夏のあれがあるので、会社にはもっと貢献しないと密かに決意した今日この頃でした。

プラグイン使わずにページネーションです。
といってもコピペです。

>>WordPressにプラグイン無しでページネーションを設置する方法
を参考というよりも使わせていただきました。

PHP

テーマファイル内の「fuction.php」に以下をコピペ。

function pagination($pages = '', $range = 4)
{
     $showitems = ($range * 2)+1;  

     global $paged;
     if(empty($paged)) $paged = 1;

     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   

     if(1 != $pages)
     {
         echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
             }
         }

         if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
         echo "</div>\n";
     }
}

CSS

CSSのアニメーション入れてみたり。

.pagination {
	clear:both;
	padding:20px 0;
	position:relative;
	font-size:11px;
	line-height:13px;
}

.pagination span, .pagination a {
	display:block;
	float:left;
	margin: 2px 2px 2px 0;
	padding:6px 9px 5px 9px;
	text-decoration:none;
	width:auto;
	background: #FFF0D9;
	color: #000;
	-webkit-transition: 0.3s linear;
	-moz-transition: 0.3s linear;
	transition: 0.3s linear;
	text-decoration: none;
	-moz-box-shadow: 1px 1px 2px #ccc;  /* firefox */
	-webkit-box-shadow: 1px 1px 2px #ccc;/* Safari,Chrome */
	box-shadow: 1px 1px 2px #ccc;       /* CSS3 */

}

.pagination a:hover{
	background: #FFC66F;
}

.pagination .current{
	padding:6px 9px 5px 9px;
	background: #FFC66F;
}

ファイルの設置

元々のテーマの中にpagination.phpがあった為そこに上書き

<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>

そしてindex.phpでインクルード

<?php get_template_part('pagination'); ?>

get template partについてはこちら

非常に濃かった週末でした。

テーマはソーシャルメディア特集。

「Facebook」と「Twitter」を中心に活用法や実装方法から大震災におけるソーシャルメディアの在り方まで非常に濃い内容でした。

そもそもFacebookをどうやって企業が生かしているのかはてなだった僕には非常に為になるセッションの数々でした。

個人的にもFacebookなんかイマイチまだ使い始めでわからなったかのですが、小技なんかも結構あるのねという印象でしたし、
Facebookの最新情報とハイライトの違いさえわかりませんでしたから笑

これは使って覚えていくしかないですね。

企業としてソーシャルメディアどう利用していくかは明確な目的がなければ意味がないこと、やみくもに作っても意味なし。
Webサイト一緒ですね。　まぁなんでもそうですね。

ソーシャルメディアにの新しい生活者消費行動モデル概念として「SIPS｣という考え方があるそうです。
>>http://www.dentsu.co.jp/sips/index.html

ほんとソーシャルメディアの普及で自分自身の生活のコミュニケーションの方法も変わっていきましたし、
あと数年経ったときにはまた違ったものになってるかもしれません。おそろしやｗ(( ；ﾟДﾟ))

制作者としてソーシャルメディアとの技術や知識を習得しつつ、自分の中で（仕事）でどう生かしていくか考えていきたい思います。

ちなみにFacebookのハイライト表示を決めるエッジランクは、フィードバックの頻度・フィードバックを受けている数・新しさによって左右されるそうです。

前の会社の人と一緒に行きましたが、別の会社になってこうして外部のセミナーに一緒にいけるというのは業種てきにもなかなかなそうだし、
非常にすばらしいつながりだと思った今日この頃でした。

金曜日のOB会は鉄板的に楽しかったです。

基本飲みにいったり、家族で遊びにいったりでしたが、まとめてみました。

ちーばくんにあってみたり。

ハッピーセットでいきなりスペシャルキャラが出て叫んでみたり。
次買ったときも同じのがでてみたり。
アクエリオンが出なかったのはここで運を使ったのかorz

友達ファミリーで木更津の動物園にいったりみたり。
動物園が騒然とするほどの喧嘩してる大人をみたり。
その喧嘩してる大人の子どもたちがかわいそうだった。

結婚記念日を祝ってみたり。
おろしたお金がGWで全くなくなったり。

とまぁ楽しめたGWでしたｗ
さぁお仕事がんばろう～