DR-PS

スライドショー jQuery.TinySlider

mieko — Mon, 24 Oct 2011 02:40:33 +0000

最近のニーズに合わせてTOPページのアクセントとして簡単なスライドショーを入れてみました。WordPress には標準で jquery.js が入っていますが、使う時には、$ を jQuery に書き換えます。

今回はコリスさんのページを参考に CSS を調整しました。現在表示しているパネルの位置ボタンをオリジナル画像に作り直し、コントローラーボタンも出さない設定にしてみました。

1）ヘッダーに必要なスクリプトをリンクさせる。
jquery.js
jquery.slider.min.js
jquery.slider.css

2）ヘッダーにスクリプトを入れる。

3）入れたいページにHTMLを書く。
div要素に背景として入れます。

アクティブなぴーくん

mieko — Fri, 16 Sep 2011 14:27:10 +0000

TOP のイラストを更新しました。今回のは新しい星で生産性を上げているイメージで、ぴーくんもアクティブにしてみました。ここらへんでは営業中のかわりに「やっとるよ」って書いてあるお店がちょこちょこあります。やっています…　営業しています…　っていう意味ですが地元っぽくフレンドリーで好きな言葉です。

イラスト制作は現在受付中です。
ご依頼はお問い合わせからお願いします。

最近の投稿10件をフッターに表示

mieko — Wed, 15 Jun 2011 16:22:17 +0000

ページ下のサムネイルを5件から10件に変更しました。
(‘showposts’=>10)

今日は未明から皆既月食だそうです。いまはまだ真上に見える月も早朝には消えてしまうのですね。夜明けも早いので、ちょっと見てみたい気もしますがきっと夢の中です。

10年ぶりの長時間、今夜皆既月食
National Geographic

ラベンダーぴーこ登場

mieko — Mon, 02 May 2011 20:38:55 +0000

こんにちは。もうすっかり気持ちいい季節になりましたね。うちの庭にもラベンダーがいっぱい咲いてきたのでラベンダーぴーこに登場してもらうことにしました。ぴーくんの仲間たちのひとりでとてもまじめ派のラベンダーぴーこ。これからも活躍してもらいますのでかわいがってくださいネ！

※ぴーこキャラクター使用についてはお問い合せください。

ドーナツポップのクリタン

mieko — Thu, 10 Mar 2011 16:30:04 +0000

最近ハマってるポップでヒップなドーナツ屋さん…
ドーナツポップのクリタン（スタバのクリエイトタンブラー）を作ってみました。ドーナツカラーがおいしそう。
そして DR-PS とサイトカラーが同じです。
是非 DL してお楽しみください。

ショート／トール

最近気になるシリコンフリー

mieko — Sat, 26 Feb 2011 16:54:52 +0000

手触りがいいとか知ってるメーカーだからという理由でヘアケア製品を選んでいると、知らない間に髪を傷めていることがあります。最近なんとなく合うものがないなあって思ってるところに出会ったシリーズ。ケアテクトHBリペアトリートメント。まだお試し中なのですが、シリコンフリーなのに仕上がりも心地いいです。使ってるものを全部シリコンフリーにしないと意味ないのかもしれないけど、少しずつ低刺激なものに変えていきたいと思っています。親身になって髪へのアドバイスをしてくれるヘアサロンに感謝です。

最近の投稿5件をフッターに表示

mieko — Sat, 05 Feb 2011 18:58:35 +0000

フッターにアイキャッチ画像をだしてみました。どのページにも表示されるサムネイルで最新エントリ5件を見ることができます。画像のサイズは管理画面と表示される側と分けることができます。正方形に画像の一部を切り取ることもできますが、ここでは同じ比率で縮小しています。

Firefox クリック時に出る点線を消す

mieko — Tue, 01 Feb 2011 00:00:23 +0000

Firefox のクリック時にでるリンクカラーの点線が気になっていましたが a タグに以下の2行を入れて消してみました。（Firefox 3.6で確認）
a {
overflow: hidden;
outline: none;
}

jQuery で画像表示してみる

mieko — Mon, 31 Jan 2011 00:00:19 +0000

current_page_item にCSS でハイライト画像を入れる方法で、ＩＥ6 が反映されない（複数の class を並べて使えない）ので jQuery で表示してみました。WordPress には jQuery のライブラリが標準で入っているので、js ファイルに必要なコードだけ書いてCSSファイルと同じ位置に置きます。これで IE6 のメニューもそろいました。

現在のページをハイライト表示

mieko — Tue, 25 Jan 2011 13:35:49 +0000

このページに使っているちょっとしたチップスを少しずつ書いていこうと思います。

現在のページのメニュー画像をハイライトさせる方法ですが、ヘッダーには、wp_list_pages(‘title_li=’)　が入れてあります。wp_list_pages() をページ表示時に呼び出すと、そのページを指すリストアイテムには current_page_item というクラスが追加されますので、それを利用してCSS セレクタでデザインします。

ページ ID は、管理画面のページ項目にオンマスすると確認できますが、ローカルのテスト環境で使う場合は、IDが変わるので注意が必要です。（確認ブラウザ：Firefox3 / IE8）