webアレコレ

テスト投稿

Sun, 21 Feb 2010 02:39:18 +0900

テスト投稿。

Word Pressを使ってサイト作成してみました。

Tue, 28 Jul 2009 09:48:36 +0900

Word Pressの勉強がてら、新しくサイトを作成しました。 http://wqce.netkatuyou.com/ Word Pressの構造、テーマの作成等とまどった部分がありましたが、なんとか思ったとおりのモノが作れたかなあ、と思います。ブログの内容がちょっと当ブログとかぶる部分があるので、統合を含めてちょっと検討中です。

シンプルなアコーディオンパネル「Simple Toggle」

Thu, 25 Jun 2009 13:47:20 +0900

シンプルなアコーディオンパネル「Simple Toggle」をご紹介。

Simple Toggle with CSS & jQuery

まずHTMLは以下のようになります。

Toggle Header

	
		Content Header

そしてCSS。

h2.trigger {
	padding: 0 0 0 50px;
	margin: 0 0 5px 0;
	background: url(h2_trigger_a.gif) no-repeat;
	height: 46px;
	line-height: 46px;
	width: 450px;
	font-size: 2em;
	font-weight: normal;
	float: left;
}
h2.trigger a {
	color: #fff;
	text-decoration: none;
	display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
	margin: 0 0 5px;
	padding: 0;
	border-top: 1px solid #d6d6d6;
	background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
	overflow: hidden;
	font-size: 1.2em;
	width: 500px;
	clear: both;
}
.toggle_container .block {
	padding: 20px; /*--Padding of Container--*/
	background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}

CSSは記述がちょっと長いので、
実際に使用する場合は、外部CSSとして読み込むと良いと思います。
そしてjQueryを使用するので当然以下のようにjQueryを読み込み、

そして下記スクリプトをhead内に記述します。

$(document).ready(function(){

	//Hide (Collapse) the toggle containers on load
	$(".toggle_container").hide(); 

	//Switch the "Open" and "Close" state per click
	$("h2.trigger").toggle(function(){
		$(this).addClass("active");
		}, function () {
		$(this).removeClass("active");
	});

	//Slide up and down on click
	$("h2.trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow");
	});

})

サンプルが公開されており以下URLより確認できます。

http://www.sohtanaka.com/web-design/examples/toggle/

また少しCSSに手を加えてサンプルを作成してみたので、
こちらも参考にしていただけたらと思います。

Simple Toggleサンプル

CSSのborderで枠線をカスタマイズ。

Sat, 20 Jun 2009 10:25:31 +0900

CSSのborderプロパティを使用することで、枠線のデザインを工夫することができます。ではまずは実例を紹介。

枠線をCSSでカスタマイズ。
枠線をCSSでカスタマイズ。

borderプロパティでは、枠線のスタイル、太さ、色の指定ができます。
上記サンプルのCSSのコードは以下になります。(上から順に)

border:solid #888888 1px;
border:double #888888 4px;
border:dashed #FF0000 1px;
border:dotted #FF0000 1px;

なお、borderプロパティについてはHTMLクイックリファレンスさんの
border－スタイルシートリファレンス
のほか、多数のサイトで解説されているので、詳しくはそちらで確認してみてください。

web creators 7月号（2009）

Fri, 05 Jun 2009 11:29:28 +0900

恒例、web creatorsの最新号をチェック。

Web creators (ウェブクリエイターズ) 2009年 07月号 [雑誌]

posted with amazlet at 09.06.05

インプレスコミュニケーションズ

Amazon.co.jp で詳細を見る

今月号の特集は 「WEB制作トラブル速戦即決術！」 私も経験したことがあるトラブル事例もたくさんありました。時間が無く、緊急の時に今月号がとてもお役立ちだと思います。巻末特集は 「PCサイト制作の知識をフル活用するケータイWEB企画&デザイン手法」 PCサイトとケイタイサイトの違いが分かりやすく解説されています。ケイタイサイトを作る際のポイントや、Flash Liteについてなどなど、ケイタイサイトを作ろう！と言う方におススメの内容です。それから、今月号は「CSSプロパティデザインミニ辞典」が付属されています。小冊子で持ち運びにも便利なので、とても使える1冊だと思います。

Mac のドックメニュー風「CSS Dock Menu」

Tue, 02 Jun 2009 12:43:42 +0900

Macのドックメニューが再現できる「CSS Dock Menu」のご紹介。

CSS Dock Menu

使い方はまず上記サイトのDownload CSS Dock Menuから必要なファイルをダウンロード。
そしてhead部分に以下のファイルを読み込ませます。

そしてIE用のハックで




ここにテキスト
ここにテキスト
ここにテキスト




ここにテキスト
ここにテキスト
ここにテキスト

配置をカスタマイズする場合は、最初に読み込んでいるstyle.cssを編集します。
CSSでposition: relative;を使用したりしているので、
配置をカスタマイズする際は、少々CSSの知識が必要になるかと思います。
それと使用する画像についてですが、デモページでは128px×128pxで作成されています。
デモページのように、反射したような画像を作成するときれいに見れるかと思います。

Movable Type 4.24 にて脆弱性。

Sun, 03 May 2009 01:02:40 +0900

アナウンスから少し経ちましたが、Movable Type 4.24 にて脆弱性が見つかったそうです。 Movable Type 4.24 でのセキュリティ上の問題について

アプリケーション上の入力項目の一部において、適切に入力エスケープ処理されないため、
クロスサイトスクリプティングが発生しうる。

対処方法はMovable Type 4.25にアップグレードする、とのことです。それとアップグレード後、グローバルテンプレートの初期化が必要とのこと。なおグローバルテンプレートの初期化に関しては、バージョンが4.24のモノが対象だそうで、それ以外のバージョンは4.25にアップグレードするだけで良いそうです。

web creators 6月号（2009）

Fri, 01 May 2009 21:18:55 +0900

恒例、web creatorsのご紹介。

Web creators (ウェブクリエイターズ) 2009年 06月号 [雑誌]

posted with amazlet at 09.04.30

インプレスコミュニケーションズ

Amazon.co.jp で詳細を見る

今月号の特集は 卓越したWEBビジュアル表現のエッセンス ということでデザイン等で優れているサイトの実例をもとに、デザインの傾向、考え方などが紹介されていました。サイトのデザインを考える際に、とても参考になるかと思います。巻末特集は WEBデザインの賞&コンテストガイド2009 国内外のwebに関するアワードの概要、受賞作品などが紹介されています。個人的にはいくつか知っているアワードもありましたが、初めて名前を聞いたものの方が多かったです。これを機に、アワード等挑戦してみたいなあと思います。

サーバー移転時のMovable Typeの設定。

Thu, 30 Apr 2009 11:59:50 +0900

今回レンタルサーバーを移転するにあたって、行った作業をご紹介。
まずMTのバックアップでエクスポートの機能があるんですが、
テンプレート等のデータは引き継がれないようなので、
MySQLのデータのエクスポートを行いました。
なおMySQLのエクスポートに関してはHeartlogicさんの

MySQLのエクスポートでMovable Typeを引っ越しする方法

の記事が大変参考になりました。

移転先のレンタルサーバーでデータベースを作成し、
エクスポートしたデータを今度はインポートし、データベースに関しては完了。
そして移転前のMTのフォルダをローカルにコピーし、
それから移転先のサーバーにアップロード。
そして管理画面に入ろうとしたところ、ここでエラーが。
何で入れない？と原因を探っていたところ、
mt-config.cgiの設定を修正しなければならないと判明。

#======== REQUIRED SETTINGS ==========

CGIPath        ****
StaticWebPath  ****

#======== DATABASE SETTINGS ==========

ObjectDriver DBI::mysql
Database ****
DBUser ****
DBPassword ****
DBHost ****

パス、データベースの設定を移転先のサーバーの設定に合わせて修正。
そして管理画面にアクセスしたころ、エラーも出ず無事ログインできました。

以上今回行った作業となります。
mt-config.cgiの設定は意外と忘れやすい（自分だけかも＾＾；）
点だと思うので、サーバー移転の際にはぜひご注意を。

ロリポップからチカッパに移転しました。

Tue, 28 Apr 2009 20:59:55 +0900

このたび、レンタルサーバーをロリポップ！から、チカッパ！に移転しました。
移転した理由としては、

Movable Typeの再構築の時間が気になる
容量が足りなくなってきた
チカッパだとデータベースが2つ作れる
初期費用無料キャーンペーン中だった

といった点がありました。
1に関しては時間帯にもよると思うんですが、たまに再構築でエラーが出てたりしました。
2は追加で容量増やすことはできますが、どうせならこれを機に移転しようかなあと思い、
3と4の理由にて移転を決めました。
以前の記事でも書きましたが、word pressを使ってみたいなあと思い、
チカッパではデータベース2つ作成でき、MTとWP両方使えるのが決め手となりました。
ちょうどチカッパがキャンペーンやっていたのも大きかったです＾＾

チカッパを使ってみての印象ですが、
やはりMTの再構築に関してはロリポップよりは格段に早い感じでした。
容量も3GBまで使えるので、充分かなあと思います。

コード記載に便利な「SyntaxHighlighter」

Sat, 18 Apr 2009 11:29:47 +0900

前回の記事より、ソースコードを記載する際に便利なスクリプト

SyntaxHighlighter

を設置してみました。

以前まではHTML等のコードを記載する際に、 HTMLタグのpreタグで囲み、
<>の部分を表示するときに、<　>　という風に変換する必要があり、
とても手間がかかっていました。
そこでこのSyntaxHighlighterを使用すると、
簡単にソースコードを記載することができます。
まずファイルのダウンロードは

こちらから。 Downloads - syntaxhighlighter -

ファイルを解凍し、Scriptフォルダ、Stylesフォルダの中身をアップロードします。
そしてhead内には例えば以下のようにファイルを読み込みます。

syntaxhighlighter は色々な言語に対応していて、
XmlならshBrushXml.js、CSSならshBrushCss.jsのように
使用したい言語に応じてファイルを読み込ませます。
それともう一つhead内に、

とjava scriptを記述します。
そして実際にコードを記載するときは記載したいコードを、

とpreタグ、もしくはtextareaタグで囲み、
class=""の部分で記載するコードの言語を指定します。
XMLならclass="xml"、CSSならclass="css"のように指定します。
使い方としては以上になります。
なお、SyntaxHighlighterについてはこちらの

ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」｜caraldo.net | MT Blog

がとても分かりやすく、
カスタマイズについても書かれていますので、とても参考になるかと思います。

jQueryを使用した画像ギャラリー「Galleria」

Thu, 09 Apr 2009 09:30:09 +0900

jQueryを使用した画像ギャラリー「Galleria」をご紹介。

Galleria

画像ギャラリーを作る際、
通常は大きい画像と小さいサムネイル画像を用意する場合が多いと思いますが、
Galleriaを使うと自動的にサムネイル画像が生成されます。
ではサンプルページが公開されているのでそちらをご紹介。

Galleria Demo 01

Galleria Demo 02

使用方法ですが、
http://code.google.com/p/galleria/
より最新版の圧縮ファイルをダウンロードします。
圧縮ファイルを解凍後、下記のようにファイルを読み込みます。それから下記のようにjava scriptを記述します。
ちなみに

 
 $('ul.photo').galleria();

のphotoの部分はHTMLのulでつけたclass名と同じ名前を付けます。
では以下にHTMLの記述例を。簡易ですがサンプルページを作成しましたので、
そちらも参考していただけたらと思います。

Galleria サンプルページ

またカスタマイズに関しては、All Aboutの記事の

jQuery ギャラリープラグインGalleria

が参考になると思います。

web creators 5月号（2009）

Sat, 04 Apr 2009 12:11:58 +0900

月1回しか更新していない＾＾；ということでweb creatorsの最新号のご紹介。

Web creators (ウェブクリエイターズ) 2009年 05月号 [雑誌]

posted with amazlet at 09.04.04

インプレスコミュニケーションズ

Amazon.co.jp で詳細を見る

特集は WEBパーツ装飾デザイン辞典92 CSSを使っての装飾、 Fireworks・Photoshop・Illustratorなどを使用してのパーツ作成など、その装飾の「使いどころ」を含めて紹介されています。個人的に取り入れてみたいなあ、という装飾がたくさんありました。巻末特集は WEBクリエイターデータブック2009 制作環境や働き方、スキルの習得など、アンケートを基に様々データがグラフ化され、とても読み応えのある内容でした。これからWEB業界を目指す方は是非読んでおくべき内容だと思います。

web creators 4月号（2009）

Tue, 03 Mar 2009 09:55:41 +0900

毎月恒例、web creators最新号をチェック。

Web creators (ウェブクリエイターズ) 2009年 04月号 [雑誌]

posted with amazlet at 09.03.03

インプレスコミュニケーションズ

Amazon.co.jp で詳細を見る

今月号の特集は WEBディレクション&デザインにこだわる ということで名前の通り、デザイナーさんというより、 Webディレクターさん向けの内容かなあと感じました。ただ、デザイナーさんでディレクターを兼任する場合も多いと思うので、おろそかにしてはいけない部分だと思います。巻末特集は WEBクリエイター独立開業ガイダンス フリーランスで仕事をしたい、と考えている方は是非読んでおくべき内容だと思います。

web creators 3月号（2009）

Tue, 03 Feb 2009 22:57:19 +0900

恒例、web creatorsの最新号をチェック。

Web creators (ウェブクリエイターズ) 2009年 03月号 [雑誌]

posted with amazlet at 09.02.03

インプレスコミュニケーションズ

Amazon.co.jp で詳細を見る

特集は 「表現を多彩にするCSS実践アイデアファイル」 制作していて物足りない、一工夫加えたい、といったときにお役立ちの内容です。そして巻末特集の 「作業効率20%アップのDreamweaver徹底活用法」 はとても参考になりました。コーティング作業をするときはDreamweaberを使うことが多いんですが、意外と知らなかった機能がたくさん。例えば仮の画像を置いてコーティングしたいときに、 「イメージプレースホルダー」という機能で、仮の画像が作成できます。他にも効率アップできる方法がたくさん紹介されているので、 Dreamweaverを使用している方にはおススメの特集です。