【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

29Jan2012

メニューボタンを作りなおしてサイト高速化[CSS sprite]

今回はCSS spriteと呼ばれる手法で、トップメニューを作ってみます。

CSS spriteとは、複数の画像パーツを一つの画像として読み込みCSSで表示位置を調節する手法です。

言葉だと意味不明なので、実例を紹介しましょう!

現在(2012.01)、PetitCottageのトップメニューはCSS spriteで製作しています。
CSS sprite

CSSのみで動きを制御している一般的なメニューボタンですが、使用している画像は以下の1枚だけです。

CSS spriteの作り方と使い方

この記事を読む

12Nov2011

超簡単に開閉式リストができるjQueryライブラリ

先月依頼されて作成したwebサイトがあるのですが、クライアントから「リストを開閉式にしたい」という要望を頂きました。

「はーい。やっときますね^^」 と軽い感じで返事して気づく。

・・・開閉式リスト作ったことないっ!!

そのサイトにはすでにjQueryを使っていたので、慌ててアコーディオンリストのjQueryを調べる事数十分。。。

今回ご紹介するライブラリ(というかjqueryスクリプト)は、ものすごいシンプルな上に、ものすごい良い感じの動きをして、ものすごい汎用性が高い!!

是非チェックしてみてください^^

この記事を読む

10Nov2011

マイナーなCSSプロパティをリストにしてみました

今日は仕事がお休みだったので、大好きな本屋で情報収集(ブラブラ)していました。
仕事柄やはり気になるPC書籍コーナーで普段は触らないCSSのリファレンスを手にとって見てみると、今まで一度も使ったことのないプロパティがいくつかある事に気づきます^^;

そんなに多くないCSSプロパティ。一度も使ったことがないのはイカン!という事で、自分の勉強もかねて「これはマイナー・・・」と思うプロパティをリストにしてみました。今後も使うかはわからないけど、お勉強お勉強。。。 笑

みなさんは全部使ったことがありますか?

この記事を読む

4Nov2011

ヌルッとページ内リンクをスクロールさせるライブラリ

ページ内リンク

ネットショップでは目的の商品を探しやすくする為に、ページ内リンクを使う場面が多いと思います。

ページ内リンクは便利ですが、一瞬どこへ移動したのか見失ってしまうのが欠点ですよね^^;

今日ご紹介するJavaScriptライブラリを使えば、リンク先に移動する際にスマートフォンのように「ヌルッ」とスクロールさせる事ができます。

smoothScroll.js

こちらのサイトで配布されています。
to-R

サーバーの任意の場所にダウンロードして、使いたいページのhead内で外部ファイルとして呼び込めば準備完了です。

このライブラリはとても軽くて信頼性が高く、HTML5にも対応しています。

最も優れた所は

既存のハッシュタグ(#)付きページ内リンクに適用される

という点。

各リンクに個別にタグを書き加える必要はありません。

適用させたくない箇所には

smoothScroll.jsを適用させたくないリンクには、以下のように一言だけ付け加えます。

html5でコーディングしている場合

スムーズなし

html5以外

JavaScriptファイルの14行目を書き換える

var attr ="data-tor-smoothScroll";

変更後

var attr ="class";

ページのリンク部分にclass属性を追加

スムーズなし

WordPressのトップページでは動かず

HTMLで作ったサイトのほうで快調に動いていたのでWordPressのほうでも使ってみようと思い準備をすると、なぜかトップページでは動かず。。。

詳しく調べてはいないので簡単なコーディングミスの可能性もありますが、とりあえずご報告です。