[CSSVista]IEとFirefoxで同時に表示確認

以前にMultiple_IEs(Internet Explorerを複数インストール)をご紹介しました際に触れましたとおり、複数のブラウザでサイトを確認するの機会が非常に多いのですが、今回はIEとFirefoxで同時に表示確認できる[CSSVista]をご紹介します。

What is it?
CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously. If you like this, you may be interested in our browser compatibility service, SiteVista. Yes, that’s why this software is free!

名前はCSSVistaですが、Windows XP でのみ動作するソフトのようです。興味がある方は下記URLからどうぞ。
http://www.sitevista.com/cssvista/
※インストールにはMicrosoft .NET Framework Version 2.0が必要となります。

導入手順(サイト見れば英語を読むまでもなくわかりますが)

  1. Microsoft .NET Framework Version 2.0をダウンロード&インストール
  2. CSSVistaをダウンロード&インストール

実際使ってみた感じ、インターフェースもわかりやすいし、良い感じだと思います。複数のブラウザを立ち上げるのがめんどくさい方や、メモリの関係上などにアプリケーションを絞りたい方にオススメです。
(各ブラウザの複数バージョンにも対応しているそうです。)


Tags:

Popularity: 14%

[SEO]WordPressでsitemap.xml(Google/Yahoo!)を生成する

昔一度入れてみたものの、ほとんど触っていなかったGoogle ウェブマスター ツール(Googleに対してサイト構造を渡してGoogle との相性の良いサイトにするためのツール)を再導入してみました。導入にあたって、手動でxmlファイルを作成するのが手間になるため、WordPressのプラグインによって自動生成する方法をとりました。いくつか調べたこともあるため備忘録としてメモを残します。
※現在ではGoogleのみではなくYahooもMSNもサイトマップの仕様を統一していますので、sitemap.xmlを作ることによって検索エンジンが効率よくクロールするはずです。
※プラグインで自動生成せず、手動で作成する場合はこちらをご参考にどうぞ。

Google Sitemap Generatorをインストールする。

  1. Google Sitemap Generatorをダウンロードし解凍します。
  2. [/wp-content/plugins/]に[/sitemap/]というディレクトリを作成し、[sitemap.php][sitemap.xsl]をアップロードします。
  3. [sitemap.xml][sitemap.xml.gz]を空ファイルで作成し、トップディレクトリにアップロードし、パーミッションを606に設定します。
  4. [管理画面>プラグイン]で[Google (XML) Sitemaps]を有効化します。
  5. [管理画面>各種設定>SiteMap]で設定をし[rebuild the sitemap]で作成します。

■続きの内容:「Yahoo!/Googleへのsitemap送信方法など」


Tags:

Popularity: 15%

CSS入門時にお薦め!HTMLとCSSを相互変換する

弊社がサイト制作するときは、ユーザビリティやSEOの観点からtableコーディングをすることはなく、基本的にCSSコーディングを行います。そうした場合、更新管理まで任せて頂くか、CMSを導入させていただければ問題がないのですが、一番難しいのが、

「HTMLタグならわかりますので、自分で更新管理はします!」
「制作ソフトを使えば簡単に更新できるんですよね??」

といったケース。(結構多いのですが、、)
そんなときにお薦めなのがこちらのCSS/HTML Converter
もちろん、CSSの基本概念は勉強して頂かなければなりませんが、細かい要素などはHTMLとの対応状況を見ながら視覚的に覚えることが可能。(更には覚えなくても使うことができる。)

≪変換例≫
HTML(変換前):<font color=”#ff0000″ size=”12″>イグニス</font>
CSS(変換後):.mystyle {font-size=”12″ color=”#ff0000″}

もちろん、CSSに慣れている人には必要がないツールですし、細かいところまでテストしていないので詳細は不明ではありますが、なかなか便利なツールの一つだと思うので、紹介しておきます。

HTMLとCSSを相互変換するツール:CSS/HTML Converter


Tags:

Popularity: 10%

Internet Explorer 6.0 用 CSSハック

マルチブラウザ対応でサイト構築をするとき、正しい構文でXHTMLやCSSを書いていれば、ある程度ブラウザに依存しないサイトができるのですが、まだまだIE6のシェアが多い昨今において、“正しいだけ”では思ったような表示ができないのも事実。そんなときに活躍するのが「CSSハック」。その中で今回は最もシェアが高いIE6のバグを回避する際にあてるもの。
IE6はCSSを正しく解釈してくれないバグが多いブラウザで有名なのですが、その中で子供セレクタ(「>」)を理解できないのを利用します。

.cont h2.class{
/*ここはIE6用を記述*/
color: red;
}
.cont>h2.class{
/*それ以外のモダンブラウザ(IE7やFireFoxなど)で書き換えたい内容を記述*/
color: blue;
}

(上記はサンプルですので、通常このように利用することはありませんが、)IE6では子供セレクタを読み込まないため、青に上書きされず赤のまま残り、それ以外のモダンブラウザだと、青で上書きされるため青が表示されます。


Tags:

Popularity: 9%

FLVファイルを単体で再生する

最近流行(?)の動画コンテンツに多く用いられる様になったFLV形式。FlashでもFlash Playerでも単体で再生することができず、通常自社で制作する場合は.fla .flv .swfが全部揃っているので問題はないのですが、プログレッシブダウンロード形式の.flvのみを入稿された場合、『手っ取り早くデータの再生状態のみを確認できると便利だなぁ…』と思いつつ探し当てた下記のソフトウェア。

FLVP
flvファイル(Flash Video)の再生が出来ます。設定とかはいりません。
≪基本機能≫
・ウィンドウへのドラック&ドロップ再生、実行ファイルへのドラック&ドロップ再生
・フルスクリーン化(解像度変更)
・シーク
・アスペクト比手動設定
・連続ファイル再生&プレイリスト保存
※Flash Player 8 以上が必要

使い方は本当に簡単で、解凍してできた[FLVP.exe]にドラッグ&ドロップするだけ。
便利です。


Tags:

Popularity: 8%

Page 4 of 6« First...«23456»