画像置換とSEO
画像置換とSEO 画像置換の話題がはやっているようですのが、SEOに関して肝心なところ出てきていないようですので補足しておきます。 ひとまず、関連エントリーのまとめ 画像置換乱用してませんか？ | THE HAM MEDIA 画像置換について « grandes cedro 画像置換について考えてみました｜linker journal｜linker ここからが本文。 結論から書くとGoogleはaltもテキストも同等に扱う為、SEO上のメリットはありません。あったとしても計測できないほどの微々たるものです。 ただ、Yahooはaltに関してまったく評価されません。 つまり、画像のaltにのみキーワードがあるような場合は検索結果に登場しません。 また、a要素に包まれたテキスト、アンカーテキストと呼ばれるものですが、これは現在のSEOで結構重要なポジションにある要因なので、これが評価されていな
IE6,7,8の確認ツールの決定版!?Microsoft Expression Web SuperPreview
IE6,7,8の確認ツールの決定版!?Microsoft Expression Web SuperPreview マイクロソフトのWEBオーサリングツール「Microsoft Expression Web 2」の次期バージョンに含まれる新機能Microsoft Expression Web SuperPreviewがベータ版として公開されました。 このSuperPreviewを利用すればIE6,7,8での検証作業が可能です。(製品版にはFirefox、Safariなども搭載予定) 公式ブログよりダウンロード可能で、インストールには.Net 3.5 frameworkが必要なので結構時間がかかります。 (インストーラーを実行すると最初に.Net 3.5 frameworkをインストールし再起動、次にインストーラーを実行するとSuperPreviewがインストールされる) 検証ブラウザの切り替
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
Movable TypeとWordpressについて
Movable TypeとWordpressについて 最近はMovable TypeからWordpressへの移行がはやっているようですね。 [N] Movable TypeからWordPress移行の波がくる？ ブログをMovableTypeからWordPressに移行しました - trick7 ブログをMT(3.32)からWordPressに移行しました : akiyan.com 固定リンクを変えずにスムーズにMovableTypeからWordPressに移行するまでの作業ログ 個人的にどちらも愛用しているのですが、どちらもよいCMSですよね。 ちょっと私なりにMovable TypeとWordpressの違いをまとめてみたいと思います。 Googleトレンド ネタフルさんでも利用されているGoogle トレンドでもう少しトレンドを分析してみたいと思います。 Movable Typeと
Subversionのインストール
Subversionのインストール Subversionのインストールから利用方法、Dreamweaver CS4との連携まで解説したいと思います。 まずはSubversionのインストールを行います。 Windowsの場合はTortoiseSVNを利用するのが、手軽で簡単でしょう。Vista、XP共に簡単にインストールが可能です。 ダウンロードページよりTortoiseSVNのインストーラーをダウンロードします。 ページ中頃にあるリンクからダウンロードを行います。 TortoiseSVNのダウンロードが終了したら、さらにダウンロードページを下に移動してLanguage packsをダウンロードしておきます。ダウンロードするのは当然Japaneseです。 ダウンロードがすんだらインストールを行っていきます。 ダウンロードしたTortoiseSVNのインストーラーをクリックしてインストールを
[MT4LP5]ユーザー指向の管理画面をつくる by 野田純生
[MT4LP5]ユーザー指向の管理画面をつくる by 野田純生 MT4LP5でお目当てのセッションの、アルファサード有限会社の野田純生さんによるのMT管理画面のカスタマイズに関するセッション。 以前、大阪でお話を伺ったときにかなり、参考になったので今回もかなり期待していました。 参考：Web屋さんのためのMovable Type4 なぜ管理画面をカスタマイズするのか 「概要」にエントリーの表示順を制御する通し番号を入力させる。これはクライアントは「仕方ない」と思っても「納得」はしていない。 ウィジェットなど意味のわからない単語が並んでいる。 管理画面をカスタマイズすることにより クライアントが直感的にわかるようになり、質問が減る、マニュアルが少なくてすむ、引継ぎが楽になると、みんながうれしい。 プログラミングを使わないカスタマイズ 管理画面は /mt/tmpl/cms以下のtmplファイル
MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン
MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン MTのテンプレート開発で再構築の工程が非常に不満だったので、テンプレート開発中は再構築を不要にするプラグインを作成しました。 以下のような条件で開発している方用のプラグインです。 ダイナミックパブリッシング環境で開発 テンプレートのファイルリンク機能を利用して開発 ダイナミックパブリッシング環境で開発 スタティックな環境で開発している方も多いと思いますが、あまり効率が良いとはいえません。 ダイナミックパブリッシング環境で開発を行えば、再構築の作業を行わなくてもブラウザで確認を行うことが出来ます。 参考：MovableTypeにダイナミック・パブリッシングを設定する テンプレートのファイルリンク機能 MTのテンプレート管理画面でテンプレート管理画面で開発している方も多いと思いますが、これもあまり効率が良いとは
絶対に公開してはいけないPHPプログラミング
絶対に公開してはいけないPHPプログラミング ネタ元：AjaxMail：Ajaxを活用したフリーPHPメールフォーム これはひどいのに誰もつっこみを入れていないので、ツッコミを入れておきます。 セキュリティーフィックスされたました。 AjaxMailを利用しているサイトはスパムメールの踏み台にされます。 送信プログラムであるsendmail.phpの 150行目でPOSTで受け取ったアドレスをそのまま変数に入れて、 $reto = $_POST['email']; 168行目で直接メール関数に利用している。 if($remail == 1) { mail($reto,$resbj,$rebody,$reheader); } ありえない。 mail関数の第一引数には送信先のメールアドレスを設定できるのですが、カンマ区切りで複数のメールアドレスが指定できます。 リターンメールの性質上、リファラ
jQuery版のLightBox「ThickBox」
jQuery版のLightBox「ThickBox」 ThickBoxはLightBoxのjQuery版とも言えるJavaScriptライブラリで、画像をクリックするこのにより拡大画像を表示させることが可能です。 LightBoxがprototype.jsをベースに開発されたjsライブラリであるのに対して、ThickBoxはjQueryをベースに開発されています。 設置方法 配布ページよりjquery.jsとloadingAnimation.gif、thickbox.css、thickbox.jsというファイルをダウンロードし、ThickBoxを利用したいhtmlのhead要素などでそれらのファイルを読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"
javascriptなしで背景が透けるカラムを実装するスタイルシート
javascriptなしで背景が透けるカラムを実装するスタイルシート ネタ元:背景が透けるカラムを実装するスタイルシート このやり方も素敵なんですが、JavaScriptなしで余計なdiv要素を追加せずに再現できる方法を紹介します。 サンプル 特に難しいことはしていないですが、カラムの背景を透過pngで指定しています。 透過pngに対応していないIEに関してはfilterで代用しています。 参考：IEとそれ以外のブラウザでアルファ画像を使う方法 #main,#navi{ background:url(alpha.png); } * html #main{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale'); background:none; } * h
Movable TypeでSEO対策-Feed編-
Movable TypeでSEO対策-Feed編- Movable TypeでSEOを行う際にRSSやAtomなどのフィードを最適化する方法です。 表示件数を変更する デフォルトですと最新15件の情報しか出力されません。 これではさすがに少ないのでもう少し増やしましょう 参考：MovableTypeでFeedの配信数を変更する あまり、増やしすぎてもFeedの情報量が多くなりすぎます。 私の場合はFeedBunerのフィードの最大サイズの関係もあり、 部分配信の場合は200件、全文配信の場合は50件 という目安で配信しています。 アーカイブテンプレートでRSSを配信する。 カテゴリーごとにFeedを配信するのも効果的です。 トップメニューのデザインからテンプレートを選択。 左にあるクイックフィルタよりアーカイブテンプレートを選択。 アーカイブテンプレートを作成からブログ記事リストを選びます
Movable Typeの再構築 高速化いろいろ
Movable Typeの再構築 高速化いろいろ Movable Typeの再構築を高速化する方法をいくつかご紹介します。 インデックステンプレートの再構築オプションをはずす インデックステンプレートを表示した際に、すべてのテンプレートに緑のチェックが入っていませんか？ これは再構築オプションといって、ブログの投稿や編集、インデックスの再構築を行ったときにそのファイルを再生成するというオプションです。 メインページやアーカイブインデックス、RSSといった類は仕方ないのですがスタイルシートやjsファイルなどの一度生成したら更新しなくていいものは再構築オプションを外してしまいましょう。 はずし方は、テンプレート名をクリックしてテンプレートを編集する際に、下にある『再構築オプション』のチェックを外してください。 不要なMTタグの除去 テンプレート内にはブログの設定を反映させるタグがいくつかありま
非常に美しいcoverflowスライドギャラリー『ImageFlow』
非常に美しいcoverflowスライドギャラリー『ImageFlow』 ImageFlowはPHPとJavaScriptで作られている非常に美しいcoverflowスライドギャラリーです。 設置方法 配布サイトより関連ファイルをダウンロードし、サーバーにアップします。 スライドギャラリーを利用したいページのhead要素内で『screen.css』と『imageflow.js』を読み込みます。 <link rel="stylesheet" title="Standard" href="screen.css" type="text/css" media="screen" /> <script language="JavaScript" type="text/javascript" src="imageflow.js"></script> スライドを利用したい箇所に以下のHTMLコードを記述しま
Movable Type で画像挿入をきれいにする「StylelessImage」
Movable Type で画像挿入をきれいにする「StylelessImage」 Movable Type4では画像挿入を使いFTPなどを使わずに画像をアップロードできるのですが、これがちょっと曲者です。 画像挿入に挿入されるHTMLソースは以下のような感じになります。 <form mt:asset-id="1" class="mt-enclosure mt-enclosure-image"> <img alt="画像挿入" src="http://blog.webcreativepark.net/img/20071023_01.jpg" width="500" height="361" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/> </form> デフォルトですとimg要素にclassが自動的に挿
ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js
ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js Dynamiclayout.jsはウィンドウサイズに合わせて読み込むCSSファイルを変更できるJavaScriptライブラリになります。 dを使用することにより、リキッドイアウトの幅を広げることが可能です。 設置方法 ダウンロードしたdynamiclayout.jsをhead要素などで読み込みます。 <script src="./dynamiclayout.js" type="text/javascript"></script> ウィンドウ幅に合わせたCSSファイルを用意します。 それぞれのCSSファイルを読み込む際にはtitle属性に ウィンドウ幅が750pxまでの場合の『thin』 ウィンドウ幅が950pxまでの場合の『wide』 ウィンドウ幅が950pxより大きい場合の『wider』 を付けて読み込みます。
MovableTypeにお問い合わせフォームを設置
MovableTypeにお問い合わせフォームを設置 MovableTypeにお問い合わせフォームを設置できるメールフォームプラグインをご紹介。 インストール ダウンロードしたMailForm_1_30.zipを解凍すると、MailFormというディレクトリが作成されます。 FTPでMovableTypeをインストールしたサイトにアクセスして、解凍したMailFormディレクトリをpluginsディレクトリにアップロードします。 MailForm内のmt-mail-form.cgiのパーミッションを変更します。(755とか700に) テンプレートの作成 ヘッダーメニューのデザイン ＞ テンプレート から「ブログのテンプレート」へ。 『インデックステンプレートを作成』から新規にテンプレートを作成します。 メールフォームを表示したい箇所に以下のような記述を行います。 出力ファイル名(これがお問い
LightBox風にコンテンツを表示するModalbox
LightBox風にコンテンツを表示するModalbox ModalboxはLightBox風にコンテンツを表示するjavascriptライブラリになります。 Modalboxを使えば画面遷移することなく、コンテンツを表示する事が可能です。 設定方法 Modalboxはprototype.jsとscriptaculous.jsを利用しています。 ダウンロードしたprototype.jsとscriptaculous.js、そしてmodalbox.jsをhead要素などで読み込みます。 <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="lib/scriptaculous.js"></script> <script type="text/javas
SBMのrel=
SBMのrel="nofollow"について考えてみる Buzzurlとlivedoor クリップが外部リンクにrel="nofollow"をつけたとの事で、各SBMサービス(+はてなブックマーク)のSEOについて調べてみました。 title要素 Buzzurl 「オリジナルのタイトル」- Buzzurl [バザール] / ソーシャルブックマーク livedoor クリップ livedoor クリップ - オリジナルのタイトル はてなブックマーク はてなブックマーク - オリジナルのタイトル Buzzurlの場合、オリジナルのタイトルが先に表示されているので、検索エンジンにオリジナルとBuzzurl内に複製されたコンテンツがともに表示されたら、どっちがオリジナルか分かりにくいですね。 h○要素 はてなブックマークはh1要素に、Buzzurlはh2要素に、livedoor クリップはh3要素
MovableType3.34から4.01へのアップデート
MovableType3.34から4.01へのアップデート MovableTypeも4.01と若干安定したと思いますのでアップデートを行いました。 当初、別のディレクトリで新規にMovableTypeを構築して既存のMovableTypeよりデータを移行、その後ドメインを新規のディレクトリに向けるという作業を行おうと思ったのですが(この方法が一番安全にサイトを停止せずにアップデートできる為)、MobaleTypeの3.3はurlとtagのエクスポートができないようです。 urlはタイムスタンプより生成しているので問題ないのですが、tagを手動で再設定は非常にめんどくさいので、既存のMovableTypeを直接アップデートしました。 ディレクトリのバックアップ FTPでMovableTypeをインストールしているディレクトリにアクセスして、すべてをダウンロードします。 DBのバックアップ M
ユーザーがページのどこをクリックしたか解析するツール[to-R]
ユーザーがページのどこをクリックしたか解析するツール ユーザーがどのようにサイトを巡回しているかはアクセス解析なのでわかりますが、ページのどこをクリックしたかも知りたくないでしょうか？ 今回は、ページのどこがクリックされたかを解析するツールを紹介します。 Crazy EggはwebページにJavaScriptのコードを一行追加するだけでwebページのどこがクリックされているかを解析できるおもしろいツールです。 ちなみにto-Rを解析した所、このような結果になりました。 最初のエントリーの『続きを読む』にクリックが集中してますね。 CSSのカテゴリーページも結構人気っぽいです。 お約束として『パーマリンク』を用意しているのですが全くクリックされていませんので必要なさそうですね。 などアクセス解析やデザインを見ているだけではなかなか見えないwebサイトの性質が見えてきます。 セットアップ まず
![ユーザーがページのどこをクリックしたか解析するツール[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0330939009a892e86a58d7eebfca00c0ecd1fe43/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimg%2F20070820_01.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
