ホーム > ウェブ

ウェブのアーカイブ

リンクにアイコンを追加してくれる、 Iconizeを属性セレクタが使用できないIE6用にカスタマイズしてみる

Webで使用するリンク先には、HTML以外にも、PDFとかMP3とか色々な物がありますが、リンクを押す前に視覚的にそれらが何にリンクしているか分かると良いなと思います。リンクを押してみたら、PDFが開いて、時間がかかってイラッとした経験がある人も多いかと。そんな時に便利なライブラリとして、画面上のリンクのURIから自動的にアイコンを追加してくれるIconize Textlinks with CSS（Thanks pooliestudios）という物があります。でも、これ属性セレクタを使っているので対応していない、WindowsのIE6とかのブラウザではちゃんと動作しないのです。。。残念。そこで、属性セレクタを使わずにJavascriptを使用して作り変えてみました。使用方法を簡単にご説明。

  1. まずは下記からZIPファイルをダウンロードします。iconize.zip
  2. 解凍してできたiconizeフォルダを適当な場所にアップします。
  3. iconizeを適用したい画面のヘッダー部分でiconizeフォルダ内のiconize.cssとiconize.jsへのリンクを追加します。ファイルへのパスは自分の環境にあわせてください。
    1
    2
    3
    4
    <head>
    <link href="iconize.css" rel="stylesheet" type="text/css"/>
    <script src="iconize.js" language="javascript"></script>
    </head>
  4. 次にbodyタグのonloadでIconize.AddIcons()を読み込みます。
    1
    <body onload="Iconize.AddIcons()">
  5. あとは、追加した画面でリンクを設定すればアイコンが自動で追加されます。レイアウトはiconize.cssで変更できます。

結果はこんな感じでリンクに対して、色々なアイコンが表示されます。

PDFファイル

MP3ファイル

WindowsのIE6とFireFox2、MacintoshのSafari3とFireFox2での動作は確認しています。Javascriptとか得意では無いので、動かなかったらゴメンナサイ。。。と言い訳してみる。よろしければどうぞ。ライセンスはクリエイティブコモンズです。

HTMLエディタのopenWYSIWYGを日本語化してみる。

テキストボックスにHTMLエディタを実装する必要があったので、Javascriptで動作するHTMLエディタを探してみました。openWYSIWYG（Thanks openWebWare）というデザインも素敵なオープンソースのライブラリがあったので、ついでに主要な部分を日本語化してみました。せっかく作ったのでファイルを公開しておきます。＜変更点＞

  • Title属性や、フォント、サイズの画像など主要な部分を日本語化。（日本語化に伴って若干レイアウトも変更）
  • 文字コードをUTF-8
  • フォントの種類の並び替えをコメント化（日本語フォントを上部に表示させるため）

で、ふと思ってちゃんと検索してみると、すでに日本語化した物が公開されていましたよ！openWYSIWYG 日本向けカスタム版しかもryuzi_kambeさんのは、hr機能も追加されている！！WordPress Firefox オープンソース って(・∀・)イイ!!で、naviwave 店長さんが作られたのは、上記の機能にさらにテキストエリアのスタイルシートによる変更機能まで！！！僕のは一切機能追加していません。。。元ソースの単なる日本語版が欲しいかたは、下記からどうぞ。

openwysiwyg.zip

今度からはちゃんと探してから作りましょう。。。（反省）ライセンスはLGPLです。

WordPressの個別記事パーマリンクを変更してみる

WordPressは個別記事のURIを動的に生成しています。
ただし、デフォルトで設定されているURIはhttp://www.aguuu.com/?p=123の様に記事内容とは関係の無いURIが生成されてしまいます。
デフォルトのままでも特に問題はありませんが、SEOの観点から言うとURIには記事内容に関連するキーワードを含むのが良いとされているので、個別記事のURIを変更する事にしました。

まずは、管理画面から「各種設定　＞　パーマリンク設定」を選択します。
「パーマリンク構造の設定」には一般的なパーマリンクの設定が表示されていますが、今回はURIとして

例：2007年6月11日の記事の場合は

http://www.aguuu.com/archives/2007/06/＜記事の内容に関連するキーワード＞/

上記の様なURIを生成したいので、「独自表記を以下の入力欄に記述」を選択して、「カスタム構造」の中に下記の様にパーマリンクタグを設定します。
パーマリンクタグの設定

パーマリンクタグの意味については、Using Permalinksを参照してください。
しかし、このままでは「カスタム構造」で設定した「%postname%」の部分は記事を書く際のタイトルから生成されます。
日本語のタイトルを記述した場合には、URIエンコーディングされた文字列となってしまいます。
そこで、記事投稿時に右メニューにある「投稿スラッグ」に記事内容に関連したキーワードを半角英数字で入力すると「%postname%」の部分が「投稿スラッグ」の文字列で生成されます。
投稿スラッグ

これで目的のURIが設定される様になりましたが、同じ月に全く同じ文字列を「投稿スラッグ」に設定するとパーマリンクがユニークではなくなってしまうので、必ず違う文字列を「投稿スラッグ」に記述する様にしてください。

ホーム > ウェブ

メニュー
アプリ
Twitter
最近の投稿
カテゴリー
検索
フィード
メタ情報

ページの上部に戻る