SEO講座

SEOでGoogle検索。
ここでトップにでてくるSEO業者の信頼は厚いだろうなぁ。ということで検索してみました。

SEO/SEM講座（http://www.sem-seminar.com/）がヒット。

みてみると、なんて事はないHPなんです。が・・・

かなり研究されてますね。
Try&Errorを繰り返し、Googleの検索エンジンの仕様変更を分析し、
数々の努力の元、この地位を勝ち取っているようです。

親切に、Try&Errorの課程が(一部でしょうが)紹介されています。
そっちに興味のある方は、試してみたら良いんじゃないでしょうか？

とりあえず、目を通しましたが（ｗ


なるほどぉと思うところもありますよ＾＾

zen Garden

CSSといえばやはりここでしょう。
http://www.csszengarden.com/tr/japanese/
一つのHTMLファイルを元に、CSSだけを変化させて、デザインを追求する。
CSSの能力が最大限解るのは、こういう試みなのだと思います。

CSSって何？という人には、これらのサイトが何を意味するのか理解に時間がかかるかもしれません。

Web表現を行う上で、文書構造とデザイン部分を分離する。そこにCSSの真の意味がありますが、それを実践しているのがこのサイトです。元々同じHTMLソースなのに、デザインを変えられる、それがCSSの魅力でもあります。同様のことを、あなたのサイトに置き換えてみましょう。
一つのテンプレートを用いてHP作成を行います。
あなたは、時折リニューアルを行いたくなりますが、普通はその際全てのHTMLファイルを書き換える
という必要に迫られるはずです。
でも、文書構造は変えずにCSSの変更だけでリニューアルが完成するとしたら？

こんな素晴らしい話は無いはずです。


ただ、その場合には、完成されたテンプレートの存在が不可欠なのですが・・・



HP内の文章構造というのは、割と変更したくなります。
勉強を進めるうちに、現在のままでは弱い事が解ってくるんですね。
時代と共に移り変わっていくことも必要ではあると思います。
そういったときに、変更する必要のない普遍的なHTMLテンプレートとは？？？

なかなか究極のテーマかもしれませんね。


でも、文書構造という形で考えていくと。。。
ブログの構造は理想的かもしれませんね。

あとは、どう表現するのか。それだけです。


George

アフェリエイトとCSS

アフェリエイトとCSSについての考察。

最近、アフェリエイトで小遣い稼ぎという話を良く聞く。
商品などに関するリンクをHP上に設け、そこから実際に買ってもらうことが
出来た場合に報酬を受け取れるという物だ。

例えばこんな感じ。
アフィリエイトはエーハチネット

このアフェリエイト。実はたっくさんの種類がある。
商品も多数あるし、そのリンク形式もものすごく多いのである。

上に示した例は、簡単にテキストリンクでつくったアフェリエイトリンクである。
ここから実際に、あなたがリンクをクリックし、契約に結びつけば私に
報酬が入るのである。


でだ。
今回はなぜテキストを選んだのだろう？
実はアフェリエイトのリンクには、バナーもあるのである。

バナーリンク。
あなたはクリックしますか？
バナーリンク。
バナーに何が書いてあるか覚えていますか？？？

広告としてのイメージが濃くなってしまったバナー。
いまではほとんどの人が読み飛ばしているという状況になっているのだとか。

CSS的にも、イメージになってしまうと手出しができないのである。

テキストリンクの場合にも注意が必要な点がある。
じゃぁ、イメージはやめて、テキストでリンクを張ろう！
となったときの注意点だが、

CSSを使っていると、リンクテキストの修飾をといてしまったりしがちなのである！
下線を消したりということは、日常茶飯事にやっていることだろう。
しかし、リンクはあくまでも、普通に

「あおいもじで」「下線をつける」

のが良い。
やっぱり、万人がみてリンクだなと確証するのは、このスタイルなのだ。

アフェリエイトの入門はこちらからどうぞ


CSSも使いすぎにはご注意を！


＊＊＊＊＊＊＊＊＊＊＊＊
追記：あっ！
このブログのCSSも、リンクに修飾施してあるようだ。
文字の色が違う・・・
言ってる側からなにをやっているんだ。という感じですが、Bloggerのデフォルトが
そうなってるみたいですね。
本日は、CSSいじる余裕もないので、このまま放置の方向で・・・

George

XOOPS CSS化計画

CMSツールとしてちょっと期待している(今更かよ)XOOPSですが、
HTMLの構成はTable使ってるみたいですね。
CSS対応のThemeがあるのかまだ調べてないんですけど、
カスタマイズの方向性としてはいずれ完全CSSで形作ってみようかなぁ
と思っている今日この頃でした。

ふわわ。風邪ひいたかなぁ～（TT

CSSを使った横型メインメニューの実現(追記)

本日は、CSSをつかったメニューの作り方の追記です。

HTMLおよび、CSSは今まで利用の物に追加する形で記述して構いません。
先日掲載した方法ですが、あのまま実際に使いますと、上下左右にマージンが入ってしまいうまくデザイン出来ないという状況になります。
今回の設定では、メニュー一つ一つの間には全く間隔を入れていません。
入れたい場合は、CSSを変更して対処するようにして下さいね。(変更の方法は、CSS部分に記述してあります。)
なお、HTML部分は、前回案内した物と同じです。変更はCSSのみになりますので、そちらだけ変更するように
して下さい。よろしくお願い致します～

ここからコピー部分です。
＊＊＊
DIVで囲ったglobal menuを、HTMLのはめたい部分にコピペして下さい。
前回使ったHTMLの
<div id="container">

</div>
この間に入れることが望ましいです。


＊＊＊コピー開始！(HTML)

<!-- Start header_mainmenu -->
<div id="header_mainmenu">
<ul>
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
<li class="last">以下、好きなように・・・</li> <!-- 最後のメニューには必ずclass="last"を入れて下さい -->
</ul>
<!-- End header_mainmenu -->
</div>

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

＊＊＊コピー開始！（CSS)
/* 横型メインメニュー設定はここから*/
div #header_mainmenu ul li{
width:100%;
display:inline;
text-align:left;
}

div#header_mainmenu ul{
margin: 0px;
padding: 0;
list-style-type:disc; /*リストの頭につく修飾。いらない場合はdisc を　noneへ変更*/
}
div#header_mainmenu li{
margin-right:0px; /*右側に空間を空けたい場合は、ここの数値を変更すること。*/
}
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

以上、本日のテクニックでした＾＾