divというタグについて

Posted: 2009.11.15

XHTMLでホームページを作る際に必要不可欠なのがこの【div】というタグですが、いまいちなんなのか良くわからないという方に、ご説明させていただきます。

実際僕もXHTMLでコーディングを始めた際は、いまいちこのタグの意味をよく理解できていませんでした。

<div></div>で挟んでもなにが変るわけでもないので。

まぁ簡単に言えば【箱】です。

ちらばってるおもちゃを一度に移動するには箱に入れるのがてっとり早いですよね。

そんな感じでdivという箱に入れると、箱に入れたものを一度に左に移動させたり、背景を赤にできたり、文字の色を変えたりできるのです。

こう書くと【table】タグを同じような働き、といえるかもしれません。

ちなみにdivとはdivisionの略だそうです。

 

検索の順位を調べるのに便利なツールfrom yahoo!

Posted: 2009.11.8

サイトの検索順位を調べるのに便利なツールを発見しました。

blog_img_01

Yahoo!&Google検索順位ウィジェット

これはYahoo!で配布しているものでパソコンのディスクトップでいつでも好きなURLのYahoo!、Googleの検索順位が調べられます。

非常に便利ですが、パソコンにインストールするにはyahooウィジットなるものも一緒にインストールしなくてはならず、PCを起動するたびにそれが開くので結構厄介です。

 

ついつい読んでしまうX BRAND

Posted: 2009.10.15

Yahoo!ホームページの真ん中くらいにある、一行の記事。
かなり興味深いものが多いので思わずクリックしてしまいます。
するとX BRANDといういろいろな雑誌の記事を集めたホームページに飛びます。

そのX BRANDが面白い。

いろいろな雑誌の記事を集めただけあってためになる内容が満載です。

一度読み出すと1時間くらい経ってしまう・・・。

X BRAND


=============================================
-超基礎のHTML講座-

■リンクをつけるタグ「a」タグ

ブログやホームページにリンクを着けたい時には以下のようなHTMLのタグを記入します。

<a href=”ここにアドレス”>リンクをつけたいテキスト</a>

■リンク先を別の画面にしたい場合
target=”_blank”をつけます。

<a href=”ここにアドレス” target=”_blank”>リンクをつけたいテキスト</a>

=============================================

 

CMSの利点

Posted: 2009.10.14

CMS(自分で更新できるシステム)の利点は、いうまでもなくHTMLの知識がなくてもホームページを更新、ページの追加できることですが、その他にも利点があります。

■ファイルの管理が簡単にできます。
ページ数が増えれば増えるほど、その管理が大変ですが、更新システムならページの表示・非表示から削除やリンク先の変更など、簡単にできます。

■デザインをまるごと変更できます。
更新システムのデータ(文言や画像など)は、データベースというところに保存されます。
データとデザインが別のところで管理されているので、今のデザインを変えたいな、と思ったらいつでもデザインを変えることが可能です。
もちろんすでに保存されているデータはそのまま利用できるので、一度更新システムでホームページを作ってしまえば、その後データの入力し直しなどはしなくてすみます。

■表示をランダムに変えることができる。
任意の部分の表示をランダムに変えることができます。
例えばサイドメニューのバナーやピックアップ商品などを毎回勝手に切り替わるようにできます。そうすることで閲覧者により多くのページを閲覧させることができます。

まだまだ色々とありますが、とにかくCMSは「便利」です。

これからのホームページはどんどんこのような形になっていくでしょう。

 

CSSで画像を透過させる方法 filter,-moz-opacity,opacity

Posted: 2009.10.1

CSSを使って画像を透過させると、スワップイメージの時などにわざわざ透過した状態の画像などを用意しなくて済むので便利です。


■画像部分
<div class=”sample”><a href=”/”><img src=”http://www.and-nbsp.com/images/IconSmiley.jpg” /></a></div>

■CSS
.sample a:hover img{
filter: alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}

それぞれ
filterがIE用
-moz-opacityがFirefox用
opacityがSafari,Opera用
となります。
「50」,「0.5」の値を変えれば透過の度合いを変えられます。

スワップイメージ以外にも利用できそうですね。

 

キヤノンのWEBに強いプリンターEasy-WebPrint EX

Posted: 2009.9.30

最近キヤノンのプリンターPIXUSのCMを見て「WEBに強い」と謳っていたのでどう強いのか調べてみました。

でもどうやらこれはWEBに強いプリンターが出たのではなく、WEBに強いプログラムが出たようです。

どういうことかというと、WEBを印刷するのに便利なそのプログラムをパソコンにインストールすると、
インターネットエクスプローラーで印刷する時いろいろ印刷ページをカスタマイズできるようです。

早速インストールして使ってみました。

プログラムはこちらからダウンロードできます。
Easy-WebPrint EX Ver. 1.0.1

確かにWEBの部分部分を好きなように取り出して、それらを自分でレイアウトしなおして印刷できるので、便利です。

■印刷したい部分をクリップ
20090930_01

■クリップしたもののレイアウトを自分で編集
20090930_02

その他サイズを小さくして2ページのものを1ページにできたりもできるようです。

詳しくはこちらをご覧ください。
Easy-WebPrint EX ガイド

このプログラムはPIXUSなら使えるみたいです。

 

携帯サイト作成に便利なエミュレーター

Posted: 2009.9.16

どんどん新しい機種が発売される携帯業界ですが、それに伴い携帯サイトの需要も高まるばかりです。

しかし携帯サイトはメーカーと機種で表示のされ方がまちまちで全ての機種で同じ表示をさせることはほとんど無理だといっていいくらいです。

Docomo、Au、Softbankのそれぞれの特徴を踏まえて表示を同じようにすることは可能ですが、それが新旧モデルとなるともう確認する術すらありません。

しかしそれを可能にするエミュレーターを発見しました!

P1エミュレータ

◆◆以下抜粋です◆◆

「P1エミュレータ」はdocomo/SoftBank/auの3大携帯キャリアに対応した、携帯サイト検証用の高機能テスター(シミュレーター)です。
「P1エミュレータ」はドコモ(iモード)、ソフトバンク(Yahoo!ケータイ)、au(EZweb)各携帯キャリアの表示差異のみならず、各メーカーから発売されている個々の携帯電話に合わせたサイトチェックを可能にしました。
また、強力なカスタマイズ機能により、オリジナルの仮想携帯端末を設定して必要なチェックだけを行うことも可能なシミュレーターです。

◆◆ここまで◆◆

3キャリアの表示を確認するために全機種購入してしまった僕ですが、もっとはやくこのサイトに出会っていればよかったと思います・・・。

補足として3キャリアそれぞれのエミュレーターをご紹介しておきます。

◆Docomo
 iモードHTMLシミュレータII

◆AU
 Openwave® SDK 3.3.1J

◆Softbank
 ウェブコンテンツヴューア

 

CSS(スタイルシート)の利点

Posted: 2009.9.10

今更という感じですが、お客様から質問があったので、一応書いておきたいと思います。

スタイルシートというのはホームページのデザインを決める指示書みたいなもので、背景色や画像の位置や文字の大きさなどを決める重要なものです。

今では当たり前ですが数年前まではスタイルシートではなく直接HTMLにそれらを書き込んでいました。

スタイルシートの利点は、一発でデザインをがらっと変えることができるということです。

無料のブログなどでいろいろテーマを選べると思いますが、それを可能にしているのがスタイルシートです。

他の利点はSEOに有利とされています。

ホームページ内に余計なコードがないので、検索ロボットがホームページをクロールしやすいのが要因のようです。

ホームページの運営や検索上位表示などを考慮するとスタイルシート(CSS)での制作が好ましいようです。

弊社では制作するすべてのホームページをスタイルシートを使って制作いたします。

 

SEO対策に使える本

Posted: 2009.8.21

最近買ったSEO対策の本で、これは使えると思った本をご紹介いたします。

684
SEO 検索上位サイトの法則
(ソーテック社 定価:1,659円)

この本は実際に色々なキーワードで上位に表示されているサイト1000サイトを分析した内容が書いてあり、とても参考になります。

==== 抜粋 ====

★相互リンクが一方向のリンクよりも評価が低いのは本当?
★ページの情報を削ぎ落としてファイルを軽くするのは逆効果!
★被リンクを増やしても、順位が上がらない原因とは?

これら、これまで語られてきた常識と言われているSEO(検索エンジン最適化)の技術を、Yahoo!、Googleの1000URLをリサーチし、上位サイトのSEO対策を解析し、その実践方法をわかりやすく解説!

検索キーワードで上位にランクアップするための内部SEO、外部SEO、インデックス対策を中心に、リサーチデータから導き出された上位サイトのSEO法則をまとめたサイト・ブログでアクセスアップをはかりたい方、必携の書籍です。

Yahoo!やGoogle検索で上位ランクされれば、サイトへのアクセス数は激増します。
その結果、ショップサイトでは売上、ブログサイトではアフィリエイト収入が安定的に確保されるでしょう。

・予算がないので自分でSEOをやりたい方
・サイトをつくったが誰も訪れないWeb担当者
・アフィリエイトでもっと収入を増やしたい方
・もっと上位にランクさせて売上アップにつなげたいショップマスター
にぜひ読んでいただきたい一冊です。

==== 抜粋ここまで ====

内容はSEO対策をある程度勉強した方なら既に知っているようなことですが、SEO対策をなにも施していないサイトに、この本に書いてあることを試せば間違いなく順位はあがります。

 

MovableTypeで知っていると便利な条件分岐

Posted: 2009.8.12

MovableTypeを使ってホームページを作成するときに、ヘッダー部分などインデックスページと一覧ページと詳細ページとTitleタグの中身やKeywordの中身などそれぞれ変えたいと思いますが、この条件分岐を知っていれば簡単にテンプレートで内容を変えることができます。

これを知っていればテンプレートを減らすこともできます。

それぞれのテンプレートに名前をつけます。
※それぞれのテンプレートの一番初めに以下のタグをつけます。

indexなら

<MTSetVar name=”main_index” value=”1″>

一覧ページなら
<MTSetVar name=”list” value=”1″>

詳細ページなら
<MTSetVar name=”detail” value=”1″>

まぁなんでも良いと思います。

それからテンプレートで内容を変えたい部分に
<MTIf name=”main_index”>トップページにだけ表示させたい内容<MTElseIf name=”list”>一覧ページにだけ表示させたい内容<MTElseIf name=”detail”>詳細ページにだけ表示させたい内容<MTElse>その他</MTIf>

上記3つのテンプレート以外にもSetVarで名前さえつければ分岐できると思います。

例:Keywordタグで使うと
<meta name=”keywords” content=”<MTIf name=”list”><$mt:ArchiveTitle$><MTElseIf name=”detail”><MTIf tag=”EntryKeywords”><$mt:EntryKeywords$><MTElse><$mt:EntryTitle encode_html=”1″$></MTIf><MTElse>ここに共通で表示させたいキーワードを入れる


 

代表ブログ MovableTypeカスタマイズ ECCUBEカスタマイズ ホームページ制作の下請け
WordPressカスタマイズ
キャンペーンキャンペーンの詳細はこちら