Google Analyticsを導入するならフィルタ設定しておきましょう

本来なら最初に設定しておかないといけないようですが、
特に影響なかったので、そのままにしていたら…
ある日を境に『recruit.html』という作ってもいないページがAnalyticsに…

jQueryとかサンプルのhtmlデータも置いたりしているので、
丸コピペで他のサイトにトラッキング コードが埋め込まれているのかとも考えましたが、
どこのサイトか探すのも手間なので、フィルタをかけることにしました。
(残念ながら、アクセス界王拳はなりませんでした…)

Google Analytics フィルタ設定

アカウント選択中なら、そのままプロファイルにいくはずです。

右上の『アナリティクス設定』→(アカウントを選択)→『プロファイル』→プロファイル名を選択(私の場合はwww.25egg.com)
タブから『フィルタ』→『+新しいフィルタ』

プロファイルにフィルタを追加

下記のようにフィルタ情報を設定して、保存します。

  • フィルタ名:お好きなように!
  • フィルタの種類:カスタムフィルタ 一致
  • フィルタ フィールド:ホスト名
  • フィルタ パターン:私の場合は『25egg.com』にしました

フィルタパターンは正規表現で

そのままやったら上手くいかない…よくわからないので、ヘルプみました。

バックスラッシュ()とドット(.) – アナリティクス ヘルプ

フィルタ設定は1つミスるとおかしくなってしまいますので、設定した後は要チェック。
他にも自分のアクセスは除外する…とかいろいろ設定できます :)

プラグインなしでWordPressにブックマークアイコンを追加する(Ver.2)

Pocket使い始めました(アドオン入れて快適!)
ので、ボタンを追加がてら久しぶりにブックマークボタンを見直してみました。
書き換える要素は同じですので、参照サイトは前回の記事よりご確認ください。

非同期のものばかりなので、jsは<body>直前にまとめて記述するようにしています。

導入時のバージョン:Wordpress 3.5.1
前回の記事:プラグインなしでWordPressにブックマークアイコンを追加する

公式サイトでカスタマイズした後、ピンク文字のところをWordpress用に書き換えるとスムーズです。

Twitter

スクリプトの表記が少し変わっていました。
data-via=”aiooxx”はご自分のTwitterIDに変更お願いします。
Twitter / ツイートボタン

<a href="https://twitter.com/share" class="twitter-share-button" data-text="<?php the_title(); ?>" data-count="none" data-url="<?php the_permalink() ?>" data-via="aiooxx" data-lang="ja">ツイート</a>

</body>直前

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Facebook

html5記述に変更しました。
このボタンを使用すると、ポップアップ出てくるようになるんですね、なるほどなるほど。
Like Button – Facebook開発者/

<div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-show-faces="false"></div>

</body>直前

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

はてブ

変更ありませんでした。
はてなブックマークボタンの作成・設置について

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php wp_title(); ?> | <?php bloginfo('name'); ?>" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

</body>直前

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

Tumblr

こちらも特に変更ありませんでした。
ボタン | Tumblr

<a href="http://www.tumblr.com/share/link?url=<?php echo urlencode(get_permalink(get_the_ID())) ?>&name=<?php echo urlencode(get_the_title()) ?>&description=<?php echo urlencode(mb_substr(strip_tags(get_the_content()), 0, 140)) ?>" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>

</body>直前

<script src="http://platform.tumblr.com/v1/share.js"></script>

Pocket

公式でカスタマイズの説明あったのでその通りにやってみました。
Pocket for Publishers: Pocket Button
Pocket for Publishers: Pocket Button Documentation

<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink() ?>"></a>

</body>直前

<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

Evernote

共通ボタンの提供終了していました。いつの間に…
Site Memory [Deprecated] – Evernote Developers

Google+1

何故かエラーでボタンのカウントがされていなかったので、一旦削除しました。
ちょっと原因調べてみます…
+1 Button – Google+ Platform — Google Developer

google-code-prettifyでタグの見た目を変更する

こないだのソースコード不備修正で気づきましたが、こういう時に行番号ないと困りますね。
今回はコードも短いのでよかったですが、そのうち○行目ってわからなくなりそう… :(

SyntaxHighlighterと迷いましたが、
Google先生が提供してくれている『google-code-prettify』を使うことにしました。

ダウンロードしたファイルをアップロード

google-code-prettify

上記のサイトからダウンロードします。
README.htmlをみると『lang-○○.js』言語拡張したい場合は…
ということみたいなので、最低限いれるのは『src』フォルダ内のこの3つでよさそうです。

  • prettify.css
  • prettify.js
  • run_prettify.js

ファイルの読み込みと実行

アップロードしたrun_prettify.jsを読み込みます。
prettify.cssとprettify.jsの読み込み、ついでにonload・skinの選択をしています。

 <script src="../run_prettify.js?autoload=true&amp;skin=default"></script> 

<pre>にclassを追加

google-code-prettifyを適用させるにはclassの追加が必要になります。
全データ変更していくのが面倒なので、<pre>タグ全てにclassを追加するようにjQuery追加しました。
『run_prettify.js』より先に実行させておきます。

jQuery(function($){
	$('pre').addClass('prettyprint linenums');
});

<pre>にcss追加

YUIのreset.cssと競合してしまって行番号が表示されていなかったです。
少しcssごにょっとしました。

//折り返し表示
pre{
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow:auto;
}

//行番号のリスト表示
pre ol li{
	width:95%;
	list-style:decimal outside;
	margin:0 0 0 5%;
}

行番号の表示とソースのハイライト

デフォルトからカスタマイズもしていないので、行番号は5行ごとに表示されます。

pre_after

WordPressには?

サンプルデータ(25egg.com/sample/)のみ反映していますので、ブログの本文は未着手…
WordPressにもいれるなら、少しテーマもカスタマイズしたいので、検証してからにします。

jQueryでクリックすると背景画像を変更させるサンプル

素材サイトでよく見かけるクリックすると背景画像を変更するサンプルです。
css変更しているだけのシンプル設計。

HTML

<ul class="bgicon">
	<li><img src="bg/bg01.gif"></li>
</ul>

jQuery

この記述の前にjQueryの読み込みが必要です。

$('.bgicon li img').css('cursor','pointer');
$('.bgicon li img').click(function(){
	$('body')
	.css('background-image','url('+$(this).attr('src')+')');
});

奈良公園をさんぽ

nara2013

Flickrでさんぽ?http://www.flickr.com/photos/aiooxx/tags/nara2013/

厳密には奈良公園とはいわないかもしれませんが、お昼過ぎから興福寺→東大寺→春日大社とまわってきました。
寺社仏閣は掲載していいかよくわからなかったので、鹿の写真ばっかりです…もっと風景撮ってるつもりが…

約10ヶ月ぶりに御朱印もいただきました。
興福寺と東大寺が複数あるらしく…また時期かえて行こうかなと思います。

堺市立文化館でミュシャのデザイン集『装飾資料集』 みてきました

今やってる企画展がちょっと気になったので、堺市立文化館 アルフォンス・ミュシャ館にいってきました!

堺市立文化館 アルフォンス・ミュシャ館

ミュシャのデザイン集『装飾資料集』

装飾資料はもちろんですけど、
大好きな『夢想』とか『四芸術』のリトグラフもあった…!嬉しい。

あと、観覧チケットが共通だったので、こちらもみてみました。
堺市立文化館 与謝野晶子文芸館

そこまで大きなスペースではないので、どちらもあわせてで1時間くらいでまわりきりました。
人も少なくてゆっくりみれたのがよかったです。
市内からも近いし、ふらっとみに行くのも楽しいですよ :)

Facebookで設定できる画像のサイズ一覧をまとめてみました

個人的にもFacebookのグループ・イベント使うようになってきたので、
Facebook内で設定できる各画像のサイズをまとめておきます。
カバー画像は微妙にサイズ違うんですね。

もしかすると今後仕様変わってしまう可能性が99%くらいありますが、
変更あれば更新するようにしていきます。

プロフィールページ

アイコン画像:180px × 180px(表示は160px × 160px)
カバー画像:851px × 315px

Facebookページ

アイコン画像:180px × 180px(表示は160px × 160px)
カバー画像:851px × 315px
タブアイコン:111px × 74px

カバー画像に関してはガイドラインもありますので、作成時には注意が必要です。
アイコン画像がかぶってくるので注意。
参考:Facebook広告ガイドライン

投稿画像

通常:404px × 404px
ハイライト表示:843px × 403px

グループ

設定していないと、メンバーのアイコン画像が並びます。
カバー画像:800px × 250px(400px以上の画像でないと設定できない)

イベント

左メニューのイベント画像から変更になった…?
カバー画像だけ変更できるようなので、こちらのサイズを記載してます。
カバー画像:714px × 264px(イベントリストの表示は中央正方形でトリミング)

[16D]アイコン100個できました

16D

16D 25egg-DOT-

実はかなり前に100個できて公開はしていたのですが、
その後微調整をしつつ、カテゴリ別に分けての更新に変更してみました。

最終目標は1000!

素材サイトというからにはたくさん作りたい。
先は長いけど、がんばります!
今回は汎用的に使えそうなアイコン100!にしてみましたが、
かわいい系とか背景に使えそうなのもまだある感じなので、まとめようかなと…

次は200個つくって、またブログに書けるように…
to be continued…

コピペでつかえるcss3ボタンサンプル

使い回しがきくのにソースメモしてないから、毎回効率悪いわ…
ということで、個人的にもよく使うデザイン3つでメモしておこうかと思います。

※ただし、IEは除く

IEは除外しました。
ちゃんと調べてないけど、IE対応がややこしい気がするので(6,7,8,9,10バージョン毎に違うんやろか…)

それ以外のブラウザも今回は最新バージョンで確認していますので、
古いバージョンも対応するなら、ベンダープレフィックス追加した方がいいと思います。

参考:http://fmbip.com/litmus/

グラデーションの設定(linear-gradient)

グラデーションは特にがっつり設定してると野暮ったくなるので、
あんまり変わらないかな…?というくらいにしてます。

角丸(border-radius)

これもやりすぎると野暮ったくなるので控えめで。
少し丸みをつける程度(5px位まで)か完全に丸形にしてしまう。(50%)

難しいものはジェネレーターで生成

私はグラデーションの記述がなかなか覚えられないので、
ジェネレーターで生成してから、カスタマイズしてます。

参考:http://css3button.net/