投稿 : ブログ 月別選択: 2014年7月

 区切り線

『 jQuery 技術導入例 』の項目を追加

『 いろいろサイト 』に『 jQuery 技術導入例 』の項目を追加しました。

Ume-Jp.com サイトで使っている jQuery のページをメニュー形式で紹介しています。

① ページTOPへ戻る
② アコーディオンパネル
③ Lightbox 風モーダルウィンドウ
④ ストライプテーブル
⑤ ツールチップ

⑥ フローティング ウィンドウ

おまけで一部のページですが JavaScript を使っているページも紹介しています。

Class_content
 区切り線
 区切り線

『ツールチップ』の技術を導入

『ツールチップ』の技術を使うことができるようになりました。
この『ツールチップ』を20個使ったサンプルページを作って公開しています。
文字や画像をマウスオーバーしたときに、ふき出し風に補足内容を表示します。
『ツールチップ』の中に文字と画像を入れることができて色を付けることもできます。
 jQuery ツールチップ
Class_content
 区切り線

『ストライプテーブル』の技術を導入

『 ストライプテーブル 』 の技術の内で、行【 横縞 】だけの導入に成功!

『 いろいろサイト 』サイトの『 素数の不思議 え?! なんで?! 』のコーナーの 【 ダウンロード用の表 】 で採用しました。

『 陽炎窯 』サイトの『 きままな陶芸 』 コーナーの 【 製品番号の一覧表 】 で採用しました。

元のサンプルコードは、マウスオーバーで行や列の色を変化させるものですが、このサイトでは列数が少ないのと一部の列幅が長いことが理由で改造して、行【 横縞 】だけ変化するようにしました。

🙂

同じページ内の適用しなかった表には変化が出ないようにもできたのでとても満足しています。

😀

Class_content
 区切り線

『ナビゲーションメニュー 』の不具合の修正

ナビゲーションメニュー の不具合を修正しました。

多階層のドロップダウンメニューのことです。

WordPress(コントロールパネル) > 外観 >メニュー

これで設定していたメニューが、以前に設定できていたことが【メニューを保存】ボタン で上書きをしたところ、エラーコードが何十行と現われてメニュー構造が崩れてしまい変になりました。

今は修正できましたが、Ume-Jp.com のサイトに有るけど WordPress のフォルダに入っていないページはメニュー登録できませんでした。

これはサイト運営に大きな痛手です。

Class_content
 区切り線

『アコーディオンパネル』の技術を導入

更新情報 のページで使用しています。

    Ume-Jp.com(サイトの案内) > 更新情報

リンク文字( 例_ No.2 2013年度  下半期 )をクリックすると隠れていたパネルが表示されます。

古い情報を非表示にする技術です、長ったらしくダラダラと羅列していたのを一定期間ごとにまとめて、ラベルを付けて保存しています。

最近の情報はパネルに入れずに表に出しています。

欠点は全てのパネルを閉じることができないことです、どれか一つのパネルは必ず開いています。

Class_content
 区切り線

カラーピッカーを導入

Webカラーの項目に『 カラーピッカー 』のページを追加しました。

いろいろサイト > Webカラー > カラーピッカー

このページは自作の色を調合するページです。
色見本は3ボックスの各ボックスに独自に表示して並べることにより、見比べることができるように成っています。

ボックスごとにカラーピッカーを表示できますので、それぞれの枠で色彩を設定して比較します。

設定方法

初めにテキトスボックスをクリックしてください

   カラーピッカー へ行く
 このようなカラーピッカーコントロールが出てきます。
 これで設定準備ができました
 ① カラーピッカーにマウスポインタで設定
 ② テキストボックスに直接 16 進数 ( 赤色の例 ff0000 ) で指定

出来上がった色の 16 進数 コードを控えて終わりです

Class_content
 区切り線

Easy FancyBox の代わりに Lightbox2 を導入

Lightbox2 で『 Lightbox 風  モーダルウィンドウ 』を導入することができました。これは “ Lightbox2 The original lightbox script ” です、外国語サイトのページがら一括ダウンロードができる様になっていて、.html .css .js それにサンプル画像が付いて_至れり尽くせり_の状態です。その上に運営者が違いますが日本語サイトで導入の仕方までが公開されていました。
このサイトの Ume-Jp.com > いろいろサイト > タイル壁 イメージ ステレオグラム > 隠れている像の答え で採用させて戴いています。( /um/iroirosite/stereo/answer/ )
このサイトでは大幅に見た目をカスタマイズしています、ほかのページとの整合性の為です。今のところ扱えるのは画像だけで、.txt .html .pdf などはできませんでしたこれからの課題です。
 パソコンの内部    パソコンの内部
 飼い鴨がこの何倍といます    飼い鴨がこの何倍といます
 風が吹く アニメーション    風が吹く アニメーション

Class_content
 区切り線

『雑 動画』の項目を追加しました

いろいろサイト に『雑 動画』の項目を追加しました。
テーマを決めずに動画(ビデオ)を作成して、それを出来た順に公開していきます。撮影機材が古くてボロイので画像の綺麗さは期待できません。

題目は『ハエトリグモと遊ぶ』と『黒部五郎岳』です、このビデオで始まりました。

Class_content
 区切り線

プラグインの Easy FancyBox を廃止しました

タグ <head> ~ <⁄head> 内にプラグインの Easy FancyBox のコードが自動的に書き込まれるのが当該ページ以外にも及ぶので、プラグインの Easy FancyBox を廃止しました。

プラグインの Contact Form 7 は当該ページだけ投入できたので同じようにしたいと試みましたがダメでした。
😕

廃止した動作は、jQuery(ジェイクエリー)で似たようなことが出来るそうなので勉強してみます。出来上がるまでしばらくお待ちください。
もちろん出来上がったコードを探し出して、それをカスタマイズする手法になります。簡単に導入出来るとうれしいのですが…
😮

Class_content