コンテンツをスクロールして出す サンプル

内容としては以下の画像のとおりです。

左の状態が元の状態です。
CSSの初期設定として、
「slide_area02」「slide_area03」「slide_area04」は
CSSの「display:none;」で非表示状態にしています。

「ボタン02」のリンクをクリックする事で、
「slide_area02」はスライドさせて表示させます。
「slide_area01」「slide_area03」「slide_area04」は
CSSの「display:none;」で非表示にします。

以下は、それを実行する為のファイル「slide.js」です。

$(function(){
$(".slide_btn01 a").click(function(){
$("#slide_area01").slideToggle("slow");
$("#slide_area02").css("display","none");
$("#slide_area03").css("display","none");
$("#slide_area04").css("display","none");
});

$(".slide_btn02 a").click(function(){
$("#slide_area02").slideToggle("slow");
$("#slide_area01").css("display","none");
$("#slide_area03").css("display","none");
$("#slide_area04").css("display","none");
});

$(".slide_btn03 a").click(function(){
$("#slide_area03").slideToggle("slow");
$("#slide_area01").css("display","none");
$("#slide_area02").css("display","none");
$("#slide_area04").css("display","none");
});

$(".slide_btn04 a").click(function(){
$("#slide_area04").slideToggle("slow");
$("#slide_area01").css("display","none");
$("#slide_area02").css("display","none");
$("#slide_area03").css("display","none");
});
});

以下は、「slide_btn02」のクラスの「a」タグがクリックされた時の処理を行う為の記述です。

$(".slide_btn02 a").click(function(){

 
以下は「slide_area02」をスライドさせて表示させる為の記述です。

$("#slide_area02").slideToggle("slow");

以下は「slide_area01」を非表示させる為の記述です。

$("#slide_area01").css("display","none");

今回は、コンテンツを表示非表示としましたが、
応用として、メニューのリストなどいろいろな箇所に使えるかと思います。

少し時間が出来ればもう少し実用的なサンプルをつくることが出来ればと考えています。

コンテンツをスクロールして出す サンプル

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

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

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

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

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

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

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

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

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

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

ティーキャニスター

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

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

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

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

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

いろいろと方法はあるのですが今回は「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」などの相対的単位で記述するようにしてください。
それでないと上手く動作しません。

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

/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'];
}

ひょっとすると他にもいい方法があるのかもしれませんが。。。 ]]> http://www.icreative.jp/blog/archives/224/feed 0 http://www.icreative.jp/blog/archives/192 http://www.icreative.jp/blog/archives/192#comments Wed, 23 Nov 2011 09:04:12 +0000 hisato http://www.icreative.jp/blog/?p=192 ソースコードをブログ上で公開したい時に便利なプラグイン
「SyntaxHighlighter Evolved」を紹介します。
もちろん、WordPress の話です。

プラグインの新規追加で「SyntaxHighlighter Evolved」を検索してインストールします。
その後、プラグインを有効化します。
これで準備完了です！

プラグインの設定は初期設定で問題ないですが、
必要であれば設定してください。
ソースの表示デザインを変更したりできます。

実際に記事を投稿する書き方は、

他にも記述できる言語は多数あるようです。
例）
—————————————————–

—————————————————–
といった具合に書きます。
実際に表示すると、以下になります。

<h1>テスト</h1><br />
<p><a href="#">aaa</a></p>

導入についての注意点ですが、
<?php wp_head(); ?>
<?php wp_header(); ?>
の記述がないと動かないみたいです。
その個所にソースを吐き出す記述がされるようです。
導入したのに、何か上手く表示されないなという時は そのあたりを確認することをお勧めします。

以上、「SyntaxHighlighter Evolved」の紹介でした。

/wp-includes/default-constants.php

ファイルの最後の行にある、

if ( !defined(‘WP_DEFAULT_THEME’) )
define( ‘WP_DEFAULT_THEME’, ‘○○○○○○○○’ );

「○○○○○○○○」こちらを変更することで可能です。
buddypressのプラグインを入れた場合に
ユーザーがサイト新規作成する場合に
指定したテンプレートを使わせたい場合などに
設定するといいかもしれません。

ほうれん草にベーコンを入れるとさらにおいしいのです。
あと、ニンニクはフードプロセッサーでみじん切りにしたのを
小分けにして冷凍しておくととっても便利です！
あと、ベーコンも同じように冷凍しておくといいです。

ベーコンの塩味がまたおいしさを倍増します＾＾

写真も撮ったのでアップですｗ

おいしそう・・・・ですよね？ｗ
ほうれん草の緑もいい感じです。

パスタをアップで撮影ｗ

ペペロンチーノにはやっぱり白ワインが合います！
ワインもおいしいです。

美味しくいただきました＾＾

家でもよくラーメン食べてます。
という事で、ラーメン食べたのでブログ書きますｗ

はい、今回は斑鳩です！

９年前くらいかな？
飯田橋で仕事をしていた時期があり、
その職場から、5分くらいのところに斑鳩がありました！

正直始め食べた時は、変わった味だなって。。。
でも２回３回って食べるともう病み付きになりましたねｗ

その頃はまだ行列とかできてなくて
スグに席に座れてたので、本当ヘビーローテーションで
食べに行ってました＾＾

その頃は、魚介系ラーメンっていうジャンル知らなかったのですが
斑鳩で魚介系ラーメンってのを知り、これはおいしい！とおもい、
水道橋に青葉もあったので、そっちにも足を運んだ記憶がよみがえります＾＾

一般的に魚介系ラーメンの元祖は青葉って事なんですよねー。
おっと、ラーメンっていわずに中華そばっていわないといけないかな（＾＾；

はなしが結構ずれてしまったｗｗ

まあそんな思い出がある斑鳩を食してみました。

うむ、パッケージからは和的な感じが！
やっぱり、斑鳩は蒼？紺？的なイメージですね。

中身はこんな感じ。
液体スープと、粉末スープ！
この粉末が魚介系の和風感をだしているのかな？

シンプルに具なしで！ｗ
まろやかな感じが出てるかも！？

麺のアップです！
右手に箸、左手にカメラで写真撮るの難しかったですｗ
でも美味しく撮れてるかな？＾＾

さて、実際にたべてみてですが。。。

うん、おいしいですね！
和風味も効いていて、後味とかもとてもいい感じです。
ただ、やっぱりお店で食べたのとはちょっと違うかな。
それはあたりまえなのですけどねｗ

一口目、ちょっと酸味が強いかなってイメージですね。
まあ、食べ進めていくうちにいいバランスになり、
気にならなくなっていきますね。

あとお店で食べた時は、もっと和風味であっさりしていた気がします。
豚骨ってイメージさせないくらいの。

でも、この味を家で食べることが出来てさらにこのコスト！
いやー、ほんとう日清さんすごいですね。

大変満足です。

たまにはこんな記事もいいですよね？ｗ
またおいしいラーメンをレビューしたいと思います＾＾

XAMPP（ザンプ）ってなに？って人は以下をご参照ください。
XAMPP – Wikipedia

では早速いきます！

ますはXAMPPをダウンロードする為にサイトへ！

http://www.apachefriends.org/jp/xampp-windows.html

現時点での最新版は、XAMPP 1.7.4 です。

ダウンロードの「XAMPP」をクリック

インストーラーをクリックして、ファイルをダウンロードします。

Ｃドライブがいっぱいだったので、
今回はＤドライブ直下にインストールしてみました。

とりあえず、デフォルトのままインストール。

なんだか、エラーがでてるけど。。。
「ERROR: Status Check Failur」はwindows7の64bit版でインストールすると出る有名なエラーだそうな。。。
とりあえず無視でｗ

「Apache」「MySql」のスタートボタンを押してみましょう。
問題なければ下のように起動するのですが。。。

さて、ここからは上記で起動しなかった場合の対処法です。
まずXAMPPを管理者権限で実行できるようにしてみましょう。

方法は以下です。

ショートカットアイコンを右クリックで、プロパティを開きます。

「互換性」 のタブを選択して、特権レベルの「管理者としてこのプログラムを実行する」にチェックを入れます。
いかがでしょうか？
よくはわかりませんが、これで起動される場合があるようですね。

まだ駄目という事であれば、以下もお試しください。
XAMPP（Apache?）はport:80を使っているらしく、既に他のサービスが80で動いている場合
そのあたりを改善しなければいけません。

Skypeで80を使っていたという事がよくあるみたいですね。
私もそうでした。
ですので、Skypeのポートの変更の仕方を記載しておきます。

Skypeの「ツール」→「設定」→「詳細」→「接続」
「上記のポートに代わり、ポート80を使用」のチェックを外します。
これで再起動してください。

問題なければ、

「Apache」「MySql」のスタートボタンを押せば起動するはずです。

http://localhost/xampp/

にアクセスして以下の画面が表示されるか試してください。

ペンタブレットといえばWacomですよねー。
本当は、Intuosシリーズを購入しようと思っていたのですが、
まずはBambooシリーズで！＾＾

アマゾンで購入しました。
Wacom ペンタブレット Sサイズ シンプルタブレット 描き心地にこだわった筆圧1024レベル Wacom Bamboo Pen CTL-460/K0

こんな感じで来ました！

しっかりとした梱包ですね！

入っている物は、タブレット本体、ペン、替え芯（3）、インストールディスク
あと、芯を抜く為の輪っか状の芯抜きです。

Windows7 64bit ですが、
USB端子に接続すると、勝手にインストールされて使えるようになりました。
いろいろ、細かく設定をしたければインストールディスクを使って
それ用のプログラムをインストールすればＯＫです！

操作範囲をデュアルモニタの片方だけにしたり、ペンのキーの設定を変えたり
他にもいろいろ設定が出来ます！

机やキーボードを黒で統一しているので、なかなかいい感じですｗ

せっかくなので、試し描きですｗ
Photoshopのブラシ機能で描いてみました。

タブレットが小さいから描きにくいかなーって思っていましたが、
思った以上に描きやすかなー。
あと、小さいので置き場所にもあまり困らないかな。
ただ、絵のセンスがないのはしょうがないですねｗｗ
素敵なイラストを描けるように練習あるのみですｗ