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

モード変更

この記事に含まれるタグ (Keyword) :
直接編集  contenteditable  

スポンサーサイト

--/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

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

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

Web上で直接編集できる文字や画像

2008/11/10 (月)  カテゴリー: Twitter・ブラウザ関連
直接編集モードのイメージ

Web上 ( IE や Firefox などのブラウザ ) で 文字や画像 を 直接編集できる方法があることをご存知ですか?
しかも、Web制作者側 が この機能をページの任意の場所に搭載させることもできるし、閲覧者側 が どんなサイトでも 文字や画像 を直接編集することもできる!! (私は つい先日、初めてこれを知りました

私のサイトでは... → 例えばこんな使い方 を採用して ソースの編集やコピー をその場で簡単にできるようにしています。 また、ページのスクリーンショットを撮る際に 邪魔なものをよけて (削除して) 撮ったり、暇つぶしに遊んだり... と色々と使っています。

対応ブラウザは IE(5.5以上), Firefox(2.0以上), Opera, Safari とのことです。 (Sleipnir2, IE8, IE7, IE6, IE5.5, Firefox3, Opera9, Google Chrome2 で動作確認済。)

例えば Web制作者側 がこれを設定すると...
↓ 下の文字や画像が編集できるようになります。

スクリーンショット.jp では様々なOSやブラウザでWebページのスクリーンショットを撮ってくれるのですが、無料お試しとして Windows IE 7.0, Firefox 3.0, Google Chrome / Macintosh Safari 2.0 でのスクリーンショットが1回3ページまで (3時間空ければ1日何回でも) 試せます

スクリーンショット.jp のお試しだけでは足りないという場合には、海外ですが、 Browsershots というサイトもあります。

追記 : 2009/01/22
スクリーンショット.jp の 無料お試しサービス は 2008/12/22 で終了となっています。
自分の過去記事 : 各ブラウザでのスクリーンショットで・・・ より抜粋。

リンク自体は反映されない (無効になる) ようですが、それ以外は切り取りも、改行も、画像の拡大も (Opera9 や Google Chrome2 での画像操作 は 切り取りや貼り付けのみ)...何でもできて弄り放題です

しかも これ、ものすごく簡単な方法を使っています!

1. 文字や画像の 直接編集ができるエリア を作る方法
(Web制作者編)

<div> や <p> などの ブロック要素 に contenteditable="true" を入れればOK! 
例えば↓ 下のように記述します。

<div contenteditable="true">
この中に入れた 文字や画像 が編集可能になります。
この書き方の場合、IE では改行時 に <p> が挿入されてしまいます。 「一行改行」を行うためには Shift+Enter キー を押す必要があります。 実際に試してみてください。
</div>
<div contenteditable="true">
<div>

この中に入れた 文字や画像 が編集可能になります。
この書き方のように <div> </div> を入れておくと、IE でも 「一行改行」 がそのまま行えます。 この方が便利で使いやすいですね!
参考 : 編集可能な Div で行間を 1 行にする方法
http://msdn.microsoft.com/ja-jp/library/bb250508(VS.85).aspx

でも... <p> が入るのが分かっているので、無駄な div などは入れず、
div class="htmlbox" contenteditable="true"
とか、適当なクラス名を付け、その部分の 「見えない<p>」 に予め margin:0; などを設定しておくのがベストかも。。。

</div>
</div>

[ 関連記事 : contenteditable (直接編集) の傾向と対策 ]

↑ 上のソースのまま使うと javascript が無効 (スクリプトOFF) の環境でも問題なく機能します...が、 W3C の構文チェック (The W3C Markup Validation Service) では contenteditable はエラーと指摘されます。 スクリプト(document.write) を使えば、この問題は回避できますが...何となく無駄な気も。。。

2. 文字や画像の 直接編集ができるページ を作る方法
(Web閲覧者編)

編集したいページを開いた状態で、そのページのアドレスバーに

と一行で入れて Enter (エンターキー) を押せばOKです。
元のページに戻したい時には 更新 (リロード) をしてください。


追記 : 2009/07/31
FC2ブログの共有プラグインに、この 直接編集モードにする が登録されました! FC2ブログユーザーの方はよかったらどうぞ。

[ 関連記事 : contenteditable (直接編集) の傾向と対策 ]
[ 関連記事 : プラグインはダウンロードしなくても使えます! ]

キーワード検索 : 直接編集  contenteditable  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

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

2008/11/10 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

-0 Comment

コメントを投稿する 記事: Web上で直接編集できる文字や画像


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。