![original_sns_button_thumb]()
もくじ
仕上がりイメージ
仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。
![オリジナルNSボタン]()
※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。
※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。
今回もサンプルを作ってみましたよ〜。
サンプル
お世話になった記事
今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイト様なしでは書けませんでした。感謝です〜＞＜
PHPでSNSシェア数を取得する
まずはPHPでシェア数を取得。取得したシェア数はオリジナルボタンを設置する時に出力させたいので、今回はひとまずそれぞれの変数に格納しています。もし、その場で確認したい場合は「echo」などで出力させてくださいね。
また、該当ページのURLはJSONデータを取得する際に直接指定してもいいのですが、複数のSNSボタンを設置する場合はURLを変数化しておくと便利！
Twittter
[php]
<?php
//ページのURLを変数に格納
$url='シェア数を取得したいページのURL';
//JSONデータを取得
$json = @file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $url . '');
//JSONデータを連想配列に直す
$array = json_decode($json,true);
//$twitter_countという変数に格納
$twitter_count = $array['count'];
?>
[/php]
Facebook
Facebookは、カウントが0だと「0」というデータを返してくれないそうです。なので、存在しない場合は「0」と表示させるために、カウント数の取得の前にif文を書きます。
[php]
<?php
//ページのURLを変数に格納
$url='シェア数を取得したいページのURL';
//JSONデータを取得
$json = @file_get_contents('http://graph.facebook.com/?id=' . $url . '');
//JSONデータを連想配列に直す
$array = json_decode($json,true);
//データが存在しない場合は0を返す
if(!isset($array['shares'])){
$count = 0;
}else{
$count = $array['shares'];
}
//$facebook_countという変数に格納
$facebook_count = $count;
?>
[/php]
Google+
Google+にはTwitterやFacebookのようなAPIがないそうです。私もほうぼう探しまわったけど見つかりませんでした…。なので、
Syncerさんのサイトで紹介されていた時は小躍りしました！ありがたや。「CURL」というものを使うんですね。
[php]
<?php
//ページのURLを変数に格納
$url='シェア数を取得したいページのURL';
//CURLを利用してJSONデータを取得
$ch = curl_init();
curl_setopt( $ch, CURLOPT_URL, "https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ" );
curl_setopt( $ch, CURLOPT_POST, 1 );
curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $ch, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]' );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch, CURLOPT_HTTPHEADER, array( 'Content-type: application/json' ) );
$result = curl_exec( $ch );
curl_close( $ch );
//JSONデータからカウント数を取得
$obj = json_decode( $result, true );
//カウントが0の場合
if(!isset($obj[0]['result']['metadata']['globalCounts']['count'])){
$count = 0;
}else{
$count = $obj[0]['result']['metadata']['globalCounts']['count'];
}
//$gplus_countという変数に格納
$gplus_count = $count;
?>
[/php]
はてなブックマーク
[php]
<?php
//ページのURLを変数に格納
$url='シェア数を取得したいページのURL';
//APIではてブ数を取得
$count = @file_get_contents('http://api.b.st-hatena.com/entry.count?url=' . $url . '');
//カウントが0の場合
if(!isset($count) || !$count){
$count = 0;
}
//$hatena_countという変数に格納
$hatena_count = $count;
?>
[/php]
もっとたくさんのSNSのシェア数を取得したい！という方は参考にさせていただいたこちらの記事へどうぞ。APIの利用方法の段階から丁寧に解説してくださってます！！
オリジナルSNSボタンを設置する
続いてSNSボタンの設置方法です。「シェアしたいURL」「ページタイトル」などの部分は直接指定してもいいですが、ミスが怖いので私はPHPを使う時は変数化してます！
また、私はTwitterなどのボタンのaタグに「target="_blank"」を設定しています。その方がページが遷移したということが伝わりやすいと思うので。ですが、この辺は好みの問題もありますので適宜調整してくださいね！
Twittter
Twitterについてはシェアする情報に加えてハッシュタグをつけたりなど色々できますよね。必要に応じて削ったりしてください！
[html]
<a href="http://twitter.com/share?url=[シェアしたいURL]&text=[ツイート内容]&via=[ツイート内に含むユーザー名]&related=[ツイート後に表示されるユーザー]&hashtags=[ツイート内に含まれるハッシュタグ]" target="_blank"><img src="オリジナルSNSボタンの画像" alt="Twitterでシェア"></a>
[/html]
Facebook
[html]
<a href="http://www.facebook.com/share.php?u=[シェアしたいURL]" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="オリジナルSNSボタンの画像" alt="Facebookでシェア"></a>
[/html]
Google+
[html]
<a href="https://plus.google.com/share?url=[シェアしたいURL]" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="オリジナルSNSボタンの画像" alt="Google+でシェア"></a>
[/html]
はてなブックマーク
[html]
<a href="http://b.hatena.ne.jp/entry/[シェアしたいURL]" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="[ページタイトル]"><img src="オリジナルSNSボタンの画像" alt="はてなブックマークに追加" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
[/html]
LINE
[html]
<a href="http://line.me/R/msg/text/?[ページタイトル][シェアしたいURL]" target="_blank"><img src="オリジナルSNSボタンの画像" alt="LINEでシェア"></a>
[/html]
シェア数取得〜ボタン設置までの流れ
さーて、今までやったことを一連の流れでお伝えします。
やってることは単純で、PHPでシェア数を取得→各SNSボタンを設置→フキダシ部分でシェア数を受け取って表示…といった具合です。
[php]
<?php
//---------ページのURL・ページタイトルを変数に格納---------
$url='シェア数を取得したいページのURL';
$title='ページタイトル';
// ---------SNSシェア数を取得---------
// Twitter
$json = @file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $url . '');
$array = json_decode($json,true);
$twitter_count = $array['count'];
// Facebook
$json = @file_get_contents('http://graph.facebook.com/?id=' . $url . '');
$array = json_decode($json,true);
if(!isset($array['shares'])){
$count = 0;
}else{
$count = $array['shares'];
}
$facebook_count = $count;
// Google+
$ch = curl_init();
curl_setopt( $ch, CURLOPT_URL, "https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ" );
curl_setopt( $ch, CURLOPT_POST, 1 );
curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $ch, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]' );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch, CURLOPT_HTTPHEADER, array( 'Content-type: application/json' ) );
$result = curl_exec( $ch );
curl_close( $ch );
$obj = json_decode( $result, true );
if(!isset($obj[0]['result']['metadata']['globalCounts']['count'])){
$count = 0;
}else{
$count = $obj[0]['result']['metadata']['globalCounts']['count'];
}
$gplus_count = $count;
// hatena
$count = @file_get_contents('http://api.b.st-hatena.com/entry.count?url=' . $url . '');
if(!isset($count) || !$count){
$count = 0;
}
$hatena_count = $count;
print <<< html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="share">
<ul>
<li class="twitter">
<div class="arrowBox">
<span>{$twitter_count}</span>
</div>
<a href="http://twitter.com/share?url={$url}&text={$title}" target="_blank"><img src="オリジナルSNSボタンの画像" alt="Twitterでシェア"></a>
</li>
<li class="facebook">
<div class="arrowBox">
<span>{$facebook_count}</span>
</div>
<a href="http://www.facebook.com/share.php?u={$url}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="オリジナルSNSボタンの画像" alt="Facebookでシェア"></a>
</li>
<li class="gplus">
<div class="arrowBox">
<span>{$gplus_count}</span>
</div>
<a href="https://plus.google.com/share?url={$url}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="オリジナルSNSボタンの画像" alt="Google+でシェア"></a>
</li>
<li class="hatena">
<div class="arrowBox">
<span>{$hatena_count}</span>
</div>
<a href="http://b.hatena.ne.jp/entry/{$url}" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="{$title}"><img src="オリジナルSNSボタンの画像" alt="はてなブックマークに追加" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
<li class="line">
<a href="http://line.me/R/msg/text/?{$title}{$url}" target="_blank"><img src="オリジナルSNSボタンの画像" alt="LINEでシェア"></a>
</li>
</ul>
</div>
</body>
</html>
html;
?>
[/php]
このコードを使って作ったサンプルがこちら！
サンプル
おまけ：cssでフキダシの作り方
シェア数を表示させる部分のフキダシをcssで作る時はこちらのジェネレータにお世話になってます！めちゃめちゃ便利！これで下向きのフキダシを作ります〜！
![cssでフキダシを作るジェネレータ「cssarrowplease」]()
サンプルページで使ったcssは以下のようになっています。
![cssでフキダシを作る]()
[css]
.arrowBox {
position: relative;
background: #ffffff;
border: 1px solid #cccccc;
border-radius: 3px;
text-align: center;
}
.arrowBox:after, .arrowBox:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrowBox:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 5px;
margin-left: -5px;
}
.arrowBox:before {
border-color: rgba(204, 204, 204, 0);
border-top-color: #cccccc;
border-width: 6px;
margin-left: -6px;
}
[/css]
サンプル
さいごに
いかがでしたか？こんな記事を書いていますが、以前の自分は「SNSボタンは公式のボタンが一番いい」と思ってたんですよね。公式のボタンが一番広く認知されているだろうし、ヘタにオリジナルのボタンにしたら、逆に押してもらえなくなってしまうんじゃないかって。自分がビビリなので、よくわからないボタンを押そうという気にはあんまりなれないんです。
ですが、最近はもうSNSでシェアするという行動が世間的に根付いてきて、「シェアボタン」自体の認知度もかなり高いと思うので、公式のものよりデザインにマッチしたオリジナルのボタンのほうが好まれることもありそうですよね。なんといっても表示速度が速いし。
とはいえ、まだ自分のサイトをオリジナルのSNSボタンに変更できていない状態なのですが、そういった変化にも徐々に対応していきたいと思います。以上、彩がお伝えしましたー！
新たにアカウントを作成することもできますが、「Facebook」「Twitter」「GitHub」のうちどれかのアカウントを持っていればそのままログイン出来ます。
その後、自分のメールアドレスを入力すると、プロダクトを有効化することができます。
インストーラが起動したら、もう一度ダブルクリックしてPhotoshopにプラグインをインストール。その後、Photoshopを再起動したら、準備完了です！
パネルはこんな感じ。左が操作パネルで、右が設定パネルです。
今回は、この花の画像で試してみます！
方法はカンタン。書き出す形式、保存先を設定し、レイヤーを選択した状態でパネルの「Export Select Layers」を押すだけ！
さっそくPhotoshopで書き出したPNG画像（PNG24）と比べてみます！
ガーン…変わらない…。
しかし！「PNG Hat」の威力はPNG24ではなく、PNG8の書き出し時にこそ発揮されるのです！
う、美しい…。並べてみると一目瞭然！PhotoshopのPNG8のほうは、サイズは軽いけれどもボックスシャドウのエフェクトがガタガタに…。対して、「PNG Hat」はサイズが小さくなったにも関わらずエフェクトの美しさはそのまま！
「PNG Hat」はPNG8形式でもPNG24のように綺麗に書き出してくれるんですね！
さて、これでさっきのPNG24と比べてみると…。
60%くらい小さくなっていることがわかります！見た目はほとんど変わりません。これは嬉しいですねー！
また、「scale」をを変更すると、任意のサイズで書き出せます。例えば50にすると、1/2のサイズで書き出してくれるので、スマホ用に小さな画像を作成したりする時にも活躍してくれるのではないでしょうか！
対応フォーマットとしては、JPGも対応しています。画質も選べるみたいなので、こちらも大活躍してくれそうなのですが、私の拡張機能だと設定画面に横スクロールバーが出て選べませんでした…どうしたらいいのだろ。
実際には設定画面のスクロールバーの部分は以下の右の図のようになっているようです！
詳しくは、コリスさんの記事でどうぞ！
他にも、登録と同時に1024MBのクラウドが利用できたり、文字列を画像にするという「BASE64」形式で書き出すこともできますよ！
いかがでしたでしょうか？重いPNG画像の軽量化が、他のサービスを使うことなく全てPhotoshopだけで完結できたらかなりの制作時間の短縮になりますよね。
「PNG Hat」はPhotoshop CS5から対応しているのも嬉しいところ。私は職場ではCS5を使っているので、ぜひ仕事でも役立てたいと思います。
通常$39.99の有料プラグインですが、それに見合うだけの働きをしてくれるのではないでしょうか。気になった方はぜひ配布サイト「madeby source」でチェックしてみてください！
最後にキャペーンを開催してくださったコリスさん本当にありがとうございました！
以上、彩がお送りしました。
なんと！長年「贋作だ」と思われていた絵が実は本物のゴッホ作「モンマジュールの夕暮れ」だったことが発覚したそうです！1906年に贋作だと判断され以降ずっと屋根裏部屋に眠り続けていたそうなので、かれこれ
ひまわり （15本のひまわり）[/caption][caption id="attachment_7199" align="alignright" width="260"]
ひまわり （12本のひまわり）[/caption]
ウクライナ出身のOleg Shuplyak（オレグ・スープリヤク）さんの作品だそうです。よく見るとゴッホで構成されているゴッホの自画像。とてもユニークで面白いですね！しかも、絵のタッチまでゴッホそっくりなところがまた芸が細かいというか…！
Oleg Shuplyak（オレグ・スープリヤク）さんの作品はこちらから見る事ができます！
渋いオッサンみたいなキャラとして登場するのかと思いきや、もはや原型をとどめていなかった…。「
次からは上記をすべて満たした私のおすすめギャラリーサイト10選をご紹介！
まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。
[html]
<meta name="viewport" content="width=device-width,initial-scale=1.0">
[/html]
スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってしまいますよね。そうなるとサイトを閲覧しづらい場合があるので、私はいつも横にしても文字が縦向きの場合と同じになるよう設定しています。
以下のように設定すれば、スマホを横にしても文字サイズはそのままとなります！
[css]
body {-webkit-text-size-adjust: 100%;}
[/css]
iPhone以外ではどうなのかわかりませんが、スマホでは電話番号に自動的にリンクが貼られてしまい、すぐに電話がかかる状態になっています。ですが、意図しない時に動作してしまうことがあるかもしれません。
なので、私は以下のようにして文章中などの電話番号には自動的にリンクがつかないよう設定しています。
[html]
<meta name="format-detection" content="telephone=no">
[/html]
先ほどの設定は電話番号のリンクが自動的につかないようにするものでしたが、今回は任意のボタンにだけ電話がかけられるようにリンクを設定する方法です。
このようにすれば、ボタンを押せばリンク先の番号に電話がかけられます。
[html]
<a href="tel:0120-00-0000">0120-00-0000</a>
[/html]
ブラウザ上でマップを表示させていても、やはりスマホのGoogleマップアプリで見たい時があると思います。そんな時、以下の一文を書けばボタンひとつで見たい住所を指定した状態でGoogleマップが立ち上がります。
[html]
<a href="http://maps.google.com/maps?q=住所">住所</a>
[/html]
スマホサイトを制作している時、ボタンなどのリンクには基本的に以下のコードをセットでつけます。スマホではリンクエリアが狭いと非常に使いづらいですからねー！あとは適宜幅を調整です。
[css]
display: block;
[/css]
以下のように左右を50%ずつで分割し、キレイな田の字型のメニューを作りたい。でも、borderやpaddingが入ってくるとキレイに「50%」とはならない…計算面倒くさい…。
…という悩みを一発で解決するのが以下の一行です。！
[css]
box-sizing : border-box ;
[/css]
スマホサイトでは使える横幅が狭いので、長いカタカナ単語などは収まりきらず、中途半端なところで改行されてしまったりします。それを回避し、強制的に文字列の途中で改行させるのが以下の一行です。
[css]
word-break: break-all;
[/css]
コピー先：/Applications/XAMPP/xamppfiles/htdocs/test
色が多すぎてゴチャゴチャした印象に…[/caption]
４個以内のかたまりに区切ってやれば、4つ以上の個数を覚えることが可能[/caption]
例えばサイトのサイドバーに大量のバナーがズラリと並んでいるのを目にした時、それらをクリックするのをためらってしまった経験はないでしょうか？また、多すぎるメニューを目の当たりにして、このサイトは一体いくつのコンテンツを扱っているのだろうと疑問に思ったことはないでしょうか？
サイト内の選択肢をしぼりこむことで、ユーザーの「探す」負担を軽減することができます。ユーザーが欲しい情報をすぐに探すことができれば、クリックしてその先のコンテンツを読んでもらえる確率がより高くなります。
この方法をうまく使っているのはアメリカ版のmsnではないでしょうか。
[caption id="attachment_7469" align="aligncenter" width="540"]
ですが、この「選択」の理論は逆の説もあるそうです。多くの選択肢の中から自分の要望が達成できると、人は「物事を自分の思い通りに動かせた」という感覚を持つため、選択肢の多い方を好む場合も見られるそうです。なので、一概に選択肢が少ないほうがいいとも言い切れません。
その時々でどちらのパターンも実践してみることが必要かもしれませんね。
また、先ほど「選択肢は4つ以内に」という話をしましたが、どうしても4つ以上になってしまう場合が生まれてきます。例えば人気記事のランキングを10件分表示したい場合はどうでしょう。
こういった場合も、「
その際に、パッと見て似たようなレイアウトが並んでいたとしたら、例えひとつひとつのコンテンツは違っていても、初見のユーザーからするとそれらは同じに見え、違いがわかりづらいと考えられます。
[caption id="attachment_7526" align="aligncenter" width="540"]
隣接しているコンテンツのデザインが似ている場合
隣接したコンテンツを違うデザインにした場合[/caption]
また、リマインド機能もバッチリついているため、タスクをこなす時間に別のことに気をとられていたとしても、画面に表示されるのですぐに気づくことができます。
Chromeプラグインと同じようにリマインドしてほしい日付を設定するだけ！そうすると、自動的にChrome側でも同期されています。これでメール画面を見て「やらないとなー」と思った時、すぐにリマインド設定することができますよー！
余談ですが、私はたまに休みの日に自社サイトの表示チェックをする時があり、そういう時にもとても重宝しています！お休みの日はPCに向かってない時の方が多いですからね！
Any.DO To Doリスト | タスクリスト
作業中、調べ物などをしていてついついブラウザを開きすぎてしまい、PCが重くなってしまった経験ありませんか？このプラグインを入れておけばアクティブでないタブを停止状態にすることができます。
停止までになる時間を「5分」「15分」「30分」…と調整できます。また、「このサイトだけは停止状態にしてほしくない」という場合はホワイトリストに追加できるなど、細かいカスタマイズが可能です。
色に頼らないモノクロの状態で見やすいデザインは、カラーにした状態でも見やすいです。このプラグインを使えば、見ているページをモノクロで表示することができます。
私はサイトの一部分に変更を加えてみたけど、ちゃんと見やすいデザインになっているかな？と気になった時に、視認性をチェックするのに使っています。
![「[ピン] ボタン」](http://designcolor-web.com/wp-content/uploads/2015/02/150209_4.jpg)
画像から直接Pinterestにピンできるプラグイン。私は昔から無精なので、なかなか自分で「気になったデザインをストックする」というクセがつけられませんでした。そのため、デザインに取りかかる時になってようやく、以前に気になったデザインを探すハメに…。ですが、それだととても非効率的ですよね。
このChromeプラグインを使ってPinterestを始めてからは、ワンクリックでデザインをストックできるため、とても重宝しています。特にバナーのデザインをストックするのに役立ってます。
コーディング時に必要なツールが全てつまったようなプラグイン。開いているページのaltを一括で表示できたり、使用しているcssやjsファイルを表示できたり、ページで使用されている色もカラーパレットとして出力してくれたりします。
定規ツールやブラウザのリサイズ機能などもついており、とりあえずこれ一個入れておけばコーディング時に知りたい情報は大体得られるんじゃないか？と思います。多機能すぎてとても一言では言い尽くせないくらい便利なプラグイン。
HTMLのコーディングの前に、最初に考慮するのがサイトの構成ですよね。作っているうちに階層が複雑になってきたりもします。そんな時、ワンクリックでサイトの構成を見ることができるのがこちらのプラグイン。入れておけば、自分のサイトだけでなく気になったサイトはどういう構成で作られているのか？なども確認することができます。
ワンクリックで翻訳ツールが開けるプラグイン。コーディングの際にクラス名などをつけたい時、「えーと、『見出し』って英語でなんて言うんだっけ？」など困ったことはありませんか？私は英語が苦手なので、すごくよくあります。このプラグインを入れてからだいぶ作業時間の短縮になりました。
また、英語の記事を読む時にも大変便利。英語だけでなく色んな言語にも対応しているので、お勉強にも活躍しそうですね。
今開いているページを「ページ全体」や「目に見える部分」「選択部分」など色々な方法でキャプチャできるプラグイン。私は会議の資料を作成する時によくキャプチャを切り貼りするので、そういった時に重宝しています。
一番気に入っているのは「外部エディタで開く」という機能なのですが、なにやらWindowsでしか使えないもよう。これを使えば、キャプチャした画像を一発でPhotoshopなどで開くことが可能なのです！なんでMacで使えないんだろう…。
文字数を数えてくれるプラグイン。記事を書いている最中に「いま何文字書いたかな〜」と確認するのに使っています。あと、デザイン時に「ここの見出しは何文字までにおさえてもらおう…」と構成を考えたりする時にも便利。
いちいちGoogle Analyticsを見に行かなくてもアクセス数を確認できるプラグイン。「昨日のアクセス数はどんなだったかなー」など、ガッツリではなくちょこっと調べたい時に使用しています。
Webサイトへの流入元や検索キーワードなどがチェックできるプラグイン。自分のサイトはもちろん、他のサイトの情報もチェックすることができます。ただ、数値の精度はそこまで高くないらしいので、あくまでも目安です。
お仕事で自社メディアの競合サイトの情報を見たりもしています。「うちのサイトはTwitterからの流入が主だけど、あのサイトははてブからなんだな〜」など、ざっくりと参考にしています。
サイトに使われている技術を教えてくれるプラグイン。「このサイトは何でできているんだろう？Wordpressかな？」などちょっと気になったら見るようにしています。検索バーの右端に常に表示されており、クリックするとサイトで使われている技術の一覧が表示されます。
私はブログを制作した当初、この形式のコードをコピーしてそのままベタ貼りしていたのですが、よく見たら、aタグと一緒にscriptタグもくっついてるじゃないですか！Yuu（
ループの度に読み込まれるスクリプト[/caption]
お気に入りは
サイトに桜を降らせることができるあくちーさんのスクリプトはこちらで配布しています！あくちーさん素敵なスクリプトをありがとうございます〜！
プログラムが苦手なため、テーマの途中からサムネイルサイズを切り替える作業にかなり苦戦しました。基本的には以下のような方法で、サムネイルサイズが変わった日を境に出力を切り替えています。表示したい内容をデータとして取得し、いったん変数に入れてから出力する感じですね。
[php]
<?php
$date = get_the_time('Ymd');//投稿日を取得
if ($date >= '20150317') {//投稿日が3月17日以降なら
echo 'サムネイルサイズ大のデザイン';//サムネイルサイズ大のデザインを表示
}else{
echo 'サムネイル小のデザイン';//サムネイルサイズ小のデザインを表示
}
?>
[/php]
今度忘れないように記事にしようかと思いますが、もっとスマートなやり方があるよ！というご意見があればぜひ教えてください！
以前にPHPでシェア数を取得してオリジナルSNSボタンを設置するという記事を書きましたが、これと同じ方法で実装できました！
今回使用させていただいたのは
引用元：
引用元：
星月夜[/caption]
引用元：
引用元：
引用元：
2015年3月、ブラウザの新規タブの背景に世界の名画を表示するChromeの拡張機「
ダウンロードは以下のリンクから！
引用元：
引用元：
引用元：
引用元：
CHAPTER1ではNode.jsやRubyを用いた開発環境の作り方などが紹介されています。制作に入る前段階の開発環境を作るのって、大変ですよね。少なくとも私にとっては最もハードルが高い作業に感じます。
案件に何か新しい技術を取り入れる時は、Googleで検索しながら手探りで導入していただけだったので、ここでまとめて基本的なことを学べるのは助かりました。
例えば、私は仕事ではNode.js上で動作するgulpを使ってコーディング作業をしているのですが、導入する際には「gulpを使うためにとりあえずNode.jsを入れる」といった感覚でしかなかったため、本を読むまで「そもそもNode.jsとは何なのか」ということはよく知らないままでした。
ですが、もしgulpを使っていくうちに何らかの問題が起きた時に、そもそも「どうして動いているのかもよくわからない」状態だと、解決までの時間が非常に長くなってしまいますよね。そういったことを本の冒頭から教えていただきました。
CHAPTER2からはHTMLのコーディングについて。章の始まりではHTML5の特徴についてや、HTML5から新たに加わった要素などが紹介されています。その中の「フォーム機能の強化」についてを読んで、自分の“知っているつもり”がまたも発覚してしまいました。
フォーム要素のブラウザ対応表も載っている！[/caption]
今までただ単に「全ての画像にaltをつける」ことが正しいアクセシビリティと考えていた自分にとって、状況に応じてaltをつけないほうがいい場合があるということは驚きでした。もちろん、考えればわかることですが、間違えて覚えている状態では考えを容易に修正できません。またも、書籍に基本的なことを教えていただきました。
CHAPTER3ではSassやLESSなどのCSSプリプロセッサに始まり、CSS3のセレクタについてなど。最初は「Sassは普段から使っているからバッチリだぜ！」などと思いながら読んでいたのですが、変数やネスト、Mixinについては知っていたのに実は「Extend」を今まで全く使っていなかったなど、ここでも今まで知らずに損していたことがたくさんありました。
CSS3のセレクタ一覧[/caption]
CHAPTER4ではGrunt・gulpの2種類のタスクランナーについて、インストールから実行、ライブリロードなどの便利な機能まで幅広く紹介されています。gulpを使ってはいるものの、手探りで使っている状況の自分としては、後でもう一度本を読みながら自分の設定を見返す所存です。
また、表示パフォーマンス向上のコツやブラウザでの検証方法など、コーディング後のサイトの最適化についてわかりやすく説明されています。
個人的には自分のメインブラウザがChromeのため、Chromeデベロッパーツールについて詳しく触れられていたのは嬉しかったです。多分使いこなせていない機能がまだあると思うので、その辺も仕事中に本を読みながらカンニングさせていただきますw
CHAPTER5は上級者向けの印象。テンプレートエンジンやサイトジェネレータなどについて紹介されています。こちらについては「きいたことあるな？」程度でほとんど知らない事ばかりでした。ですが、今すぐには使う技術でなくても、やはり「知っている」と「知らない」では雲泥の差がありますので、しっかりと使う機会がきた時のために覚えておこうと思います。
また、便利なコーディング用のエディタもいくつか紹介されています。世の中にはたくさんのエディタがありますが、それぞれ何ができて、どう違うの？ということがざっくりと知ることができますよ！新たなお気に入りのエディタが発見できるかも。
Like Box[/caption]
基本的には機能に変わりはなく、見た目が若干変わったくらいです。 Facebookページのカバーデザインを全面に押し出しているため、サイトのイメージがより色濃く印象づけられますね〜。
[caption id="attachment_7867" align="aligncenter" width="541"]
Page Plugin[/caption]
所定の場所に表示されれば、設置完了です！
ヘッダーデザイン[/caption]
拙いデザインですが、一応、右側の空もようの鳥がマグリットの代表作「大家族」をイメージしています。そして、ロゴの三日月はゴッホの作品「星月夜」の三日月をイメージしました。タッチまでは真似ることはできませんでしたけどね。
記事はサラッとでしたが、ページネーションって意外と作るのが大変ですよね・・・。色々考えなければならないこともあるし。未だにプログラムが苦手なので、他サイト様のソースを参考にして勉強しています。何か変なところがあれば教えていただければ嬉しいです。
以上、彩でした。
配布先：