ブログ雑記・その他 no.134.103.101.96 【ありのごとくあつまりて】

FC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。迷子にならないブログ作りを目指し．．．何か1つでもお役に立てる情報を提供できたらいいなぁと思っています。

このページの記事目次（カテゴリー: ブログ雑記・その他 8 件）

カテゴリーリストをプチリニューアルしました。 [2010/05/26]
久々のテンプレ大改造 jQuery が面白い！ [2010/01/14]
contenteditable （直接編集）の傾向と対策 [2010/01/10]
検索トレンド！記事数 81件でも大健闘（!?） [2009/12/07]

total 2 pages 次のページ　→

カテゴリーリストをプチリニューアルしました。

2010/05/26 (水) カテゴリー：ブログ雑記・その他

サイドバー部分の親子カテゴリーリスト、ちょっと地味だなーとは前から思っていたのですが、少しだけドレスアップしてみました。　

影響を受けたのは、Paroday さん作の Categories... というプラグイン（左図）です。下のリンクをクリックすると、実際のページでプレビューできます。

http://arinogotokuatumarite.blog19.fc2.com/?plugin=29476&cat=21
http://arinogotokuatumarite.blog19.fc2.com/?plugin=29476&no=134
※上の赤文字部分を書き換えれば、ご自分の（FC2）ブログでもプレビューできます。

プラグインナンバー: 29476　プラグイン名: Categories...
プラグインナンバー: 29533　プラグイン名: Categories...B
[ 関連記事：プラグインはダウンロードしなくても使えます！ ]

今回はこのアイコン部分だけを（加工許可を頂き）使わせていただきましたが、このプラグイン自体もとても高機能で便利そうです。

【 ↓　続きを表示する　↓ 】

キーワード検索： FC2ブログプラグインプレビュー

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-134.html

2010/05/26 ～ | Comment (4) tweet? | ↑ ページ先頭へ ↑ |

久々のテンプレ大改造 jQuery が面白い！

2010/01/14 (木) カテゴリー：ブログ雑記・その他

1つ前の記事が未完成の中、ちょっとしたことから jQuery にどっぷりハマっている私です。全く不自由を感じていなかった部分を 2箇所変更。

画像ファイルへのリンクを同じウィンドウでポップアップ風に表示する方法を Lightbox JS （旧バージョン）から、jQuery lightBox plugin に変更。
[ 詳細記事： jQuery lightBox　グループ化を操る3つの方法 ]
検索結果ページやタグ検索結果ページで使っているキーワードの強調表示（ハイライト機能）を共有テンプレートでも使わせていただいている KW強調ボタンから highlight: JavaScript text higlighting jQuery plugin に変更。 jQuery を使ったついで、というか jQuery版 lightBox と KW強調ボタンを併用する方法が探せなかったから。。。
[ 詳細記事：検索用語をハイライト（強調表示）するスクリプト ]

JavaScript text higlighting jQuery plugin を適用した検索結果ページ

クリックで画像を拡大します

結果、かなり気に入りました♪　近いうちに、情報まとめようと思いますが（･･･って、前の記事も未完成ですが。。。）取り敢えず報告まで。

しかし、こういうのって殆ど自己満足の世界。久しく使っていなかった Lightbox をまた無意味に使ってみたり。。。

【 ↓　続きを表示する　↓ 】

キーワード検索： jQuery javascript

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-103.html

2010/01/14 ～ | Comment (4) tweet? | ↑ ページ先頭へ ↑ |

contenteditable （直接編集）の傾向と対策

2010/01/10 (日) カテゴリー：ブログ雑記・その他

スクリプトを使わなくても Web上で文字や画像を直接編集させる方法　最近、この contenteditable="true" について新たな収穫（？）があったので載せておきます。

contenteditable="true" を使ったページ（実例）

1. ～ 3. のような使い方なら、結構使えるかと。 4. は「ブログの記事」で使ったものですが、ブログの場合同じカテゴリーや同じ月 etc、色々なところに影響を及ぼしてしまうので．．． Firefox での挙動を考えると、非推奨？？

contenteditable （コンテンツの編集許可）はブラウザによってちょっと動きが異なるようなので、私の知っている範囲でメモしておくことにします。

動作確認したブラウザは　Windows Vista ×　IE8， IE7，（IE6），（IE5.5），Sleipnir2， Firefox3， Opera9， Google Chrome2， Windows XP ×　IE7， IE6 です。 Mac × Safari でも一応。（← 電気屋さんでこっそりテストしただけ。。）

1.　IE × contenteditable="true" （Sleipnir も同様）

IE では編集可能な範囲の改行時に <p> が挿入される。（対応策あり）
http://arinogotokuatumarite.blog19.fc2.com/　のように書いてある部分があると、勝手に「リンク風」にされてしまう。なのに、リンクとしては機能しない。。。

【 ↓　続きを表示する　↓ 】

【　続きを閉じる　】

その部分の <p> が margin:0 で余計な装飾もない場合

<div contenteditable="true">
実際には、この中に入れた文字や画像が編集可能になります。
※この記事では設定していないので、過去記事などでお試しください。
</div>

その部分の <p> が margin:0 などではない場合

↑ 上の書き方のままだと、「Enter」キーなどを押した改行時に前後に余白（※）が空いてしまいます。この状態の場合、一行改行を反映させるためにはユーザーが「Shift」＋「Enter」キーを押す必要があります。それでは面倒なので・・・ ↓

<div contenteditable="true">
<div>
参考 : 編集可能な Div で行間を 1 行にする方法
http://msdn.microsoft.com/ja-jp/library/bb250508(VS.85).aspx
この書き方のように <div> </div> を入れておくと、IE でも <p>のスタイルに左右されることなく、「一行改行」がそのまま行えます。
簡単ですが、頻繁に使うなら ↓ 下の方法がお勧め。
</div>
</div>

/* 直接編集用（IE対策） */
.htmlbox p { margin:0; padding:0; }

<div class="htmlbox" contenteditable="true">
スタイルシートで予め、この範囲内の <p> を設定しておけばOK！
</div>

勝手に「リンク風」にされてしまうのは．．．

気になるけど、特に問題にもならない程度？？どうにかしたい場合は、<pre> http://arinogotokuatumarite.blog19.fc2.com/ </pre> とか書いておけば、一時的に回避出来るみたいです。[ 実際の使用例 2 ]

<pre class="htmlbox" contenteditable="true">
	/* ----------------------------------
	Template by ありのごとくあつまりて (paruparu)
	http://arinogotokuatumarite.blog19.fc2.com/
	------------------------------------- */
このような場合は、何故か 「リンク風」 にはなりにくいらしい。 不思議？？
※この記事では設定していないので、実際の使用例（2） などでお試しください。
</pre>

2.　Firefox × contenteditable="true"

クリックで画像を拡大します

Firefox では、ページ内のどこかで contenteditable="true" を使うと、その範囲以外の部分で「右クリック」をした場合の挙動がちょっとおかしくなる。（対応策不明）
IE とは異なり、<a href=" ">リンク</a> がハイパーリンクとして一応機能する。コンテキストメニュー（ショートカットメニュー）などからならリンク先を開くことができるが、クリックでは無反応。
実際の過去記事はこちら。

Firefox でページ内を右クリックした時の挙動がおかしい！！

これが、この記事を含む「ブログ記事」では危険な気がして使えない一番の理由。対応策はあるのかな？？ちなみに他のサイトでも検証済みです。

Firefox だと、見た目通りにコピー出来ないこともある！！

範囲選択 → コピーしたものを、貼り付けると．．．余計なものが加わってしまうことがある。   や " を多様した場合などに発生しやすいようですが、大丈夫な場合もあったり．．．法則は不明です。（半角スペース）や " をそのまま使えば解消されることも多いので、確認は必須です。

3.　Opera × contenteditable="true"

IE と同様、編集可能な範囲の改行時に <p> が挿入される。
<div> </div> を入れるという「IEで有効な裏技?」も使えるが、微妙にカーソル（キャレット）の位置がずれる。（対応策あり）
<a href=" ">リンク</a> 部分は、リンクとしては機能しない。

その部分の <p> が margin:0 などではない場合

/* 直接編集用（IE, Opera対策） */
.htmlbox p { margin:0; padding:0; }

<div class="htmlbox" contenteditable="true">
スタイルシートで予め、この範囲内の <p> を設定しておけばOK！
</div>

4.　Google Chrome × contenteditable="true"

かなり優秀！一番シンプルな書き方でも問題なし。
IE とは異なり、（Firefoxと同様） <a href=" ">リンク</a> がハイパーリンクとして一応機能する。コンテキストメニュー（ショートカットメニュー）などからならリンク先を開くことができるが、クリックでは無反応。

5.　W3C での構文エラー

気になると言えば、気になる。。。スクリプト（document.write）を使えば、取り敢えず回避可能ですが、何となく無駄な感じも。

当面の．．． contenteditable="true" の使い方（一案）

ブログなどとは切り離して「直接編集専用ページで」使う。
リンクは張らない。アドレスを直接書いておく方が親切。
ソースは以下のように書く。

.htmlbox {
padding:10px;
white-space:nowrap;
line-height:1.6;
overflow:auto;
overflow-x:scroll;
}
html>/**/body .htmlbox {
overflow:auto;
}
.htmlbox p {
margin:0;
padding:0;
}

<div class="htmlbox" contenteditable="true">
実際には、この中に入れた文字や画像が編集可能になります。
</div>

あくまで自分用。 CSSハック部分は結構重要。理由は ↓記事を参照してください。
[ 参考： IE7をインストールしてみた - サラリーマン白書 ]

ちなみに、「デフォルトに戻す」機能には、onclick="window.location.reload(true);" などではなく onclick="history.go(0)" を使っています。カーソルの位置を維持できる点が気に入っているのですが、Operaのデフォルト状態など、キャッシュを優先している状態では、onclick="history.go(0)" だと内容が元に戻りません。。。

キーワード検索：直接編集 contenteditable ブラウザ