登録したキーワードをCSSコントロールする方法

あるジャンルの記事を複数投稿してゆくと常用するキーワードが結構あることに気づく事があります。

そのキーワードが長くて入力を省略したい場合やスペルミスを減らす事ができる方法を紹介しようと思います。
当サイトでは、Javascriptコードを公開したりしているので、対応するブラウザを表示したりしているのですが、ブラウザの名称を省略して「Explorer」と書いたときに「Internet Explorer」と表示し、下図のようにアイコン表示させます。

他にも、「IE」も略語で同様の処理にしました。

IEだけだと他の単語内に混入しているIEすべてが変換されてしまうこともあるかもしれないキーワードなので、あえてIEの前に「＠」を付加してある時だけ変換対象としています。

この例では、省略したキーワードを省略前の単語へと変換していますが、省略したままにしておきマウスをキーワードに合わせた時にツールチップ情報として、省略前の単語を表示させることも可能です。

キーワードが増えてきたら動作が重くなると思いますので、データベースへキーワード登録しておいてJSONPで非同期処理させたりする必要が出てくると思いますが、現状では埋め込みのJavascriptで十分です。

※　スペルミスがあれば、意図したように動作しませんので投稿画面を見れば間違いに気付き易くなるメリットもあります。

var div = document.getElementById("post-body");
div.innerHTML = attachBrowser( div.innerHTML);

function attachBrowser( str ){
 str = str.replace( /@VS/g, '<abbr title="MicrosoftのVisualStudio2008やVisualWebDebelopper2008などの開発ツール"><span class="vs">DevTool</span></abbr>' );
 str = str.replace( /@Blogger/g, '<abbr title="Google無料ブログツール"><span class="blogger">Blogger</span></abbr>' );
 str = str.replace( /@Chrome/g, '<span class="chrome">Chrome</span>' );
 str = str.replace( /@Explorer/g, '<span class="explorer">Explorer</span>' );
 str = str.replace( /@IE/g, '<span class="explorer">Explorer</span>' );
 str = str.replace( /@Safari/g, '<span class="safari">Safari</span>' );
 str = str.replace( /@Firefox/g, '<span class="firefox">Firefox</span>' );
 str = str.replace( /@Opera/g, '<span class="opera">Opera</span>' );
 return str;
}

対応するCSS

アイコン画像は、直リンクはご遠慮下さい。
また、ハイパーハンズで使用している画像をダウンロードして使わずに、ご自身で作成したものを使用するかフリー素材サイトなどで取得し、ご自身のサーバへ配置したものをご使用下さい。
※ これらのアイコンの著作権はハイパーハンズにありません。

.blogger{
  color:#3333ff;
  font-weight: bold;
  background: url(http://lh3.ggpht.com/_BdRZoJ1uqRY/S76K9ET01OI/AAAAAAAABW0/JGBGklLOCG4/s128/blogger.png) no-repeat;
  padding-left:18px;
  color:#3333ff;
  font-weight: bold;
}

.chrome{
  color:#ff3333;
  font-weight: bold;
}
.chrome:before{
  content:'Google ';
  background: url(http://lh3.ggpht.com/_BdRZoJ1uqRY/S7552k0yyiI/AAAAAAAABWY/vL22X7HVM_w/ico_browser1_4.gif) no-repeat;
  padding-left:18px;
  color:#ff3333;
  font-weight: bold;
}

.firefox{
  color:#ff3333;
  font-weight: bold;
}
.firefox:before{
  content:'Mozilla ';
  background: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S7552oYpIxI/AAAAAAAABWQ/t4ALFzAgotY/ico_browser1_2.gif) no-repeat;
  padding-left:18px;
  color:#ff3333;
  font-weight: bold;
}


.explorer{
  color:#ff3333;
  font-weight: bold;
}
.explorer:before{
  content:'Internet ';
  background: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S7552RfSnKI/AAAAAAAABWM/vgF8gKs60mI/ico_browser1_1.gif) no-repeat;
  padding-left:18px;
  color:#ff3333;
  font-weight: bold;
}
.safari{
  color:#ff3333;
  font-weight: bold;
}
.safari:before{
  content:'Apple ';
  background: url(http://lh5.ggpht.com/_BdRZoJ1uqRY/S7552s5Y0rI/AAAAAAAABWU/rn4QIbm00TQ/ico_browser1_3.gif) no-repeat;
  padding-left:18px;
  color:#ff3333;
  font-weight: bold;
}
.opera{
  color:#ff3333;
  font-weight: bold;
background: url(http://lh3.ggpht.com/_BdRZoJ1uqRY/S7552oamxaI/AAAAAAAABWc/u853aFH4q6Y/ico_browser1_5.gif) no-repeat;
  padding-left:18px;
  color:#ff3333;
  font-weight: bold;
}

この記事へのリンク記事を自身のBloggerへ作成する

関連記事

Blogger

Javascript