08 | 2017/09 |  10

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

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

 

エントリイの最初の200文字をタイトルmouseoverでpopupする

 <!--index_area-->ブロック変数による独自の表紙頁を作り、まずは最近のエントリイのタイトルリストを掲載した。ここにおいて、悩ましかったのはタイトルを見てちょっと興味を持った場合に、タイトルをクリックしてエントリイを実際に開くまでもなく、エントリイの一部を閲覧させることは出来ないか、という点であった。

-------完成図---------
EntryTitlePopup.jpg
タイトルonmouseover状態で白いpopup窓が表示されている。
-----------------------


 最も簡単な方法は、title属性を使うことであることは言を待たない。しかも、最初の200文字を抜粋する<%topentry_discription>という便利な単変数も用意されている。
 実際、title属性を利用したpopupは、リンクタグの属性値として、title="<%topentry_discription>"と記述するだけで、mouseover時にpopup表示が出来るので、fc2Blogの様々なテンプレートでふんだんに活用されている。
 しかし、title属性によるpopupは、(1)Gekkoエンジンブラウザの場合には一行しか表示されない、(2)全てのブラウザにおいて一定の時間が経過すると消えてしまう、という短所、限界がある。popupされた文字をじっくり読もうと思っても、ユーザーを待つことなく冷酷に勝手に消えてしまうpopupは余りに不親切であり、また煩わしい。読み切ることが出来ないpopupならば、いっそない方がすっきりするというものだ。
 そこで、この不親切なtitle属性は使わず、mouseoutしない限り消えることがなく、popup幅も位置もコントロール出来るエントリイ部分きりだしpopupをJavascriptで作ろうと考えた。
 -----------------------------
 さて、昨晩そう思ったときには、数時間もあれば直ぐに完成するだろうと踏んでいた。
 ところが、ところがである。このスクリプト作成は私にとっては初めての難題を孕んでいたのだった。
 それは、HTMLから取得したい文字列内に改行コードがある場合の、当該文字列の取得方法を知らなかったこと、これである。 関数の引数として<%topentry_discription>を与えて、popup用の関数で表示すればよいと簡単に考えていた。だから直ぐに出来上がると思いこんでいた。しかし、<%topentry_discription>内には、一般に改行コードが入っている場合が多々あり、その場合にはスクリプトエラーとなってしまうのだ。当然目的としたpopupはうんとも寸とも言わない。
 所期の関数が一切機能しないのである。
 -----------------------------
 改行コード(改行タグではない)が入っている文字列のJavascriptへの引き渡し───この問題にはこれまで遭遇することがなかった。かくしてジャバスクリプト関連サイトのサーフィンを開始したのだ。半日以上掛けて・・・。
 しかし、結局目的とするサイトは発見できず(Google による検索方法が不適切だったのだろう)、夕食を前に疲れ切り、諦念が湧き上がってきた。
 そんな状況の中でふと閃いたのだ。innerHTMLがあるではないか!どうして思いつかなかったのだ。これを活用して何とか出来ないか。!!


 【解決策説明】
 innerHTMLを使ってJavascriptで文字列を取得するには、対象となる文字列がHTML内になければ始まらない。
 しかし、エントリイタイトルだけのindex_areaブロック変数エリアに本文はない。
 そこで、各エントリイタイトルをその内容とするLI要素内に、DIV要素をつくりdisplay:noneでそれを隠蔽し、その内容として<%topentry_discription>を出力させることにした。こうすればエントリイの最初の200文字を、表示することなくしかしHTML内にはき出させることになる。
 後は、Javascriptでdiv要素内の200文字を取得すれば、後は随所で利用しているpopup関数を使えばよい、たったこれだけのことであった。

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/211-946c2f75

デザインなど変更に挑戦

今日はこのブログのデザインなどを変更してみた。基本的なところはカラーと画像の変更。イメージとしては「レーシングパーツ」かな?で、ついでに色々と追加してみたので参考にさせて頂いたサイトなどを紹介。まず最初に広告を少し増やしてみました。と言っても半分は自分の

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

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