2008年5月 – WebTecNote

[PHP]Wiki記法テキストのHTML置換サンプル

2008/06/262008/05/31 by

最近よくやるwiki記法っぽく書いたテキストのHTML置換サンプルソースです

[br]を改行タグに変換
||で囲まれた文字にstrongタグを追加
”で囲まれた文字にemタグを追加
[[説明文>リンク先のURL]]　説明文へリンクを張る
color(色名){文字} spanタグで文字色変更

続きを読む

SiteTemplate02: 2-3Columun 4-5BOX BlogStyle

2014/08/292008/05/30 by Tenderfeel

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

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

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

続きを読む

SiteTemplate01: 1Columun 4BOX TabMenu

2014/08/292008/05/29 by Tenderfeel

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

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

1Columun 4BOX
ＸＭＬ宣言あり
ドキュメントタイプ：XHTML 1.0 Transitional
文字コード：UTF-8

続きを読む

GoogleMapSample11:複数のマーカーを表示（応用編）

2008/05/312008/05/28 by

Sample8の応用スクリプト。リンクをクリックしたら対応したマーカーを表示する。
支店マップとか散策マップみたいな用途に向いてる。

iframe対応のブラウザでご覧ください

続きを読む

[CSS]CSSだけで作る吹き出しのしっぽ

2008/12/022008/05/28 by

どんなボックスもしっぽさえつけりゃフキダシに見えるとエロイ人はいいました。
何故CSSだけで作るのか？それは…そこにCSSがあるからだ！

iframe対応のブラウザでご覧ください
直接見る»

まあ、崩れたりもするんですけど。

続きを読む

[WP]Category, Tag and Taxonomy Functions

2008/06/182008/05/27 by

公式にあるFunction Referenceの自分用適当メモその２。
Category, Tag and Taxonomy Functionsの関数リストを上から順に書き散らした。
分からないのは華麗にスルー。

またまた長いけどこのまま行くことにした。途中で力尽きた

続きを読む

[WP] Post, Page, and Attachment Functions

2008/06/132008/05/26 by

公式にあるFunction Referenceの自分用適当メモその１。
Post, Page, and Attachment Functionsの関数リストを上から順に書き散らした。
分からないのは華麗にスルー。

とんでもなく長くなった。分けた方がいいかな…

続きを読む

[WP]wordpress付属のJavascriptを使用する

2008/05/312008/05/24 by

wordpressにはwp-includeのjsディレクトリにprototypeやjQuery等のライブラリーが色々入っている。

テーマやプラグインでこれらを使用出来るようheadにscriptタグを挿入するにはwp_enqueue_script()を使用します。
独自に作成したjsファイルや、プラグインやテーマに同封したjsファイルにも使えるので便利。

続きを読む

[WP]wordpressでRSSを取得して表示

2010/08/042008/05/23 by

wordpressにはRSSを取得して配列に整形する機能が備わってるらしい。…というのを最近TwitterAPI調べてた時知ったのでそれについてのメモ。
バージョンいくつからか詳しく確認してないんだけど、手元にあるので一番古いvar2.1.3には入ってた。
よく考えたらダッシュボードのRSSもコレだよな…ので、新しい情報ではありません。

外部サイトのRSSを取得するには次のように書く

include_once(ABSPATH . WPINC . '/rss.php');
$rss = fetch_rss($uri);

で、これだけ書いたら詳しい人にはﾃｨﾝ!と来るかも。

続きを読む

[WP]ショートコードAPI仕様メモ

2010/04/082008/05/22 by

wordpress2.5から実装されたショートコードについて。
ショートコードというのは、タグの簡易版みたいなものです。プラグインではよくお目にかかります。
2.5から本文中に［gallery］と入力すると、その記事でアップロードされた画像がサムネイルで一覧表示される機能がありますが、こういうのを自作できるわけです。

胡散臭いまとめは信用ならねぇ、という方は公式サイトの説明を見てください。
※この記事は本家解説の完全翻訳はしてません

手っ取り早く作ってみる

下のソースをアクティブになってるテーマのfunction.phpにコピペする。

function bartag_func($atts) {
	extract(shortcode_atts(array(
		'foo' => 'no foo',
		'baz' => 'default baz',
	), $atts));

	return "foo = {$foo}";
}
add_shortcode('bartag', 'bartag_func');

▼投稿画面で次のタグを記入すると、それぞれ違う出力結果になります。

[ bartag ]と本文に投稿→foo = no foo
[ bartag foo=”bar” ]と本文に投稿→foo = bar

続きを読む

[PHP]オブジェクト指向プログラミング

2010/11/022008/05/16 by

初心者な自分用メモ、みたいなもんです…。
把握までの過程をメモってるので同じく初心者には分かりやすいかも？
考え方はJavacriptも同じだと思う。

名称

とりあえず呼び方がややこしい。初心者はまずここが覚えられない。

メソッド(method)
クラス内にある関数(function)のこと
プロパティ(property)
クラス内の変数(variable)のこと。メンバ変数も同じ意味
コンストラクタ（Constructor）
初期化用のメソッド。オブジェクト生成時にやりたいことを入れる
継承（Inheritance）
クラスを元に新しいクラスを作る。上手いこと作らないとかえって面倒なことになるらしい

続きを読む

[js]ロールオーバー＋見てるページのメニュー画像変更

2008/05/312008/05/15 by

メニュー画像をロールオーバーさせつつカレントページはon状態にするスクリプト。

見てるページのメニュースタイルを変更すると
ロールオーバースクリプト（画像名のOn/Offで判別）を足したソースです。
プリロードはついてません。

iframe対応のブラウザでご覧ください

続きを読む

[XHTML]コピペ用セレクトメニュー（テキスト編）

2008/05/222008/05/14 by

入力フォームで良く使うセレクトメニューのサンプルソース。
都道府県、質問内容、違反報告内容など。

お届け時間指定

業者によって時間は変わるけど大体こんな感じ。

<select name="time">
<option>希望なし</option>
<option>午前中</option>
<option>12時-14時</option>
<option>14時-16時</option>
<option>16時-18時</option>
<option>18時-20時</option>
<option>20時-21時</option>
</select>

続きを読む

[XHTML]コピペ用フォームパーツ（数字編）

2008/05/312008/05/14 by

年月日や西暦、商品個数などに使えるセレクトメニューのXHTMLソース。コピペ用です。

月(1～12）のセレクトメニュー

<select name="month">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>

9～0のセレクトメニュー

<select name="num">
  <option value="9">9</option>
  <option value="8">8</option>
  <option value="7">7</option>
  <option value="6">6</option>
  <option value="5">5</option>
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
  <option value="1">1</option>
  <option value="0">0</option>
</select>

続きを読む

[XHTML]応募フォームっぽい入力項目のメールフォーム

2008/12/262008/05/14 by

求人情報の応募フォームにありそうな入力項目のXHTMLフォームのコピペ用サンプル。

classやIDは一切使ってないのでスニペットとしても使えると思います。
テーブル使用。注釈はsmall。
結構手抜いてます。

<form action="" method="post">
<table cellpadding="0" cellspacing="0" border="1">
	<tr><th scope="row">お名前</th>
	<td><input name="name" type="text" size="50" /><small>（全角）</small></td></tr>
	<tr><th scope="row">ふりがな</th>
	<td><input name="name2" type="text" size="50" /><small>（全角）</small></td></tr>
	<tr><th scope="row">生年月日</th>
	<td><input name="birth" type="text" size="20" /><small>（例：1980/04/01）</small></td></tr>
	<tr><th scope="row">性別</th>
	<td><input name="sex" type="radio" value="男性" />男性
	<input name="sex" type="radio" value="女性" />女性</td></tr>
	<tr><th scope="row">E-Mail</th>
	<td><input name="email" type="text" size="50" /></td></tr>
	<tr><th scope="row">電話番号</th>
	<td><input name="tel" type="text" size="50" /><small>（例：1234-56-7890）</small></td></tr>
	<tr><th scope="row">携帯電話・PHS番号</th>
	<td><input name="tel2" type="text" size="50" /><small>（例：090-1234-5678）</small></td></tr>
	<tr><th scope="row">郵便番号</th>
	<td><input name="postcode" type="text" size="10" /><small>(例：507-0000)</small></td></tr>
	<tr><th scope="row">住所</th>
	<td><input name="address" type="text" size="50" /></td></tr>
	<tr><th scope="row">現在役職の有無</th>
	<td><input name="businesspost" type="radio" value="あり" />あり
	<input name="businesspost" type="radio" value="なし" />なし</td></tr>
	<tr><th scope="row">最終学歴</th>
	<td><input name="schoolcareer" type="text" size="50" /></td></tr>
	<tr><th scope="row">資格</th>
	<td><textarea name="license" cols="70" rows="3"></textarea></td></tr>
	<tr><th scope="row">職務経歴</th>
	<td><textarea name="history" cols="70" rows="10"></textarea></td></tr>
	<tr><th scope="row">自己PR</th>
	<td><textarea name="message" cols="70" rows="10"></textarea></td></tr>
	<tr><th scope="row">入社希望時期</th>
	<td><input name="enter" type="text" size="50" /></td></tr>
	<tr><th scope="row">その他希望条件</th>
	<td><textarea name="other" cols="70" rows="5"></textarea></td></tr>
</table>
<p><button type="submit">送信</button><button type="reset">リセット</button></p></form>

サンプルのCSSは続きにあります。

続きを読む

[js]メールアドレスを自動収集されないように表示する

2009/12/252008/05/13 by

放置してたメールボックスを受信してみたら1000通もスパムが溜まってた。さすがに驚いた。

スパマーはWebサイトに記載されてるメアドをgoogleのクローラのようなbotで拾っていくとか。
直接メアド書くのは最早時代遅れとなりつつあり、お手軽な方法としてはエンティティ化が流行ってる様子。
でも唐突にエンコード文字があると逆に怪しいと思うんだけどどうでしょう。
個人的にはあのクソ長い文字の羅列はあまり好きじゃない。ソフトが勝手にデコードしたりするし。

そこでmailtoリンクつきのメールアドレスをスタイリッシュにjavascriptで表示するサンプルを。
前にmootoolsで書いたけど、今回は普通のjavascriptで。

続きを読む

XHTML&UTF-8なメールフォームphpを晒してみる

2008/06/252008/05/12 by

自分好みのメールフォームが欲しかった。ので作った。なんか配布されてるのってHTMLにEUCじゃないですか。最近組むサイトは９９％の割合でＸＨＴＭＬにUTF-8なので、お問い合わせフォームだけ文字コード変えたりdock … 続きを読む

Tableless Contact Form sample02

2008/05/312008/05/12 by

テーブルを使わないお問い合わせフォームのサンプル。
シンプルなブルー系。タブっぽいラベル。
Checked(win):IE6,IE7,FireFox2,Opera9,Safari
Mac未確認。

iframe対応のブラウザでご覧ください

続きを読む

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

2014/08/292008/05/11 by Tenderfeel

各カテゴリーに任意のアイコンを設定・表示する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に関する差分です。

続きを読む

超便利なFirefoxアドオンリスト(Web開発者向け)

2008/06/162008/05/09 by

Firefoxのウリといえばアドオン入れまくりでカスタマイズしまくれるとこだと思ってます。
今現在使用中、もしくは使う機会がありそうなFirefoxのプラグインのブックマーク。

Firebug
»Mozilla Add-ons
»公式サイト
超有名なWeb開発者用アドオン。もうこれの為にFirefox使ってると言っても過言ではないかもしれない…。
HTMLの構造、適用されてるCSS、HTMLとCSSの編集、Javascriptのデバッグと分析、接続状況などWeb開発にあると便利な機能がこれでもかと盛り込まれている。
注※Googleなど、Ajax利用してるサービスではOFF設定しないともっさりします

Web Developer
»Mozilla Add-ons
»公式サイト
これもまた便利なWeb開発者用アドオン。Firebugと比べるとこちらはHTMLに特化。機能的にはSleipnirのＨawkeyeと似てる。
オーサリングツールのデザインビューについてる機能がアドオンになったという感じだろうか…
javascriptはあんまり使わないというならFirebugよりこちらの方が便利かも。

続きを読む