HTMLや画像編集の手間を省く為の8つのツール
サイトを運営していると、CSSや画像の編集などのメンドイ作業にしょっちゅうブチ当たることになります。その中には、これだけは苦手なんだ、っていう作業が一つはあるのではないでしょうか（私だけ？）。
そんな作業を楽チンにしてくれる無料ツールをまとめて紹介です。
テーブルタグの表を生成
■エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
読んで字のごとく、.csvをテーブルタグに変換しちゃうツールです。
やり方は簡単でエクセルでテーブルの元となるデータを入力し、それをコピペでサイトに貼りつけるだけでOKです。
こんなテーブルが簡単に出来上がります。
| price | function | operability | |
|---|---|---|---|
| PhotoShopCS4 | 99,750 | ★★★ | ★★★ |
| GIMP | Free | ★★★ | ★★ |
| Pixia | Free | ★ | ★★ |
背景色や文字色の設定もできます。
このように↓HTMLとともにCSSも生成される仕組みになっています。なので、cssだけ別ファイルに分けている人は移動させてください。
<style>table { border-collapse: collapse;}th { border: solid 1px #666666;color: #000000; background-color: #ff9999;}td { border: solid 1px #666666;color: #000000; background-color: #ffffff;}</style><table><thead><tr><th></th><th>price</th><th>function</th><th>operability</th></tr></thead><tbody><tr><th>PhotoShopCS4</th><td>99,750</td><td>★★★</td><td>★★★</td></tr><tr><th>GIMP </th><td>Free</td><td>★★★</td><td>★★</td></tr><tr><th>Pixia</th><td>Free</td><td>★</td><td>★★</td></tr></tbody></table>
ちなみに、もっとシンプルに使いたいんだという方はこちらもどうぞ
設定出来るところは少ないですが、自分で編集できる人はこちらの方が良いかも。
HTML特殊文字をマークアップ文字に一発変換
HTML特殊文字を手動で変換するとなると、それはまさに、大阪から東京まで歩いて行くようなもの。それくらい辛い作業であります（いや、ホントに）。
しかし、タグをそのままの状態でブログなどでシェアしたい時など、この作業は欠かせません。（前項のテーブルタグの“引用”部分も特殊文字からマークアップ文字に変換しています）
そんな時、超便利なのがこちらのHTML特殊文字変換ツールです。
変換したい特殊文字をコピーして、フォームに貼り付け「変換」ボタンを押せばOKです。変換したタグは、HTMLファイルにそのまま載せても大丈夫です。
背景画像が生成出来るジェネレータ
フォトショップを開くまでも無いシンプルな背景ならこちらのツールで作れます。
４種類のタイプ（スラッシュ、ストライプ、ドット、グラデーション）からマージンや色、サイズを選ぶだけです。
こちらのツールはストライプの太さを調節出来ます。
CSSメニューボタンを生成するツール
メニューボタンの画像とHTML/CSSを生成してくれるジェネレータ。
縦横メニュー、またはボタンのタイプも選択出来ます。
ダウンロードすると、ボタン画像とこんな感じのタグもそのまま入っていますので、後は自サイトに埋め込むのみとなっています。
CSS
#menu ul,#menu li { margin:0; padding:0; } #menu li {list-style:none;float:left;} #menu a { display:block;margin:0 auto;color:#fff;text-decoration:none; background:url(_right.png) right top no-at;} #menu a span { display:block;text-align:center;background:url(_left.png) left top no-repeat; font:bold 12px/ Arial, Helvetica, sans-serif; padding:0 20px; } #menu a:hover { background-position:right bottom;text-decoration:underline} #menu a:hover span { background-position:left bottom; }
HTML
<div id="menu"><ul><li><a href="http://menubuilder.me"><span>Home</span></a></li><li><a href="http://menubuilder.me"><span>About</span></a></li><li><a href="http://menubuilder.me"><span>Blog</span></a></li><li><a href="http://menubuilder.me"><span>Contact</span></a></li></ul></div>
カウントダウンタイマーのスクリプト生成
カウントダウンタイマーを作るツールですが、かなり自由度が高いです。
計測単位、文字色、背景色、サイズ、言語いろいろ変えられますので、販売サイトやブログパーツの部品など様々な方法に凡庸が効きそうです。
とってもインスタントな問い合わせフォーム
驚くほど簡単に、それなりにしっかりした問い合わせフォームが完成します。
例えば、こんなフォームが作れます。
日本語も入力出来ますので、ご自身で入れたい文章をサイト左側で入力して、「GENETARE!」ボタンを押すだけです。あとは、「Download it FREE」のリンクを押せば、データをダンロードすることが出来ます。
他にもまだまだありますが、体を労って今日はこの辺で。笑
■関連記事
この記事にトラックバックする(FC2ブログユーザー)