2009 年 11 月 26 日 カテゴリー: a
SEOと title 属性と alt 属性
アンカーテキスト、alt 属性は、ともに SEO の観点から重要なものです。title 属性に関しては、調べる限り SEO に意味がないばかりか、a タグの title 属性と内部の img の alt 属性に同じテキストを指定するとペナルティになる場合すらあるようです。
ふと、本来alt 属性と title 属性はどのように使うものなのか疑問に思い、調べてみました。
alt属性の仕様
W3Cによると、alt 属性は、代替テキストとして定義されています。
For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the langattribute.
HTML 4.01 Specification : 13.8 How to specify alternate text
「この属性は、画像、フォーム、アプレットを表示できないユーザーのために、代替テキストを指定する。代替テキストの言語は、lang 属性で指定する。」とのこと。
title属性の仕様
title 属性は、補助情報を伝えるものとして定義されています。
The title attribute may be set for both A and LINK to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc.
HTML 4.01 Specification : 12 Links
「title 属性は A と Link の両方に指定することができ、リンクの性質情報を付加します。この情報は、ユーザーエージェントによって音声出力されたり、ツールチップとして読み込まれたり、カーソルイメージの変化によって伝えられます。」
かなり苦しい訳になってしまいました。余談ですが、W3Cのドキュメントに出てくる “user agent” はブラウザのことと思っていいのでしょうか？HTTPヘッダに含まれるユーザーエージェントではなさそうです。
alt 属性と title 属性の使い方
仕様を見た上で、alt属性と title 属性に同じテキストを指定することによるペナルティを考えると、単に本来の目的を無視した使い方をしているだけのように思えます。仕様に準拠した使い方をしていれば問題ないのではないでしょうか？
ただし、title 属性を有効に活用できてきる例はあまり見たことがありません。使い方はもう少し研究したほうがよさそうです。
カテゴリー: a , コメントはまだありません »
2009 年 11 月 5 日 カテゴリー: vba
ActiveSheet.Hyperlinks.Add Anchor:=ハイパーリンクの挿入位置, _
Address:=目的の文書, _
SubAddress:= 目的の文書内の位置, _
TextToDisplay:=表示文字列
Address
目的の文書（html、xls、doc等）のファイル名とそのファイルまでのパスを指定。
SubAddress
目的の文書内の位置を指定。Excelなら定義した名前やセル、htmlならidなど。省略可能。
TextToDisplay
ハイパーリンクを張る場所に表示するテキストを指定する。
ハイパーリンクを削除
Range(“A1″).Hyperlinks.Delete
Range(“A1″).ClearContents
カテゴリー: vba , コメントはまだありません »
2009 年 10 月 14 日 カテゴリー: Dreamweaver, html
今回初めて、Dreamweaver のテンプレート昨日を使ったWEBサイトの運用を試してみました。正直サーバーサイドでテンプレートからコンテンツを生成するCMSやsmartyのほうが好きなのですが、PHPなどが動かせないサーバー環境もあるので使い道はありそうです。
メニューがハイライトされるデザイン
Dreamweaver のテンプレートは、ネスト（階層化）することができて便利です。今回のサイトはグローバルメニューにハイライトがあたるようになっており、該当ページがそのメニューに含まれる場合、色が変わります。
このハイライトは、リストでマークアップしたグローバルメニューの a 要素にクラスを追加することで実現されています。つまり、グローバルメニューのコードは全ページ共通ではなく、ハイライトされる場所によって変わります。
Dreamweaver のテンプレートは条件分岐もできるため、通常はそれで OK になりそうです。しかし、今回のサイトは、サイドメニューがあり、そのサイドメニューにもハイライトがあたるようになっているため、より運用を簡単にするためには、グローバルメニュー = カテゴリ ごとにテンプレートを用意する必要がありました。
ネストされたテンプレート
そこで、コンテンツページに共通する部分を共通化するベーステンプレートと、ベーステンプレートをもとに、グローバルメニューのハイライトと、カテゴリ内で共通するサイドメニューを含む子テンプレートを作成してみました。
作成の方法は、「ファイル」-「新規」-「テンプレートから作成」でベーステンプレートから新規ドキュメントを開きます。その新規ドキュメントをテンプレートとして保存すると、子テンプレートを作ることができます。
また、ベーステンプレートの編集可能領域は、ネストされた子テンプレートに引き継がれます。ただし、その編集可能領域に新しいテンプレート領域（各種編集可能領域、編集可能にした属性を含む）を挿入すると、子テンプレート独自の編集可能エリアとなります。
基本テンプレート内の編集可能領域はネストされたテンプレートに継承されます。それらの領域に新しいテンプレート領域が挿入されない限り、ネストされたテンプレートから作成されるページでも、編集可能なまま保持されます。
Adobe Dreamweaver CS4 : ネストされたテンプレートについて
テンプレート構成
今回は、以下のような構成で、作成してみました。
その他はまったところ
複数の文字コードは対応していない？
このサイトは、メールフォームのみ shift-JIS 、その他のページが UTF-8 で作成されていました。デザインはメールフォームもコンテンツページも変わらないため、同じテンプレートで作成し、charset の値をDreamweaver の変数に設定して、ページ側で文字コードを設定できるようにしたのですが、見事にすべてのページが shift-JIS に変換されて泣きそうになりました。
そのほかの方法は試していないですが、複数の文字コードはサポートしていない気がします（未確認）。今回は、メールフォームのみテンプレートを使用しない方向で乗り切りました。
ページの作成は「新規ドキュメント」-「テンプレートから作成」で
最初はテンプレートから1ページ作成して、そのファイルをコピーしたりしていましたが、ページ内に必要ないTemplateparam タグやが残ったり、テンプレートプロパティの中に削除した項目が残ったり、よくない雰囲気でした。
おとなしく、「新規ドキュメント」-「テンプレートから作成」で新規ページを開き、そこにコンテンツを流しこむ方法が確実でした。
「編集可能にマークされていないコードに変更を加えました。これらの変更を保持しても、次回のテンプレート適用時にファイルが更新されて、これらの変更は失われます。それまで変更を保持しますか?」
しょっちゅう出る。いまだ原因がわからず。これに関しては、いずれまとめてみたい。
カテゴリー: Dreamweaver, html , コメントはまだありません »
2009 年 10 月 7 日 カテゴリー: html
ヘッダーの html タグに何気なく指定しているのですが、そもそも何なのかと。
html要素に dir="" を追加すると、文書全体の書字方向を指定できます。
TAG index : ページ全体の書字方向を指定する
ようするに、そのページが右から読むページか左から読むページかを明示するもののようです。日本語は左から右へ、アラビア語は右から左へ、その方向を指定するものですね。
カテゴリー: html , コメントはまだありません »
2009 年 10 月 6 日 カテゴリー: デザイン・ユーザビリティ
1. ラベルはフィールドの上に配置
2. フォーカスは視線の先に
3. デザインのクオリティは信頼を与える
4. ランディングページのスクロール
5. リンクはやっぱりブルー
6. 検索ボックスの文字数
7. ホワイトスペースの価値
8. ユーザビリティテストの重要性
9. プロダクトページは作りこむ
10. コンテンツのような広告
実用的なユーザビリティの10のポイント：ガイドライン編
コリスさんで上記のようなユーザビリティーに関するエントリをあげられていました。いくつかぐっときた項目があったのでメモしておきます。
ラベルはフィールドの上に配置
UX Mattersのレポートによると、フォームにおけるラベルの理想的な配置はフィールドの上です。
つい最近作ったフォームが、まさにtableを使って左にラベル、右にフィールドのレイアウトでした。このエントリを読んで、確かにラベルとフィールドを上下に配置すると見やすそうだなと反省しました。
メールフォームを作っていると中身のチェック処理に気を取られてHTML側のユーザビリティーがないがしろに。。気をつけます。
デザインのクオリティは信頼を与える
ウェブサイトの重要な役割の一つにユーザーに信頼を与えることがあります。
これは常日頃思うことです。細部に渡るまで、デザインの質のテンションを落とさないこと！
ランディングページのスクロール
useit.comのレポートによると、初めての訪問でどれぐらいスクロールするかというと、ビジターの23%という数字がでました。
これは、ビジターの77%がスクロールをしない、ということを意味しています。
もちろん想像は付きますが、77%がスクロールをしないというのはなかなかインパクトのある数字です。
日々のWeb作成で、頭の片隅に置いておこう。
カテゴリー: デザイン・ユーザビリティ , コメントはまだありません »
2009 年 10 月 2 日 カテゴリー: Wordpress, ソフトウエア
だいぶ前に設定した、このブログのテーマは反映されているのですが、新しく作った別のサイトでWindows Live Writer でテーマが取得できません。
調べてみたら、同様の症状の人はいるものの、解決策は見つかりませんでした。単純に編集用の CSS を指定できるようにしてくれればいいのに、、
それでも、オンラインのエディタよりはずっと便利なので使いますが、、
参考
Windows Live Writer + WordPress + wp.Vicuna Ext. Custom メモ
WordPress移行しちった
カテゴリー: Wordpress, ソフトウエア , 3 件のコメント »
2009 年 9 月 30 日 カテゴリー: Wordpress
自分用ナレッジベースとして、Wordpress でサイトを作ってみました。WEB に公開できるような完成度ではないような文章をためておければいいなと。
最初は、.htaccsess で Bsic認証をかけていたのですが、これでは Windows Live Writer で投稿できませんでした。そこで、Wordpress 側で認証できる仕組みを模索してみました。
今回使用したものは、プラグインではなく、/wp-blog-header.php のwp(); の直前に下記のコードを追記します。
if (is_user_logged_in()){
}
else {
auth_redirect();
};
コードの動作
is_user_logged_in() : ユーザーがログインしているかどうかを返す
→WordPress.org : Function Reference/is user logged in
auth_redirect() : ユーザーがログインしているかどうかを判別し、ログインしていなければログインページにリダイレクト。ログインに成功すれば、最初にアクセスを試みたページに再度リダイレクトする。
→WordPress.org : Function Reference/auth redirect
説明を見る限り、auth_redirect() のみでも閲覧制限をかけられそうですが、これだけでは正しいユーザー/パスワードを入力してもログインできなくなってしまいました。
この動作を見る限り、auth_redirect() はログインに成功した場合、遷移元のページにリダイレクトするので、ログインページ自体を遷移元と認識してしまって、ログイン成功→ログイン画面のループにはまっているのでしょうか？それともバグ？auth_redirect() を定義しているコードを読んでいないのでわかりません。。
いずれにせよ、ログインしているかどうかを、is_user_logged_in() で判別してから auth_redirect() を呼び出すことで期待通りの動作をさせることが可能になりました。
blog.sugulab.com : WordPressに認証をつける。
カテゴリー: Wordpress , コメントはまだありません »
2009 年 9 月 29 日 カテゴリー: レンタルサーバー
若干迷ったので記録しておきます。状況としては、さくらインターネットのスタンダードと、Valueドメインで取得した独自ドメインを使用しています。
- サーバコントロールパネル
- 左のメニューの「ドメイン設定」
- 「新しいドメインの追加」
- 「4. 他社で取得、または他社で管理中のドメインを移して使う」の「上記以外のドメインの場合」
- 「この項目は非推奨と、、」のメッセージが出るけどそのまま進む
- 他社で取得された独自ドメインへのサブドメインの追加
あとは、画面通りにディレクトリの指定などをして完了です。登録したサブドメインは 10分もしないくらいでアクセス可能でした。早いですね。
カテゴリー: レンタルサーバー , コメントはまだありません »
2009 年 8 月 28 日 カテゴリー: php
ini_set(); 関数を使うことで、一時的に php.ini の設定値を変更することができます。一時的にエラーを出力させたい時などに役立ちそう。
<?php
ini_set("display_errors", 1);
?>
カテゴリー: php , コメントはまだありません »
2009 年 8 月 16 日 カテゴリー: Wordpress, jQuery
このブログは階層構造をもつカテゴリのみをナビゲーションにしています。しかしカテゴリは増えるばかりで逆にわかりにくくなってきました。そこで、親カテゴリを残して、子カテゴリを開閉式のアコーディオンにしてみました。
目標とした動作
・子カテゴリ (孫カテゴリ以下を含む) を非表示に
・親カテゴリのリンクを無効化→子カテゴリの開閉に使う
$(document).ready(function(){
$('li.widget_categories>ul>li>ul').css('display','none');
$('li.widget_categories>ul>li>a').click(function(e){e.preventDefault()}).attr('href','#');
$('li.widget_categories>ul>li>a').click(function() {
$(this).next().slideToggle('slow');
});
});
問題は、子カテゴリのページに移動したときにそのカテゴリが展開されたままだとよいのですが。ページ遷移を超えるので、セッションとかクッキーとか使えばできるのでしょうが、めんどいのでとりあえず開閉のみ。
※追記、デザインを変えてからこの機能は付けていません。また、子カテゴリ（孫カテゴリ以下を含む）を非表示にするのをJavascriptで行っていますが、Jacascriptが実行される前までは表示されていて、実行されたタイミングで非表示になるので、cssで最初から非表示にしていたほうが良い気がします。
ただし、SEOの視点から見ると、display: none の指定はスパム判定の一因になる可能性もあるのでむずかしいところです。サイドバーのリンク集を displya: none にしたところで、いきなりスパム判定になるということもないでしょうけど。
カテゴリー: Wordpress, jQuery , コメントはまだありません »
