最近よくやるwiki記法っぽく書いたテキストのHTML置換サンプルソースです
- [br]を改行タグに変換
- ||で囲まれた文字にstrongタグを追加
- ”で囲まれた文字にemタグを追加
- [[説明文>リンク先のURL]] 説明文へリンクを張る
- color(色名){文字} spanタグで文字色変更
気ままに綴る独学メモ帳
最近よくやるwiki記法っぽく書いたテキストのHTML置換サンプルソースです
ちょっとテクニカルなレイアウトのWebサイトテンプレートその2。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。
このテンプレートはブログによくあるトップのみ3カラム、中が2カラムの構成で、ヘッダとフッタが横100%に見えるように作ってあります。
コンテンツ・サイドバーの量が多くなるのを想定した作りなので、中身が少ないとフッタが下にピッタリくっつきません。
We
並び順は上から、ヘッダ»グローバルメニュー»コンテンツ»サイドバー»フッタ。
フォントサイズ指定はYUIのやつ使ってます。
CSSのフィルタリングで使用しているif文については、IEのみに適用させるIFで解説しています。
ちょっとテクニカルなレイアウトのWebサイトテンプレート。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。
このテンプレートは上にタブメニューがある1カラム構成で、ロールオーバーとカレントページのタブスタイル変更はjavascriptを使用しています。
並び順は上から、ヘッダ»メニュー»コンテンツ»フッタ。
フォントサイズ指定はYUIのやつ使ってます。
公式にあるFunction Referenceの自分用適当メモその2。
Category, Tag and Taxonomy Functionsの関数リストを上から順に書き散らした。
分からないのは華麗にスルー。
またまた長いけどこのまま行くことにした。途中で力尽きた
公式にあるFunction Referenceの自分用適当メモその1。
Post, Page, and Attachment Functionsの関数リストを上から順に書き散らした。
分からないのは華麗にスルー。
とんでもなく長くなった。分けた方がいいかな…
wordpressにはwp-includeのjsディレクトリにprototypeやjQuery等のライブラリーが色々入っている。
テーマやプラグインでこれらを使用出来るようheadにscriptタグを挿入するにはwp_enqueue_script()を使用します。
独自に作成したjsファイルや、プラグインやテーマに同封したjsファイルにも使えるので便利。
wordpressにはRSSを取得して配列に整形する機能が備わってるらしい。…というのを最近TwitterAPI調べてた時知ったのでそれについてのメモ。
バージョンいくつからか詳しく確認してないんだけど、手元にあるので一番古いvar2.1.3には入ってた。
よく考えたらダッシュボードのRSSもコレだよな…ので、新しい情報ではありません。
外部サイトのRSSを取得するには次のように書く
include_once(ABSPATH . WPINC . '/rss.php'); $rss = fetch_rss($uri);
で、これだけ書いたら詳しい人にはティン!と来るかも。
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
初心者な自分用メモ、みたいなもんです…。
把握までの過程をメモってるので同じく初心者には分かりやすいかも?
考え方はJavacriptも同じだと思う。
とりあえず呼び方がややこしい。初心者はまずここが覚えられない。
メニュー画像をロールオーバーさせつつカレントページはon状態にするスクリプト。
見てるページのメニュースタイルを変更すると
ロールオーバースクリプト(画像名のOn/Offで判別)を足したソースです。
プリロードはついてません。
入力フォームで良く使うセレクトメニューのサンプルソース。
都道府県、質問内容、違反報告内容など。
業者によって時間は変わるけど大体こんな感じ。
<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ソース。コピペ用です。
<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>
<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フォームのコピペ用サンプル。
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は続きにあります。
放置してたメールボックスを受信してみたら1000通もスパムが溜まってた。さすがに驚いた。
スパマーはWebサイトに記載されてるメアドをgoogleのクローラのようなbotで拾っていくとか。
直接メアド書くのは最早時代遅れとなりつつあり、お手軽な方法としてはエンティティ化が流行ってる様子。
でも唐突にエンコード文字があると逆に怪しいと思うんだけどどうでしょう。
個人的にはあのクソ長い文字の羅列はあまり好きじゃない。ソフトが勝手にデコードしたりするし。
そこでmailtoリンクつきのメールアドレスをスタイリッシュにjavascriptで表示するサンプルを。
前にmootoolsで書いたけど、今回は普通のjavascriptで。
自分好みのメールフォームが欲しかった。ので作った。 なんか配布されてるのってHTMLにEUCじゃないですか。 最近組むサイトは99%の割合でXHTMLにUTF-8なので、お問い合わせフォームだけ文字コード変えたりdock … 続きを読む
テーブルを使わないお問い合わせフォームのサンプル。
シンプルなブルー系。タブっぽいラベル。
Checked(win):IE6,IE7,FireFox2,Opera9,Safari
Mac未確認。
各カテゴリーに任意のアイコンを設定・表示するWordpress用プラグイン「Catgory Icons」の紹介と日本語化ファイルの配布。
このプラグインは、カテゴリーそれぞれに独自のアイコンを設定することが出来て、
サイドバーのカテゴリーリストや記事のタイトルに設定したアイコンを表示してくれます。
WordPress2.3~2.6.1対応
最新バージョン2.0.7
※ver2.0.5の翻訳ファイルそのまま使用してても問題はありません。
ダウンロード後展開、wp-content/plugins/にアップロードしたら、有効化する。
日本語化ファイルは、解凍したmoファイルをlanguagesフォルダに入れます。
moファイルのアップロード形式はバイナリで。
2.0.5からプラグインに同胞されたようです。ワーイ
ダウンロード
“category_icons-ja(2.0.7)” をダウンロード
category_icons-ja_v207.zip – 3890 回のダウンロード – 7.73 KB“category_icons-ja(2.0.5)” をダウンロード
category_icons-ja_v205.zip – 2841 回のダウンロード – 7.74 KB“category_icons-ja(2.0.2)” をダウンロード
category_icons-ja_v202.zip – 2975 回のダウンロード – 7.68 KB“category_icons-ja” をダウンロード
category_icons-ja.zip – 3053 回のダウンロード – 7.25 KB若干エラーの日本語が怪しいかもしれない。
2.0.7の変更点は大体次の通りです。
2.0.2→2.0.5はSEO Friendly Imagesに関する差分です。
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のHawkeyeと似てる。
オーサリングツールのデザインビューについてる機能がアドオンになったという感じだろうか…
javascriptはあんまり使わないというならFirebugよりこちらの方が便利かも。