東京都足立区のホームページ制作会社ならicreative（アイ・クリエイティブ）

この前ツイッターでもつぶやいてた紅茶の福袋が来たので

ちょっと嬉しいのでブログに書いてみますｗ

内容物の詳細はこちらで見てください＾＾
ミツティ 紅茶福袋

こんな感じで佐川さんから受け取りました＾＾

袋から取り出してみると結構コンパクトにぎっしりつまってました！

うひょ！いっぱいあるなー。
右下の色の違う袋のやつは
おまけ？の紅茶みたいです＾＾
※レビューを書くと貰えるらしいです！

これが入ってるもの全てです！！！
これだけあったらどんだけ紅茶飲めるんだよって感じですｗｗｗ

こんなかわいらしい、「おうちカフェ」のレシピ？なんかもはいってました＾＾
いいね、こういったちょっとしたものって意外と嬉しいです。

実はミツティさんのこの福袋を買うのは2回目なのです！
以前買った時に紅茶の入れ物も一緒に買ったのです！
これ結構お勧めなので一緒に紹介しておきます。

シンプルな感じが結構気に入ってます＾＾

ティーキャニスター

これから紅茶三昧になりそうです！
いろんな種類を楽しめていっぱい量がはいってておすすめですよ＾＾

あっと、最後にいっておきます。
ミツティの回し者ではないですｗ

2011年12月15日 23:32 | カテゴリー：雑記 | コメント（0）

銀行や自治体のサイトでよく見かける「文字サイズ」変更ボタンについて少し書こうと思います。

基本的にはブラウザの「表示」から文字サイズの変更や拡大・縮小をすれば、
文字サイズを変更する事は可能ですが、
もっと手軽にサイト自体にそのボタンがあればいいよねっていう考え方です。
うん、実にユーザビリティに配慮している感じでいいですよね。

では実際に「文字サイズ」変更ボタンの設置方法を紹介します。

いろいろと方法はあるのですが今回は「textresizer.js」を使ってみます。
これは「jQuery」のプラグインなのですが、とても簡単に実装できます。

jQuery Text Resizer Plugin

上記のリンクからファイル一式をダウンロードします。
zipファイルを解凍して、以下のファイルを使います。

jquery.js
jquery.textresizer.js
jquery.cookie.js

「jquery.textresizer.js」のファイルが文字の大きさを変更するファイルになります。
「jquery.cookie.js」はその変更した設定のcookieを作成するというファイルです。

cookieを作成することにより、
他のページに移動したり、
画面を一旦閉じて再度サイトに訪れた時に
初期設定の文字の大きさに戻らずに、
以前設定した文字の大きさになるという仕組みです。

文字サイズ変更ボタン設置サンプル

htmlファイルの記述

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.cookie.js"></script>
<script type="text/javascript" src="./js/jquery.textresizer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".textresizer a").textresizer({
target: "#container"
});
});
</script>

7行目の「target: "#container"」は文字のサイズを変更する箇所を指定します。

ボタン箇所の記述

<div class="textresizer">文字サイズ<span> | <a href="#">小</a> | <a href="#">中</a> | <a href="#">大</a> | </span></div>

クラス：textresizer で囲われた aタグがキーになります。
htmlファイルの記述の6行目「jQuery(".textresizer a")」の箇所でそのキーは変更可能です。

注意点

文字の指定は「px」ではなく、「em」などの相対的単位で記述するようにしてください。
それでないと上手く動作しません。

文字サイズ変更ボタン設置サンプル

2011年12月14日 19:51 | カテゴリー：jQuery | コメント（0）

サイドメニューの各タイトルタグを変更したかったので少し調べてみました。

/wp-includes/widgets.php
もしくは、
/wp-includes/default-widgets.php

上記ファイルの以下の場所を編集すれば変更可能です。

function register_sidebar($args = array()) {
global $wp_registered_sidebars;

$i = count($wp_registered_sidebars) + 1;

$defaults = array(
'name' => sprintf(__('Sidebar %d'), $i ),
'id' => "sidebar-$i",
'description' => '',
'before_widget' => '<li id="%1$s">',
'after_widget' => "</li>\n",
'before_title' => '<h2>',
'after_title' => "</h2>\n",
);

$sidebar = wp_parse_args( $args, $defaults );

$wp_registered_sidebars[$sidebar['id']] = $sidebar;

add_theme_support('widgets');

do_action( 'register_sidebar', $sidebar );

return $sidebar['id'];
}

ひょっとすると他にもいい方法があるのかもしれませんが。。。

2011年12月13日 17:29 | カテゴリー：WordPress | コメント（0）