デザイン Archive

jQueryでページ内リンクをスムーズにスクロールさせてみました。
「このページのトップへ」みたいなリンクをクリックすると、スルスルスル～っと動く感じですね。

今回、こちらのサイトを参考にさせて頂きました。
jQueryでページ内スムーズスクロール – 1：n – DETELU Blog

使うのはjQueryとjQuery Easing Plugin。

追加するjavascriptは以下。

$(function() {
　$('a[href*=#]').click(function() {
　　　if (location.pathname.replace(/^\//,'') ==
this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
　　　var target = $(this.hash);
　　　target = target.length && target;
　　　if (target.length) {
　　　　var sclpos = 30;
　　　　var scldurat = 1000;
　　　　var targetOffset = target.offset().top - sclpos;
　　　　$('html,body')
　　　　.animate({scrollTop: targetOffset}, {duration: scldurat, easing: "easeOutExpo"});
　　　　return false;
　　　　}
　　　}
　});
});

これをscroll.jsとかにして保存。
次にmetaタグ部分に以下を追加。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>

HTML部分。

<div id="wrapper">
・・・中略・・・
<a href="#wrapper">このページのトップへ</a>

サンプルページ

40歳になったNiCkoです(´ー｀)
若い頃は考えられなかったけど、40代もいいもんですね。
なんだかワクワクしております（笑）

さて、最近はプライベートな日記はmixiのほうに書いております。
こちらは犬関係か仕事関係の覚え書き中心になると思います。

というわけで。

タイトルにあるようにあるサイトでパンくずを書いていたんですが、なぜかIE7だけ消えるんです。
divタグでくくると消えます。なのでspanタグでくくっていたんですが、すると今度はIE8とOperaでレイアウトが崩れます。。

なぜなのか、原因不明。。droppyでプルダウンメニューを使ってるからかなぁ
仕方ないので、IE7以外のモダンブラウザ向けにdisplay:block;とcssで指定しました。
詳細は以下。

#pankuzu {
	padding: 0;
	margin: 0 15px;
	display: inline;
}
/* IE7以外モダンブラウザ用ハック */
html>/**/body #pankuzu {
	display: block;
}

これでいちおう解決しましたが、なんだかなぁ。

無印良品の動画サイト「play MUJI」がスタート(Fashionsnap.com)

２００９年１月１日、無印良品の「なるほど」を世界に発信する動画サイト「play MUJI」の配信がスタートした。

（中略）

「play MUJI」では、１日１商品をカレンダー形式で毎日紹介。各商品の「なるほど」が実感できる特徴や使い方を、言葉を超えたコミュニケーションである「動画」を用いて配信することで、全世界の人びとが直感的に理解し、共有できる内容となっている。また、内容はスクリーンセーバーとしてダウンロードすることも可能だ。

動画を観てみましたが、シンプルでキレイな動画でした。
音声やテキストは無く、ＢＧＭのみですが、いい感じですね。

カレンダー形式ということで、先の日付の動画は観られません。
試みとしておもしろいと思いますにゃ

おいらは昨年暮れ、DELFONICSのスケジュール帳を買ってきました。
まだマッサラですが、売れっ子になって真っ黒にしてやるぞ～
などとはサラサラ思ってませんが何か(´・ω・｀)

検索フォームで「Search」とかって文字をクリックしたら消えるjavascript

<input type=”search” value=”Search” onfocus=”if (this.value == ‘Search’) { this.value=” }” onblur=”if (this.value == ”) { this.value=’Search’ }” />

⇒サンプル

よく忘れるんだよな、最近(´・ω・｀)

写真屋さんのオンライン版（ベータ）が公開されたっていうので、アカウントを作ってみたんだけど、（確認の）メールが来ない。。。
リンクした記事にも書いてありますが、やっぱ日本からだと遅いみたいですね :sad:
アカウント作れないってことではないよね？
気長に待ってみますか。。

Adobe Photoshop Express

Adobe、無料のオンライン版Photoshopをβ公開

SaaS版Photoshopがついに公開、早速使ってみた

写真屋のエレメンツ程度の機能しかないみたいだけど、オンラインでしかも無料で使えるのって凄いなー :shock:

ヘッダ画像（H1タグで指定した部分）を背景から普通にIMGタグに変えました。
今までrotate.phpを使ってランダムに背景を変えていたんだけど（と言っても2枚しか用意してなかった）、読み込みがおかしいので普通にjavascriptで画像を切り替えるようにしました。

で、そのままだとつまんないので、reflection.jsを使って、どこかで見たサイトのように鏡面反射っぽくしてみました。

reflection.js(V1.9)ダウンロード

FTPでreflection.jsをアップロードして、ヘッダに次のように指定。

<script type=”text/javascript” src=”<?php bloginfo(’url’); ?>/reflection.js”></script>

これはWordPress向けの指定ですが。。（パスの指定）
そしてIMGタグに次のclassを指定します。

class=”reflect rheight18 ropacity40″

rheightは反射部分の高さ、ropacityは不透明度です。
このようにすると、いちいちPhotoshopなんかで反射部分を作らなくても任意の画像に対して適用することができます。便利ですねー :smile:


reflection.jsとは関係ないのですが、記事の日付をちょっと変えてみました。
日めくりカレンダーっぽい（よく海外のブログなどで見かけます）のにしてみたのですが～2月3月って月表示を英語（Feb、Mar）にしようとしたら、何故だか5月だけ日本語で変わらず表示されてしまいました。
なので一部だけ日本語なのもかっこ悪いので、日本語表示に戻しました
locale.phpをいじっただけじゃダメなのかなー（＞＜）
時間ができたら、もっかい挑戦してみようと思います。
なんだかこういう部分がMovableTypeとは違って少しやりにくいなー（ ´Д⊂ヽ

最近、EC-CUBE＋新着商品というキーワードでのアクセスが多いので、ちょっと自分の覚え書の為にも残しておきます。
なお、私はPHPプログラマーではないので、ツッコミどころ満載かもしれません。。
少しでもお役に立てば幸いです。
ちなみにEC-CUBE1.34、PHP5.2.3、PostgreSQL8.2.4という環境です。

まず最初に管理画面から、新規ブロックをnew-item.tplなどと作っておくといいでしょう。

次にnew-item.phpを作ります。

<?php
/*
 * Copyright(c) 2000-2007 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 */
class LC_NewitemPage {
	function LC_NewitemPage() {
		/** 必ず変更する **/
		$this->tpl_mainpage = BLOC_PATH . 'new-item.tpl';	// メイン
	}
}

$objSubPage = new LC_NewitemPage();
$objSubView = new SC_SiteView();

//新着商品表示
$objSubPage->arrProducts = lfGetNewItem();

$objSubView->assignobj($objSubPage);
$objSubView->display($objSubPage->tpl_mainpage);

//-----------------------------------------------------------------------------------------------------------------------------------
//新着商品検索
function lfGetNewItem(){
	$conn = new SC_DBConn();
	$sql = "SELECT name,main_list_image,product_id,main_list_comment FROM dtb_products WHERE status = '1' ORDER BY create_date DESC OFFSET 0 LIMIT 12";
	$list_data = $conn->getAll($sql);
	return $list_data;
}

?>

要するにデータベースからSELECT文で持ってきてるだけなんですが。。
（MySQLの場合はLIMITの辺り、書き換えないとダメかも？）
new-item.phpとして保存し、frontparts/bloc/以下にアップロード。

次にテンプレートファイル（new-item.tpl）を編集します。

<!--{*
* Copyright(c) 2000-2007 LOCKON CO.,LTD. All Rights Reserved.
*
* http://www.lockon.co.jp/
*}-->
<div>
<h2>NEW ITEM</h2>
<!--{section name=cnt loop=$arrProducts max=12}-->
<!--{assign var=id value=$arrProducts[cnt].product_id}-->
<!--{assign var=name value="detail`$smarty.section.cnt.iteration`"}-->
<!--商品-->
<div class="section"><a name="product<!--{$id}-->" id="product<!--{$id}-->"></a>
<p class="goodsInfo"><!--{$arrProducts[cnt].main_list_comment|escape|nl2br}--></p>
<h3 class="goodsName"><a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[cnt].product_id}-->" class="over"><!--{$arrProducts[cnt].name|escape}--></a></h3>
<div class="goodsPhoto"><a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[cnt].product_id}-->"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}--/>/<!--{$arrProducts[cnt].main_list_image}-->" alt="<!--{$arrProducts[cnt].name|escape}-->" /></a></div>
</div>
<!--商品終わり-->

<!--{/section}-->
<br class="separate" />
</div>

テンプレートはいろんな書き方があると思うのですが、↑のようなのでもいちおう動いてます。
（商品を削除した時はうまく消えません。。。）

最後に、データベースにログインしてnew-item.tplとnew-item.phpを関連付けます。
これをしないと動きません。