Yahooの検索順位を表示するGreasemonkeyスクリプト
Yahooの検索順位を表示するGreasemonkeyスクリプト 今までYahoo!で検索結果に順番が振られていたのですが、つい先日から順番が表示されなくなりました。 これでは少し不便ですので、Yahooの検索順位を表示するGreasemonkeyスクリプトを作成しましたので、必要な方はお使いください。 numberyahooresults.user.jsをインストール Greasemonkeyスクリプトの利用方法は姉妹スクリプトのnumbergoogleresults.user.jsで詳しく説明しているのでそちらを参考にしてください。 普段から検索結果の順位を見るクセを付けておけば、色々と見えてくるものもあると思いますので。 関連エントリー Greasemonkeyを使いGoogleの検索順位を表示する方法 Googleに挑むYahoo!Japan 関連キーワードを探すキーワードアドバイ
WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました
WEB製作者の為のSEOチートシート SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました。 重要なHTML要素 title要素にキーワードを含みましょう。 h1,h2,h3要素にキーワードを含みましょう。 b要素、strong要素でキーワードを包みましょう。 img要素のalt属性、ファイル名にキーワードを含みましょう。 a要素のtitle属性、アンカーテキストにはキーワードを含ませましょう。 a要素のnofollowを上手に使いましょう。 インデクシングに関する限界 ページのファイルサイズは150KB以下にしましょう。 ページ内のリンクは100個以内にしましょう。 title要素は70文字(半角)以内にしましょう。 meta要素のdescriptionは155文字（半角）以内にしましょう。 URLの含まれるパラメーターは2個以内にしましょう。 ディレクトリの
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
MTで特定のカテゴリーのみテンプレートに反映させる方法
MTで特定のカテゴリーのみテンプレートに反映させる方法 MTで特定のカテゴリーのみテンプレートを変更したい場合の処理 <MTIfArchiveType archive_type="Category"> <MTIfCategory name="カテゴリー名"> 処理 </MTIfCategory> </MTIfArchiveType> 特定の親カテゴリーを持つもののみ変更したい場合は以下のようにになります。 <MTIfArchiveType archive_type="Category"> <MTParentCategory> <MTIfCategory name="親カテゴリー名"> 処理 </MTIfCategory> </MTParentCategory> </MTIfArchiveType> スポンサードリンク to-Rについて JavaScriptやCSS、React/Angula
VistaにXAMPPをインストールする際の注意点
VistaにXAMPPをインストールする際の注意点 ローカルサーバーでMTを構築する為に、Windows VistaにXAMPPをインストールしたのですが、結構手間取ったのでメモ書きしておきます。 通常のインストールに関しては以下のサイトを参考にしてください。 CMSを通じて学ぶMovable Type実践技法 私の環境の場合 Vistaだからか、私の環境固有の問題かわからないのですが、上記のページの方法ではインストールできませんでした。 (検索した際の情報量の少なさから言って私の環境固有の問題っぽいのですが) perlアドオンがインストールできない インストールするXAMPPですが最新版の1.6.5ですとperlアドオンがインストールできません。 旧バージョンのページで1.6.2をダウンロードしてインストールすればperlアドオンのインストールに成功します。 ちゃんと設定したのにエラーが
マウスオーバーで英単語の意味を教えてくれるFirefoxアドオン『FireDictionary』
マウスオーバーで英単語の意味を教えてくれるFirefoxアドオン『FireDictionary』 英語サイトを見る際に色々な辞書サービスを利用してきたのですが、私の場合最終的にはFirefoxの拡張『FireDictionary』に行き着きました。 FireDictionaryを起動しておけば、サイト内の英単語にマウスを乗せた際に、サイドのFireDictionaryに英単語の意味が表示されます。 インストール方法 FireDictionary.comにFirefoxでアクセスします。 サイドメニューの『ダウンロード』よりダウンロードページに移動、画面中部にある『Install』ボタンをクリックします。 画面上部に『あなたのコンピューターを保護するために、Firefoxにこのサイト(www.firedictionary.com)はソフトウェアのインストール要求ができない設定になっています』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
Mac始めました-AirMacとAOSSを接続する方法-
Mac始めました-AirMacとAOSSを接続する方法- MacBookを購入して今日からマカーになりました。 という訳でMacからの初投稿です。 なんか慣れないOSだと文字入力も違和感がありますね。 Macネタ初投稿としてインターネットに繋げるまでに時間がかかったので、そのことに書きます。 まず、私の家のネットの構成ですが、無線ルーターに有線でPC2台とFaxを接続、無線でノートPC(win)とWiiとDSを接続しています。 無線には、バッファローのAireStation AOSSという接続方法を使って接続していますが、AOSSは標準ではAirMacに対応してなかったようです。 （バッファローの独自機能なので当然といえば当然ですが） 無線の設定をWEPに変更すれば接続できそうですが、WiiやDSが対応してなさそうなので微妙。 調べたら以下のサイトに行き着きました。 MacBookのAir
macのマウスの速度を変更する。
macのマウスの速度を変更する。 Macのマウス速度が非常に遅い。 環境設定より一番速い設定にしても、遅い。。。 いろいろ調べたところ、「アプリケーション」>「ユーティリティ」>「ターミナル」より、 defaults write "Apple Global Domain" com.apple.mouse.scaling 8.5 と入力すればマウスの速度を変更できるようです。 まだ、マウスの加速度がない時の早さが気になるといえば気になるのですが。。。 関連エントリー マウスの速度を変更したら非常に快適 Mac始めました-AirMacとAOSSを接続する方法- スポンサードリンク to-Rについて JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。 書いてる人 西畑一馬 (株式会社トゥーアール) 代表取締役/フロントエンドエンジニア 株式会社トゥ
【Adobe Spry TIPS】 アコーディオン
【Adobe Spry TIPS】 アコーディオン Spryにはウィジェットとして様々な機能が提供されています。 そのうちの１つが『アコーディオン』です。 アコーディオンとはクリックで、コンテンツを開いたり閉じたりする特徴的なUIになります。 この機能を使うには、まず、widgetsディレクトリ内のaccordionディレクトリ内のSpryAccordion.jsをhead要素などで読み込みます。 また、addLoadListenerを利用する為、SpryDOMUtils.jsも読み込んでおきます。 <script type="text/javascript" src="./widgets/accordion/SpryAccordion.js"></script> <script type="text/javascript" src="./includes/SpryDOMUtils.js"
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
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
FFFTPの最新バージョンがすごく便利
FFFTPの最新バージョンがすごく便利 普段業務でFTPソフトにFFFTPを使用しているのですが、最新バージョンがすごく便利になってました。 サブディレクトリを含めたファイルの転送ができる ホスト側でファイルやディレクトリをドラッグで、サーバー内のサブディレクトリに移動できるようになってます。 また、ローカル側でデスクトップなどに、ドラックでファイルを移動(正確にはコピー)できるようになってます。 FFFTPをエクスプローラー代わりにも使用することが多いので、このバージョンアップはかなり重宝します。 こういうミニアプリのバージョンアップ情報は、なかなか流れてこないのでバージョンアップする機会が少ないですよね。 個人的には、あとタブ化できるようになると言うことなしなのですが・・・・ 関連エントリー FFFTPを10倍早く使う為のショートカット FFFTPでFTPがつながらない場合 FFFTP
ユーザーがページのどこをクリックしたか解析するツール[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)
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
