2009年10月の記事一覧

HTML文書の文法チェックが可能な、Another HTML-lint gatewayのご紹介です。
既に有名なサイトではありますが、WordPressを利用してサイト構築されている
方にとって、エラーチェックもできる有益なサイトと言えます。

このサイトの良いところは、チェックをしたいURLを直接はりつけて、その場で
すぐに調べることができます。非常に簡単に使うことが可能です。

目視で、レイアウトの不自然さが確認できればよいのですが、意外と
見落としています。なんとなく、違和感があるなぁと思うときは、
Another HTML-lint gateway
でサイトチェックをしてみましょう。

Another HTML-lint gatewayと検索すれば、現れますので調べてみてください。
以下使い方です。

---

URLの部分に、自サイトを入力してチェック。

---

するとなにやら、総合得点やら、エラー表示を指摘してくれます。
エラーを指摘してくれますので、ウィザードに沿って直していけばOKです。
僕は基本的に、三カ月に一度ぐらいのペースでエラーチェックしています。

意外とエラーが多くて吃驚することあるんですよね。
目視で見ると、違和感に感じているレイアウトの部分が、エラーチェックに沿って
直していくと、レイアウト全体が整っていく様は、非常に気持ちいいもんですよ。

エラーチェック

サイト制作をしていて、簡単に見出しを綺麗にすることって意外と
難しいですよね。headerに使用する画像ならば、多少時間はかかっても
良いのですが、見出しの画像まで作っていると非常に手間がかかります。

【今回、CSSを用いて簡単に、シンプルではありますが、どんなサイト
デザインにも合いそうなものを紹介します。】既に既出の部分もあるでしょうが、備忘録と言うことで。

全て画像は用いていません。CSSでコントロールしてますので、シンプルにまとまっています。逆にシンプルだからこそ新鮮にうつります。

baseとなる、CSSはこちらになります。お使いのスタイルシートにでも張りつけて、ご自分のお好みに
合わせて細かく調整してみてください。

---

h2{
margin: 0 0 1.7em 0;
padding: 0.1em 10px;
border-top: 0px solid #000;
border-right: 0px solid #000;
border-bottom: 1px solid#000;
border-left: 2px solid #000;
background: #fff;
font-size: 1.4em;
font-weight: bold;
line-height: 1.4em;
color: #000;
}

簡単な説明だけしておきます。
borderの部分は、枠のことです。値を大きくすれば太くなります。

font-size　文字の大きさ
line-height　高さ

一度全部の値を変更してみて、ご自分で確認してみると分かりやすいと思います。

---

破線や、点線で表現しようと思えば、borderの部分を変更すれば可能。

dashed(破線)
dotted(点線)

---

backgroundの部分に、好きな色を指定すれば、下記のようにも変更できます。
若干青みをかけてます。

---

アイデア次第では、他にも色々面白そうな見出しが作れると思いますので、是非挑戦してみてください。

見出し関連記事一覧

タイトル・見出しに使えるデザインまとめ | DesignWalker
見出しをCSSでシンプルに装飾するtips – EC studio デザインブログ

css

タグクラウドを3Dにすることができる、WP-Cumulusを使ってみました。
swfファイルを利用して、タグがぐるぐる回ります。
見た感じにもインパクトがあり、興味のある方は導入してみてください。

私も先ほどまで入れていたのですが、サイトが若干重くなるので、現在は外しています。
当サイトは、トップにflashを使用してますので、WP-Cumulusも使うとなると、読み込み
に時間がかかるようなので。

以下導入手順です。

配布先に行ってもらい、WP-Cumulusをダウンロードします。
日本語表示に対応させるためには、ぷるぷるダーツ日記さんのサイトに行ってもらい、tagcloud.swfのファイルをダウンロードします。

続いて、WP-Cumulusフォルダの中に、tagcloud.swfを入れます。すると、元からあるファイルに上書きされると思います。終わりましたら、サーバーに転送します。

ダッシュボード内で、いつものようにチェックを入れます。

使用するには、<?php wp_cumulus_insert(); ?>

このコードを表示させたい場所に貼り付けます。
こんな感じにタグが表示されます。

---

また、ダッシュボード内のWP-Cumulus設定欄で、
タグクラウドの外枠の高さ、幅など細かく調整可能です。

---

高級感を演出したい方には、重宝するプラグインだと思います。