パンくずリストの構造化

投稿日時: 2015年4月24日投稿者: 圭太

先日、当サイトにもパンくずリストを設置しました（記事タイトル下の公開日下に設置）。リストでマークアップして、個々をフロートさせればパンくずリストは設置できるのですが、パンくずリストには構造化マークアップと言うものがあるんです。

Googleで検索すると以下のようにURL部分がパンくずリストになっているサイトを見ることがあると思います。

Googleの検索結果

googleがパンくず部分を読み取って表示してくれる場合もあるようなのですがHTMLマークアップで「ここがパンくずです」とGoogleに教えることで、このような表示になることがあるようです。

microdataでパンくずリストの構造化

microdataという記述を使ってパンくずリストを構造化します。
以下のようにマークアップされたパンくずリストがあるとします。

<a href="/dresses">Dresses</a> ›
<a href="/dresses/real">Real Dresses</a> ›
<a href="/dresses/real/green">Real Green Dresses</a>

<a href="/dresses">Dresses</a> ›

<a href="/dresses/real">Real Dresses</a> ›

<a href="/dresses/real/green">Real Green Dresses</a>

上記マークアップを構造化します。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/dresses" itemprop="url"><span itemprop="title">Dresses</span></a> ›
<a href="/dresses/real" itemprop="url"><span itemprop="title">Real Dresses</span></a> ›
<a href="/dresses/real/green" itemprop="url"><span itemprop="title">Real Green Dresses</span></a>
</div>

<a href="/dresses" itemprop="url"><span itemprop="title">Dresses</span></a> ›

<a href="/dresses/real" itemprop="url"><span itemprop="title">Real Dresses</span></a> ›

<a href="/dresses/real/green" itemprop="url"><span itemprop="title">Real Green Dresses</span></a>

</div>

1．パンくずリストを囲む

「itemscope」と「itemtype」を指定してパンくずリスト全体を囲みます。itemtypeには「http://data-vocabulary.org/Breadcrumb」を設定。これで囲まれたエリアがパンくずリストであることを示します。

2．aタグにitempropを記述

aタグには「itemprop=”url”」を追加します。

3．各項目にitemprop=”title”を追加

パンくずリストの各項目ごとに「itemprop=”title”」を追加。spanでマークアップします。

以上でパンくずリストが構造化されました。
最後にgoogleのテストツールでマークアップに間違えがないか確認します。
Google Testing Tool

Google Testing Toolでの検証結果

エラーは検出されませんでした。

※パンくずリストの構造化をやったからと言ってGoogleの検索結果のURL部分が必ずパンくず表示になるわけではないようです。

Googleのパンくずリストに関するページ

[tmkm-amazon asin=’4844330918′][/tmkm-amazon]

高いけど満足の中敷き「スーパーフィートトリムフィットグリーン」

投稿日時: 2015年4月21日投稿者: 圭太

革靴が必要な生活をほとんどしていないので、革靴は数足しか持っていないのですが、ちょっとドレスアップしなければいけない用事ができてしまい、どうせ買うならちょっといい靴にしようと思い新しい革靴を買いました。

試履したときはなんともなかったのですが、いざ外で履いてみるとくるぶしと靴があたってしまい、くるぶしから流血。こりゃ、中敷きで底上げしなければ履けないと思い中敷き探しが始まれりました。どうせめったに買うものじゃないし、靴も自分としてはいいものを買ったつもりなので、中敷きもそれなりのものを探していました。

そうして買ったのが、こちら

スーパーフィートトリムフィットグリーン

画像を一気に載せましたが、ただの平べったい中敷きとは別物です。かかとには包まれている感覚が、足の裏の土踏まずにもフィットします。この中敷きを入れると靴がワンランク上がったような気がしました。
もちろん、くるぶしからも血が出ません。

正直、価格は高いと思うのですが、足の負担が減るのならいい買い物だと思います。

[tmkm-amazon asin=’B0084MIXCI’][/tmkm-amazon]

keypressはブラウザによって反応するキーが違う

投稿日時: 2015年4月14日投稿者: 圭太

今回もアクセシビリティ対応で判明したのですが、jQueryのkeypressメソッドの判定がブラウザによって違うことがわかりました。

今回、アクセシビリティの改修を行うために調査したサイトで、よく見るフォントサイズを切り替えるボタンをjQueryのkeypressで実装していました。ところがこの動きがあまりよろしくなかったんです。

以下がそのサンプルです。（jQuery部分）

$(document).ready(function() {
    $("#font_s").keypress(function() {
      $('.content').css('font-size', '60%');
    });
    $("#font_m").keypress(function() {
      $('.content').css('font-size', '100%');
    });
    $("#font_l").keypress(function() {
      $('.content').css('font-size', '140%');
    });
})

$(document).ready(function() {

$("#font_s").keypress(function() {

$('.content').css('font-size', '60%');

});

$("#font_m").keypress(function() {

$('.content').css('font-size', '100%');

});

$("#font_l").keypress(function() {

$('.content').css('font-size', '140%');

});

})

サンプルを別ウィンドウで見る

上記サンプルの場合、font_s（小）、font_m（中）、font_l（大）のボタンの上で何かキーを押されると反応してフォントサイズが変わります。キーが特定されていないことですでにアクセシビリティに対応していないのですが、問題はFirefoxで起こりました。
キーボードのみで操作する場合、リンクの移動はTabキーで行いますが、FirefoxはこのTabキーの操作をkeypressで拾ってしまうんです。
例えば小ボタンにいるときにTabキーを押すとボタンは中に移動するが、サイトのフォントは小に切り替わってしまいます。IEやChromeではこの現象を確認できなかったので、現象はmozilla系のブラウザで起こるのではないかと考えています。

この現象をサンプルコードで解消するにはkeypressが反応するキーを限定する必要があります。例えばEnterキーのみに反応するようにするには以下のようにします。

$(document).ready(function() {
    $("#font_s").keypress(function() {
      if( event.which === 13 ){
        $('.content').css('font-size', '60%');
      }
    });
    $("#font_m").keypress(function() {
      if( event.which === 13 ){
        $('.content').css('font-size', '100%');
      }
    });
    $("#font_l").keypress(function() {
      if( event.which === 13 ){
        $('.content').css('font-size', '140%');
      }
    });
})

$(document).ready(function() {

$("#font_s").keypress(function() {

if( event.which === 13 ){

$('.content').css('font-size', '60%');

}

});

$("#font_m").keypress(function() {

if( event.which === 13 ){

$('.content').css('font-size', '100%');

}

});

$("#font_l").keypress(function() {

if( event.which === 13 ){

$('.content').css('font-size', '140%');

}

});

})

すみません、もっとシンプルなコードがあると思うんですが…。
13はEnterキーのキーコードです。ifでこのキーコードを受け取った時だけフォントサイズを切り替えています。

IE、Chrome、Firefoxでいろいろとキーを押してみたのですが、ブラウザによって反応が違います。文字と関係ないキー、Fn（ファンクション）やCtrlなどの制御キーは反応が異なるので注意が必要ですね。と言うかフォントサイズを切り替えるのにkeypressを使うな！　ってことでしょうか。

[tmkm-amazon asin=’486354149X’][/tmkm-amazon]

さくらのVPSのOpenSSLを1.0.1mにアップデート

投稿日時: 2015年3月27日投稿者: 圭太

最近なにかと脆弱性が報告されるOpenSSL。私が使用しているサーバー“さくらのVPS”に入れているOpenSSLのバージョンがいくつなのか調べてみたところなんと1.0.1eだった。

# openssl version

1	# openssl version

SSLはほとんど利用していないが、これはちょっと低すぎるだろうと言うことで1.0.1系の最新版1.0.1mをインストールしました。

OSはCentOS6.6の64bitです。

# cd /usr/local/src
# wget https://www.openssl.org/source/openssl-1.0.1m.tar.gz
# tar zxvf openssl-1.0.1m.tar.gz
# cd openssl-1.0.1m
# ./config
# make
# make install
# cd /usr/bin/
# cp /usr/bin/openssl /usr/bin/openssl.old
# rm -f /usr/bin/openssl
# ln -s /usr/local/ssl/bin/openssl

# cd /usr/local/src

# wget https://www.openssl.org/source/openssl-1.0.1m.tar.gz

# tar zxvf openssl-1.0.1m.tar.gz

# cd openssl-1.0.1m

# ./config

# make

# make install

# cd /usr/bin/

# cp /usr/bin/openssl /usr/bin/openssl.old

# rm -f /usr/bin/openssl

# ln -s /usr/local/ssl/bin/openssl

make以降は新バージョンの適用作業。lnコマンドでシンボリックリンクをはっています。
最後に新バージョンが適用されたかを確認します。

# openssl version
OpenSSL 1.0.1m 19 Mar 2015

1 2	# openssl version OpenSSL 1.0.1m 19 Mar 2015

ほとんど利用していないなら止めろ！と言われそうですが、一部地味に使ってるんですよ。

参考サイト
事前予告されていた OpenSSL のアップデートが公開されたので OpenSSL 1.0.2a を入れた件（WWW Watch）

追記
2015.7.13　OpenSSL に証明書チェーンの検証不備の脆弱性

[tmkm-amazon asin=’4798041866′][/tmkm-amazon]

MTEntries idで何も表示されない不思議

投稿日時: 2015年3月25日投稿者: 圭太

Movable Typeで運用しているサイトのPC表示でPICK UPのコーナーを設けてTOPページに任意のページへのリンクをつけています。これをスマホサイトにも適用しようと以下のコードを書いたのですが何も表示されません。

<MTEntries id="4264">
<$MTEntryTitle$>
</MTEntries>

<$MTEntryTitle$>

</MTEntries>

※テストのため該当ID（4264）の記事のタイトルだけを表示しようとしています。

テンプレートの種類は「カスタムインデックステンプレート」です。lastnでは表示されるのですがidを使うと、とたんに何も表示されません。

いろいろと調べたところ以下のサイトが参考になりました。
→ カテゴリーアーカイブ内で任意のエントリーを表示する（Technology on Information）

こちらを参考にテンプレートを以下に変更

<MTEntries id="4264" category="NOT not_existing_category_label">
<$MTEntryTitle$>
</MTEntries>

<$MTEntryTitle$>

</MTEntries>

これで無事に表示されました。
ただ不思議なのは参考にしたサイトではカテゴリーアーカイブテンプレートの場合に現象が発生すると言っているのですが、私の場合はカスタムインデックステンプレートで起きています。テンプレートの種類を「メインページ」にしても現象は変わりませんでした。この謎は解明していません。

Excel2007で新規ブックの初期フォントとシート数を変更する

投稿日時: 2015年3月19日投稿者: 圭太

エクセルで新規ブック（ファイル）を作成するとフォントが「ＭＳＰゴシック」、フォントサイズ「11」、シート数3で開く。

よく最初のシート（Sheet1）しか使っていないのに空のシートを2つ付けてよこす人がいるが、空ならシートは消して頂きたいと思ったりもする。
そこでシート数は最初から1枚、ついでにフォントも初期設定で変えてしまおうと思う。

左上のofficeボタンをクリック
開いたメニューの中から「Excelのオプション(I)」ボタンをクリック
Excelのオプションウィンドウが開くので「基本設定」内の「新しいブックの作成時」にある“使用するフォント”、“フォントサイズ”、“ブックのシート数”を変更
Excelを再起動すると設定した内容で新しいブックが開く

これで設定した内容で新規ブック（ファイル）が開くようになります。

[tmkm-amazon asin=’B00AENF1E8′][/tmkm-amazon]

2015.03 アップルイベントについての感想

投稿日時: 2015年3月10日投稿者: 圭太

日本時間の3月10日の深夜に行われたアップルのイベントで2つの新商品が発表されました。

Apple Watch

ひとつは出ることが確実視されていたApple Watch。

iPhoneユーザーでない私にはまったく興味がわかなかった。これのためにiPhoneにしようと思わせるデバイスでもなかった。Apple Watchをするくらいなら普通の腕時計を買う。それくらいの気持ちだ。

MacBook

もうひとつは「でるかも」くらいの温度だったMacBook。予想ではMacBook Air 12インチとされていたが、出てみればAirとは別カテゴリーで登場した。

正直こちらには大いに期待していた。私の現在のメインマシンはMacBook Air13 2012モデルだ。Airがメインって言うのもどうかと思うが、使ってみると結構メインでいけている。が、不満がないわけでは当然ない。
まず、画面が狭い。1440×900って今の時代の13インチディスプレイとしては狭い。そこでRetina化されたMacBookはかなり魅力的だ。

2つ目のAirの不満点は非力なところ。「Airなんだから仕方ないだろ」と言われそうだが、CPUの世代を若返らせ、SSDがSATA3からPCIeベースになればかなり早くなるんじゃないかと思っている。が、残念ながらMacBookのCPUはIntel Core M。クロックはオプションで上げても1.3GHzと非力すぎる。

そして何よりも問題なのが拡張性のなさ。最近のMacはこんな進化ばかりだが、いくらなんでもUSBポート1つだけは少なすぎる。しかも電源と共用だなんて。価格も決して安くはなく、むしろ高い。

おとなしくMacBook AirをRetina化してCPUの世代交代とバッテリー時間の向上くらいにしてくれた方が幸せな人は多かったんじゃないだろうか。それだったUSBポートがタイプCに変更されても我慢したさ。

と言うことで、私の中でMacBookはなし！

あ〜、次期メインマシンは何にしたらいいんだろう。

ページ内リンクを無効にしてタブメニューを動かす（jQueryのpreventDefault）

投稿日時: 2015年3月9日投稿者: 圭太

Webサイトでよく目にするタブメニュー。実装自体は難しくないのですが、最近アクセシビリティというものの対応案件がありマークアップでかなり四苦八苦しました。

はじめタブ部分はaタグで囲まず、cssでカーソルを手マーク（pointer）に変えていたのですが、それではTabキーでリンクを移動してきた際にタブにフォーカスが当たらずアクセシビリティとしてNGをくらいました。

そこでタブ部分をaタグで囲むようにマークアップを変更したのですが、ある問題が勃発！それはページ内リンクとして機能してしまい、タブをクリックするとページ内で表示位置が動いてしまうこと。
それをjQueryで回避する方法を調べました。

まずはダメな場合

<ul id="tabmenu">
<li id="tab_l"><a href="#tab-01">タブ左</a></li>
<li id="tab_r"><a href="#tab-02">タブ右</a></li>
</ul>

<div id="tab-01">
<p>タブ左メニュー01</p>
<p>タブ左メニュー02</p>
<p>タブ左メニュー03</p>
<p>タブ左メニュー04</p>
<p>タブ左メニュー05</p>
</div>

<div id="tab-02">
<p>タブ右メニュー01</p>
<p>タブ右メニュー02</p>
<p>タブ右メニュー03</p>
</div>

</ul>

<p>タブ左メニュー01</p>

<p>タブ左メニュー02</p>

<p>タブ左メニュー03</p>

<p>タブ左メニュー04</p>

<p>タブ左メニュー05</p>

</div>

<p>タブ右メニュー01</p>

<p>タブ右メニュー02</p>

<p>タブ右メニュー03</p>

</div>

ul#tabmenu {
	list-style:none;
}

ul#tabmenu li {
	width:200px;
	display:block;
	float:left;
	background:#009;
	color:#fff;
	font-weight:bold;
	text-align:center;
	margin:0 12px 0 0;
	padding:2px 0;
	border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
}

ul#tabmenu li a {
	text-decoration:none;
	color:#fff;
	display:block;
}

ul#tabmenu:after{
	content:"";
	display:block;
	clear:both;
}

div#tab-01 {
	display:none;
	width:200px;
	margin-left:40px;
}

div#tab-02 {
	margin-left:252px;
	margin-top:1000px;　/* サンプルのためわざと入れています */
	display:none;
	width:200px;
}

ul#tabmenu {

list-style:none;

}

ul#tabmenu li {

width:200px;

display:block;

float:left;

background:#009;

color:#fff;

font-weight:bold;

text-align:center;

margin:0 12px 0 0;

padding:2px 0;

border-radius: 4px 4px 0 0;

-webkit-border-radius: 4px 4px 0 0;

-moz-border-radius: 4px 4px 0 0;

}

ul#tabmenu li a {

text-decoration:none;

color:#fff;

display:block;

}

ul#tabmenu:after{

content:"";

display:block;

clear:both;

}

div#tab-01 {

display:none;

width:200px;

margin-left:40px;

}

div#tab-02 {

margin-left:252px;

margin-top:1000px;　/* サンプルのためわざと入れています */

display:none;

width:200px;

}

$(function(){
	// 左タブをクリック
	$('li#tab_l').click(function() {
		$('div#tab-01').css({'display' : 'block'});
		$('div#tab-02').css({'display' : 'none'});
	});

	// 右タブをクリック
	$('li#tab_r').click(function() {
		$('div#tab-01').css({'display' : 'none'});
		$('div#tab-02').css({'display' : 'block'});
	});

	// 最初のタブを表示
	$('div#tab-01').css({'display' : 'block'});
});

$(function(){

// 左タブをクリック

$('li#tab_l').click(function() {

$('div#tab-01').css({'display' : 'block'});

$('div#tab-02').css({'display' : 'none'});

});

// 右タブをクリック

$('li#tab_r').click(function() {

$('div#tab-01').css({'display' : 'none'});

$('div#tab-02').css({'display' : 'block'});

});

// 最初のタブを表示

$('div#tab-01').css({'display' : 'block'});

});

恥ずかしいソースコードなのはご愛嬌
上記のコードのサンプル

大丈夫な場合

$(function(){
	$('#tab_l').on("click", function (e) {
	        e.preventDefault();
	}); 
		
	$('#tab_r').on("click", function (e) {
		e.preventDefault();
	});

	// 左タブをクリック
	$('li#tab_l').click(function() {
		$('div#tab-01').css({'display' : 'block'});
		$('div#tab-02').css({'display' : 'none'});
	});

	// 右タブをクリック
	$('li#tab_r').click(function() {
		$('div#tab-01').css({'display' : 'none'});
		$('div#tab-02').css({'display' : 'block'});
	});

	// 最初のタブを表示
	$('div#tab-01').css({'display' : 'block'});
});

$(function(){

$('#tab_l').on("click", function (e) {

e.preventDefault();

});

$('#tab_r').on("click", function (e) {

e.preventDefault();

});

// 左タブをクリック

$('li#tab_l').click(function() {

$('div#tab-01').css({'display' : 'block'});

$('div#tab-02').css({'display' : 'none'});

});

// 右タブをクリック

$('li#tab_r').click(function() {

$('div#tab-01').css({'display' : 'none'});

$('div#tab-02').css({'display' : 'block'});

});

// 最初のタブを表示

$('div#tab-01').css({'display' : 'block'});

});

JSのみ更新
上記のコードのサンプル
return false;を使ってリンクを無効化する方法もあるのですが、その場合タブで切り替える部分も機能しなくなってしまいます。ページ内リンクのみを無効化したいためpreventDefaultを使用しました。

参考サイト
TAM Technical Team Tips Note
jQuery のバブリング、preventDefault() や stopPropagation() の使用例

ふじこのプログラミング奮闘記
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について

[tmkm-amazon asin=’4048913913′][/tmkm-amazon]

WordPressでタイトル入力を必須にする方法

投稿日時: 2015年2月19日投稿者: 圭太

今までまったく知らなかったのですがWordpressはタイトル、本文を入れなくても記事が公開できてしまうんです。

「タイトル入れないってどうゆうことだ！」と思ってしまうのですが、できてしまうものは仕方ないです。

※タイトル、本文両方入れない場合「投稿を公開しました」と表示されるが実際のページはない。

運用ルールで“タイトルは必ず入れる”とすればいいとは思うが、ついうっかりもあるかもしれないのでタイトルが入力されていない場合はアラートが出るようにします。
以下をfunctions.phpに追記します。

// タイトル未入力時にアラート
add_action( 'admin_head-post-new.php', 'my_title_required' );
add_action( 'admin_head-post.php', 'my_title_required' );

function my_title_required() {
?>
<script type="text/javascript">
	jQuery(document).ready(function($){
		if('post' == $('#post_type').val()){
			$("#post").submit(function(e){
				if('' == $('#title').val()) {
					alert('タイトルを入力してください');
					$('#ajax-loading').css('visibility', 'hidden');
					$('#publish').removeClass('button-primary-disabled');
					$('#title').focus();
					return false;
				}
			});
		}
	});
</script>
<?php
}

// タイトル未入力時にアラート

add_action( 'admin_head-post-new.php', 'my_title_required' );

add_action( 'admin_head-post.php', 'my_title_required' );

function my_title_required() {

jQuery(document).ready(function($){

if('post' == $('#post_type').val()){

$("#post").submit(function(e){

if('' == $('#title').val()) {

alert('タイトルを入力してください');

$('#ajax-loading').css('visibility', 'hidden');

$('#publish').removeClass('button-primary-disabled');

$('#title').focus();

return false;

}

});

}

});

</script>

<?php

}

タイトルの有無をjQueryでチェックしてアラートを出しています。「タイトルを入力してください」の部分はアラートで表示する文字なので好きな文字に変更して使えます。

これでタイトルを入力しないで公開しようとするとアラートが表示され記事は公開されません。

Logicool G700sを使って1ヶ月レポート

投稿日時: 2015年2月16日投稿者: 圭太

今までLogicoolのMX Revolutionを使っていて、何ら不満はなく、むしろ気に入っていたのですがチャタリングがひどくなってきて使い物にならなくなってしまいました。5年も使っていればしかたないですね。
チャタリング状態で使い続けるのはストレスがたまるので新しいマウスを買うことにしました。MX Revolutionの後継機はM950tらしいのですが、今回は巷で評価の高いロジクールのゲーミングマウスG700sを購入してみました。

内容物

箱の中には

G700s本体
レシーバー
充電ケーブル（ワイヤードケーブル）
レシーバー延長USBケーブル
説明書、保証書、保証規定（白い紙箱）

充電池

G700sはワイヤレスと有線のどちらでも使えるタイプのマウスです。単三電池1本で動き、マウスにははじめからエネループが入っていました。電池の下のくぼみにはレシーバーを入れることができます。充電ケーブルを繋げばマウス本体でエネループを充電できるようですが、やったことはありません。

マウス前方には充電ケーブルを刺すmicroUSB端子があります。ここにケーブルを繋ぐと有線マウスとして使用することができるみたいです。こちらもやったことはありません。

ゲームソフトウェア

ゲーミングマウスって始めただったので知らなかったのですが、ドライバと言うより専用のソフトをインストールする必要があるんですね。しかもソフトはバックグラウンドで動かし続けてる必要があるなんて。

こんな初歩的なことがわるまで苦労しました。そしてどうもこのゲームソフトウェアが私のMacとの相性が悪いみたいです。ポインタ設定をどんな変えても画面を切り替えると元に戻ってしまうんです。
この件に関してLogicoolのサポートとやりとりしたのですがまったく解消せず。

こんな状況なので「このマウス使えないかも」と思っていたのですがデフォルト設定から設定を削り、そこからちょっとずつ設定していったら設定が保存されました。

「デフォルトに戻す」をクリックして設定をデフォルトに戻す
DPI感度レベルのレベルの数を“1”にする
感度レベルの好きな数値に変更
レベルの数を“2”に増やす
増やした設定を好きな数値に変更

※ OS X 10.9.5、ゲームソフトウェア8.55.88

とやっていきました。現在、これでうまくいっています。
私はゲームをしないので、あまり多くの設定が必要ではありません。なので画像のような少ない設定になっています。

総評

ボタンが13個もあるマウスなんて初めてだったのですが、ソフトごとにキーを割り当てて使うとすごく便利です。Photoshopでキーを3個以上同時に押す必要のあるショートカットを割り当てるとワンクリックで使用できるので一度使うとやめられません。レシーバーも小さくなっていいです。

ブラウジングもほぼマウスだけで行えます。

MX Revolutionと比べると若干大きいような気がします。使い始めは大きさと通常ないボタンを押すために指が攣りそうでしたが、1ヶ月ほど使って慣れました。

問題はネットで言われているように、やはり電池持ちが悪いこと。満充電のエネループで3日保ちません。私は使わない時はマウスの電源を切るのですが、それでも保ちません。なのでこのマウスをエネループ5本で運用しようと思います。

[tmkm-amazon asin=’B00CDCFBD4′][/tmkm-amazon]

loconoco

投稿者「圭太」のアーカイブ

パンくずリストの構造化

microdataでパンくずリストの構造化

1．パンくずリストを囲む

2．aタグにitempropを記述

3．各項目にitemprop=”title”を追加

高いけど満足の中敷き「スーパーフィートトリムフィットグリーン」

スーパーフィートトリムフィットグリーン

keypressはブラウザによって反応するキーが違う

さくらのVPSのOpenSSLを1.0.1mにアップデート

MTEntries idで何も表示されない不思議

Excel2007で新規ブックの初期フォントとシート数を変更する

2015.03 アップルイベントについての感想

Apple Watch

MacBook

ページ内リンクを無効にしてタブメニューを動かす（jQueryのpreventDefault）

まずはダメな場合

大丈夫な場合

WordPressでタイトル入力を必須にする方法

Logicool G700sを使って1ヶ月レポート

内容物

充電池

ゲームソフトウェア

総評

microdataでパンくずリストの構造化

1．パンくずリストを囲む

2．aタグにitempropを記述

3．各項目にitemprop=”title”を追加

スーパーフィート トリムフィット グリーン

Apple Watch

MacBook

まずはダメな場合

大丈夫な場合

内容物

充電池

ゲームソフトウェア

総評

スーパーフィートトリムフィットグリーン