Traffic optimization

タカハシシステム 技術関係ブログ ： WordPress

Archive for the ‘WordPress’ Category

いつの間にかキーカラーがブルーになってる件

2012年4月15日

見出しの背景にブルーを置いたことで「キーカラーはブルー」というのが全面に出てきました。統一感を出したり、イメージを固定してもらいやすくなったり、ちゃんとキーカラーを決めるのは大切なんですよね。

なんでブルーなの？

「技術関係ブログ」なので落ち着いた印象を与えたいという狙いがあります。あと伸縮色なので締まって見えますしね。あまり関係ないですが食欲も減ります。

寒色は視覚的に副交感神経に作用し、興奮を鎮めたり食欲を減退させる効果を持つとしてカラーマーケティングの現場で利用される。
（Wikipedia「寒色」より）

WordPressのロゴがブルーなのも理由のひとつです。

このブログの本当って？

本当は色から先に入るよりも「本当のところどうなのよ」を中心に据えて考えた方がいいんです。

・ザックリとしたメモ＆日記
・実はあまり技術関係のネタに触れない温度感
・ためになりそうでならない記事群

ちょっと自虐的ですが、実態としてはブルーのイメージから程遠いのかもしれません。でも「どんなところを目指したいのよ」と考えると、、

・意外な視点で物事を冷静に分析した記事
・クールでスタイリッシュな技術関係ネタを連発
・ためになる記事

みたいなのを目指したいんでしょう。たぶんきっと。。

補色で引き立たせてみる

ちょっと全体的に暗く沈み込んだイメージがあるので（ゴチャゴチャしてないので悪くないけど）補色を使ってキーカラーを引き立たせたいですね。ブルーの補色はオレンジですか。

補色（ほしょく、英: complementary color[1]）とは、色相環 (color circle) で正反対に位置する関係の色の組合せ。例えば、「赤 / 緑」「橙 / 青」「黄 / 紫」など（これはCMYKの場合）、相補的な色のことでもある。
（Wikipedia「補色」より）

この辺りのチョイスはデザイナーじゃないのでハードル高いなーと尻込みしてます。

作る前に決めなさいよ

本当は作る前に決めなきゃなんですよね。でも、なんとなく作りながら固められるのが個人でやる楽しさ。というか勢いで作りはじめないと … なかなか重い腰が上がらない。

とはいえ行き当たりばったりにならない程度に考えておくことは必要ですね。

ということで、少しずーつデザインを変えながら内容もスタイリッシュなブログを目指します … 当分無理そうですが。

WordPress, ブログ

ソーシャルボタンの余白を取り除く

2012年3月8日

ブログなどにソーシャルボタンを配置すると、右側の余白が気になることありませんか？こんな感じで。

結構有名な会社とかメディアでもズレたままになってたりしますよね。

なんとかしたい

なんとか揃えたいなーと思って考えてみました。

ボタンのカウントを取得できれば、その桁数に応じて幅を調整してやれば（環境によって異なるので厳密にはアレですが）ざっくり大丈夫かなーと。

とはいえ … 細かいところはサンデープログラマなのでご容赦ください。

TwitterやFacebookボタンのカウントを取得する

こちらの記事「ソーシャルボタン系のカウント数をPHPで取得して表示する」を参考に（ありがとうございます！）カウントを取得してみます。

/*
 * Get Social Button Count
 * facebook twitter hatena
 */
function get_social_counts($url){
    $counts = array();

    //encode url
    $encode_url = urlencode($url);

    //facebook likecount
    $likecount          = file_get_contents('http://graph.facebook.com/' . $encode_url, true);
    $decode_likecount   = json_decode($likecount, true);
    $facebook_likecount = ($decode_likecount[shares])? $decode_likecount[shares] : 0;

    //twitter tweetcount
    $tweetcount         = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $encode_url, true);
    $decode_tweetcount  = json_decode($tweetcount, true);
    $twitter_tweetcount = $decode_tweetcount['count'];

    //hatena bookmarkcount
    $bookmarkcount        = file_get_contents('http://api.b.st-hatena.com/entry.count?url=' . $encode_url, true);
    if(empty($bookmarkcount)){ $bookmarkcount = "0"; }
    $hatena_bookmarkcount = $bookmarkcount;

    //set array
    $count['facebook'] = $facebook_likecount;
    $count['twitter']  = $twitter_tweetcount;
    $count['hatena']   = $hatena_bookmarkcount;

    return $count;
}

引用：ソーシャルボタン系のカウント数をPHPで取得して表示する

カウントに応じて幅を決める

で取得したカウントを元に幅を決めていきます。

Facebookボタンが「0桁 = 70px、1桁 = 100px、 10桁 = 100px、 1,000桁 = 105px」ぐらい。

Twitterボタンが「0桁 = 88px、1桁 = 93px、 10桁 = 98px、 1,000桁 = 108px」ぐらいなので、ざっくりと設定。

function get_social_width($count){

	$width = array();

	if ($count['facebook'] == 0) {
		$facebook_width = 70;
	} elseif ($count['facebook'] > 0) {
		$facebook_width = 100;
	} elseif ($count['facebook'] > 99) {
		$facebook_width = 100;
	} elseif ($count['facebook'] > 999) {
		$facebook_width = 115;
	}

	if ($count['twitter'] == 0) {
		$twitter_width = 88;
	} elseif ($count['twitter'] > 0) {
		$twitter_width = 93;
	} elseif ($count['twitter'] > 99) {
		$twitter_width = 98;
	} elseif ($count['twitter'] > 999) {
		$twitter_width = 108;
	}

    //set array
    $width['facebook'] = $facebook_width;
    $width['twitter']  = $twitter_width;

    return $width;

}

これらの幅を各ボタンに指定してやればOKです。

でも問題がある

途中で気付いたんですが「ボタンを押した直後」にすぐ反映されないんですよね。なので桁が上がるタイミングでボタンを押しても幅が狭いままになってる。。

初回表示時は整ったので（とりあえず）良しとしますが、この点を解決する課題が残りました。

WordPress

スマートフォンでアクセスしたときに切り替える

2012年3月7日

このブログにアクセスすると右側に「Follow me」バッヂが表示されるのですが、スマートフォンでアクセスした際に少し邪魔だな … と気になっていました。

・WordPressで作ってるので使い回したい
・UserAgent の判別だけで良しとする

ということで、こちらの記事「Web サイトのスマートフォン最適化: UA 判別篇」を参考に function.php に関数を用意して判定することにしました。とても参考になりました、ありがとうございます！

参考記事でも触れられてますがUA 判別のために文字列でリストを作るってのは、なんだかスマートじゃないですよね。。

WordPress

WordPressで現在の投稿数を出すようにしてみた

2012年3月5日

500記事書くことにしたので、こちらの記事「 WordPressをちょちょいと使いやすくする15のスニペット 」を参考に … 現在の投稿数をサイドバーに出すようにしてみました。

sushi-paku webさんがサイドバーに投稿数を表示していて「あれいいなー」と思ってたんです。なので素早く実装してみました。

WordPress

はてブ twitter facebook のボタンを設置

2011年2月17日

今まで他のブックマークサービスのボタンを付けていたのですが、そろそろ見直しするかということで ・・・ はてなブックマーク、twitter、facebookのボタンを設置してみました。

以下、ざっくりとした設置方法です。コードを取得してWordpressのテーマに貼り付けているだけです。

はてなブックマークのボタン設置

以下サイトで設定
http://b.hatena.ne.jp/guide/bbutton

コード例

個別記事に設置するので <?php the_permalink(); ?> で指定。

twitterのボタン設置

以下サイトで設定
http://twitter.com/goodies/tweetbutton

コード例

これは個別記事のURLを持ってきてくれるので指定なし。「data-via」に入れたアカウント宛のメンションとなります。

facebookのボタン設置

以下サイトで設定
http://developers.facebook.com/docs/reference/plugins/like/

コード例

こちらも、個別記事に設置するので <?php the_permalink(); ?> 。

Webサービス, WordPress

改行タグ (br) を削除したい

2011年1月27日

ブログの修正をしてて、どうしても 「<br />」を削除したかったんです。正規表現がいまいち分からないので苦戦していたのですが、なんとか削除成功したのでメモ。教えてくれた人ありがとう！

$hogehoge = preg_replace( ‘/<br(\s+\/)?>/i’, ”, $hogehoge );

「<br>」 であれば、なんとなく削除できたんですが 「<br />」 の場合、どうしたものかと悩んでました。

WordPress

Pressmark と tumblr と情報を貯める場所

2010年12月3日

MOONGIFTさんを真似てPressmarkを使いソーシャルブックマーク風のメモ「技術関係メモ」を続けています。

→ WordPressをソーシャルブックマーク風に「Pressmark」

こんな噂「WordPress、クリスマス前にTumblrのレイアウトを採用か」もあるので、少しずつTumblrから移行してもいいかなと考えています。

情報を貯める場所 (2010年12月版)

iPadのReaderでGoogleリーダーに登録したフィードを読むところがスタート。

（重要度高い→低い）

・手帳
・Evernote
・Read It Later
・技術関係メモ
・tumblr

本当に大切なことは手帳に書いて、それを補助するEvernote。あとでじっくり読みたいものはRead It Laterに飛ばしてiPadで読みます。あとで読むかどうかわからないものは技術関係メモに。少し気になるレベルのものはtumblrにどんどん投げ込みます。

ここにFacebookの「いいね！」が増えてきているので、どこに貯めていこうか少し悩んでいます。

Webサービス, WordPress, アイデア・ネタ
« Previous Entries



目指せ500記事

現在 265 記事

三鷹タカハシ
テクノポップユニット三鷹の曲つくらない担当。


三鷹サンプラー


タカハシシステム 技術関係ブログ © 2012