SiteTemplate06: PhantomWhite

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの2カラム固定幅レイアウト。色違いの黒もあります。

半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。

SiteTemplate06

  • 2Columun 2BOX(irregular)
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

続きを読む

SiteTemplate05: PhantomBlack

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの2カラム固定幅レイアウト。色違いの白もあります。

半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。

SiteTemplate05

  • 2Columun 2BOX(irregular)
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

続きを読む

[bg]CSS用ドロップシャドウ背景 8ColorPack(パステル系)

コンテンツ部分の両端にドロップシャドウを付ける、repeat-y用の背景画像をまとめたパッケージです。 パステル調の8色セット。コンテンツエリアはwidth:900pxです。 サンプルページ フリー素材です。色変更、サイ … 続きを読む

[jQuery]イメージマップでTooltip表示するサンプル

「イメージマップのホットスポットにマウスオーバーしたら説明表示出るように出来ない?」って言われて書いたやつ。
非表示にしてるブロック要素を表示してるだけなので、画像とかテキストとか割とフリーダムに出せる。

jQuery1.2.6用。

jQueryのマウスイベントには以下プロパティ提供されていて

  • pageX/Y : ページの左上を0としたマウスポインタの位置
  • clientX/Y : ブラウザのドキュメント表示領域を0としたマウスポインタの位置

特別なことしなくてもイベントが発生した時のマウスポインタの位置を取得することが出来る。

続きを読む

[mootools]サムネイルクリックで画像とコメントを変更する

前に書いたサムネイルにマウスオーバーしたら画像を切り替える を、
mootools1.2使ってフェードインとかつけたサンプル。

注意※ソースはmootools1.2用なので1.1では多分動きません。

続きを読む

[WP]moreタグの出力ソースを変更する

<!–more–> で記事を区切ったときに出力される続きを読むリンクや、ターゲットに使われてるspanタグそのものを変更する方法について。

デフォルトだと、全文が表示されたときに挿入されるソースはこうです。

<p><span id="more-4"></span></p>

たとえばこれを次のようにDivへ変更する

</div>
<div id="more-4">

the_content_more_link について追加

続きを読む

SiteTemplate03:2Column 5box CenterVisual&TabMenu

ちょっとテクニカルなレイアウトのWebサイトテンプレートその3。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。

このテンプレートは上にタブメニュー、中央にメインビジュアル用のwidth:100%ブロックがある2カラム構成で、タブが上に動くアクションはCSSでやっています。
並び順は上から、ヘッダ(メニュー)»ビジュアル»コンテンツ»サイドバー»フッタ。
フォントサイズ指定はYUIのやつ使ってます。

SiteTemplate03
このテンプレートには、使用しているボタン・コンテンツタイトル画像のpdfファイルが添付してあります。

▼所謂Web2.0っていう感じのやつ
SampleButton

  • 2Columun 5BOX
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

続きを読む

SiteTemplate02: 2-3Columun 4-5BOX BlogStyle

ちょっとテクニカルなレイアウトのWebサイトテンプレートその2。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。

このテンプレートはブログによくあるトップのみ3カラム、中が2カラムの構成で、ヘッダとフッタが横100%に見えるように作ってあります。
コンテンツ・サイドバーの量が多くなるのを想定した作りなので、中身が少ないとフッタが下にピッタリくっつきません。
We
並び順は上から、ヘッダ»グローバルメニュー»コンテンツ»サイドバー»フッタ。
フォントサイズ指定はYUIのやつ使ってます。
CSSのフィルタリングで使用しているif文については、IEのみに適用させるIFで解説しています。

SiteTemplate02

  • 2-3Columun 4-5BOX
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

続きを読む

SiteTemplate01: 1Columun 4BOX TabMenu

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。

このテンプレートは上にタブメニューがある1カラム構成で、ロールオーバーとカレントページのタブスタイル変更はjavascriptを使用しています。
並び順は上から、ヘッダ»メニュー»コンテンツ»フッタ。
フォントサイズ指定はYUIのやつ使ってます。

SiteTemplate01

  • 1Columun 4BOX
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

続きを読む

[WP]カテゴリーのアイコンを表示するプラグイン「Category Icons」

各カテゴリーに任意のアイコンを設定・表示するWordpress用プラグイン「Catgory Icons」の紹介と日本語化ファイルの配布。

このプラグインは、カテゴリーそれぞれに独自のアイコンを設定することが出来て、
サイドバーのカテゴリーリストや記事のタイトルに設定したアイコンを表示してくれます。

インストール

WordPress2.3~2.6.1対応
最新バージョン2.0.7

※ver2.0.5の翻訳ファイルそのまま使用してても問題はありません。

ダウンロード後展開、wp-content/plugins/にアップロードしたら、有効化する。

日本語化ファイルは、解凍したmoファイルをlanguagesフォルダに入れます。
moファイルのアップロード形式はバイナリで。
2.0.5からプラグインに同胞されたようです。ワーイ

ダウンロード

若干エラーの日本語が怪しいかもしれない。

2.0.7の変更点は大体次の通りです。

  • My Category Orderに対応。
  • アイコンリストにソート機能が付いた(テーブルのヘッダクリックで動作)
  • ウィジェットが本体に内包された(category-icons_widget.phpが無くなり、本体有効化だけでウィジェットが使用可能に)
  • 不要なフィールドの削除とMySQLに関する修正
  • イタリア語・トルコ語翻訳ファイルの追加

2.0.2→2.0.5はSEO Friendly Imagesに関する差分です。

続きを読む

[WP]メルマガ・メール購読プラグイン比較まとめ

wordpress対応のニュースレター系プラグインの比較をしたのでまとめてみた。
メールマガジン配信、メール購読、登録ユーザーへのメール送信がwordpressの管理パネルから出来るプラグインが中心。
ビジネスブログとかCMS的に構築したときリクエストされる事が多いけど、いざ探してみるとなかなか見つからないんだよね…。

Subscribe2の日本語化ファイルver5.6に対応
Subscribe2の日本語化ファイルver4.15に対応
Subscribe2の日本語化ファイルver4.7に対応
説明にダウンロードのリンクがあります。

続きを読む

[mootools]theadやtbodyのfloat:leftがIEで効かないので

それじゃあタグ変えて中身をtableの外に出せばいいんじゃん。(そしたらfloatできるじゃん)
…という発想から出来たソース。mootools使用。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

IEはthead、tbody、tfootへのfloat、positionが効かない。
効果的なハックがあればいいんだけど見つからなかった。
つくづくIEはダメな子だな。

続きを読む