毎日が趣味のページの日記

毎日が趣味のページの日記ではサイト運営記録や、ゲーム日記を書いています。

サイトへのリンク
最新コメント
Access:counter
アーカイブ
«2013年01月 | トップページ | 2012年09月»
パンくずリスト / 2012年10月17日(水)
 今日はパンくずリストについての覚書です。
 パンくずリストとは、以下のようにホームページの階層を示しており、訪問してくれた人がページを移動し易くなります。



 パンくずリストは以下のように普通にリンクで記載すると出来ます。

<li><a href="index.html">ホーム</a>></li>
<li><a href="ouyou.html">応用編</a>></li>
<li>パケット</li>

 googleやYahooで検索した際、通常は下図の緑色の部分はURLが表示されますが、URLではなくパンくずリストで表示されているサイトを見た事があると思います。これは、上記の記述だけで表示されるサイトとされないサイトがあるようです。




 私のサイトは表示されなかったため、以下のように記述しました。

<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="index.html" itemprop="url"><span itemprop="title">ホーム</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="ouyou.html" itemprop="url"><span itemprop="title">応用編</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">パケット</span></li>

 この記述はパンくずリストである事を明示する方法のようです。私のサイトではこの記述の後、googleやYahooで検索した時にパンくずリストで表示されるようになりました。



 検索順位は変わらないようですが、検索した人が見た印象はいい気がします。
 ちょっと悲しいのはwww.geocities.jpがトップページと認識されている点です。これはドメインを取得していないデメリットの1つだと思いました。

 
コメントの表示と投稿(0)
カウター画像の作成 / 2012年10月14日(日)
 今日はカウンター画像作成の覚書です。
 カウンターはcgiにもよるのかもしれませんが、私が使っているジオシティーズのカウンターでは1つのgif画像を10等分して0〜9までの数字として扱っているようでした。
 このため、最初にエクセルで画像を0から9まで以下のように書きました。



 0から9までの1つ1つの画像のサイズは0.57cm×0.53cmです。
 これを1つのgif画像にしていきます。

 まずカウンター画像として使うキャンパスの作成ですが、PictBearで120×17のキャンパスで作成しています。

 次にエクセルで画像の0を選択してコピーし、PictBearで「ファイル」→「クリップボードを開く」を選択すると0の画像のキャンパスが出来ます。これはまだ余白が多いので、「選択範囲」→「座標を入力して選択」で12×17の枠が出来るようにします。作りたいキャンパスである120×17を縦に10等分した数字です。座標の入力では0から始まるので右11、下16とすると12×17になります。
 範囲をマウスで移動して調整し、数字や影が収まって余り余白がないようにします。



 「編集」→「コピー」を選択して120×17のキャンパスで「編集」→「貼り付け」で貼り付けます。

 次の1も同様の操作ですが、最後で120×17のキャンパスに張り付けると0の上の張り付いてしまいます。
 このため、張り付けた後マウスでズラして0の右になるようにします。



 これを9まで繰り返して120×17のキャンパスをgifで保存し、アップロードするとカウンター画像として使えます。
 
コメントの表示と投稿(0)
ファビコン / 2012年10月11日(木)
 今日はファビコンについての覚書です。
 ファビコンは下図のように本ブログでもタイトルの左に出ている小さな絵の事です。



 私のファビコンの作り方はまずPictBearという無料ソフトで絵を書きました。
 32×32の大きさのキャンバスを作り、背景は私のサイトの背景と同じ色、フォントは日本語であればHG行書体、英字であればAR BERKLEYで太字にしてぼかしを入れています。
 これをgif形式で保存します。

 その後、「FavIcon from Pics」という海外のサイトで保存したファイルをico形式とgif動画のファイルに変換します。ico形式が通常使われるファビコンの形式ですが、FireFoxではgif形式も使えこのサイトでスライドするgif動画にしてくれます。

 設置方法は2つのファイルをWebサイトにアップロードし、htmlの<head>と</head>の間に以下を追加します。
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.gif" type="image/gif" />
 favicon.icoとfavicon.gifの部分は保存したファイル名を記述します。

 これでIEではicoの静止画で、FireFoxではgif動画でスライドするファビコンが表示されるようになります。
 
コメントの表示と投稿(0)
要素を調査 / 2012年10月09日(火)
 今日は「要素を調査」の覚書です。
 FireFoxではいつのバージョンからか、参照しているWebページの1つ1の項目でどんなスタイルシートが適用されているか確認出来るようになっていました。
 確認したい部分でマウスを右クリックし、「要素を調査」を選択するとその部分の情報が表示されます。

 以下は私のサイトの例です。



 真ん中の白い部分がマウスで選択した部分で右上では以下のような表示がされます。



 これはスタイルシートのどんな定義が選択している部分に反映されているかを示していて、マウスでクリックして直接値を書き換えたり、定義自体を追加、削除したり出来て、すぐにページの表示に反映されます。

 又、右下の部分は以下のように表示されます。



 これは選択している部分の内側の余白(padding)、外側の余白(margin)、線の太さ(border)等を示しています。
 図では左の線が太さ4でそれ以外はなし、内側の余白は上右下左の順に2px,0px,2px,6px、外側の余白はなしというのが分かります。
 
 下の部分は以下のように表示されます。



 図ではaを選択してしていますが、div.sectionを選択すると以下のようになります。



 つまり、今選択している部分を変更出来るため、指定したい範囲にどういう名前が付いているか分からない場合に、色々選択して探し出せます。

 私はこの機能を使うようになって、スタイルシートの修正が大分楽になりました。
 スタイルシートを修正したけど上手く反映されない時はこの機能を使って直接書き換えて、思ったように出来たらスタイルシート自体を書き換えるようにしています。

 但し、見ているページの見栄えは確認出来ますが、スタイルシートを修正すると他のページの見栄えにも影響します。このため、ある程度は理解した上で修正する必要はあるかなと思います
 
コメントの表示と投稿(0)
クラス / 2012年10月08日(月)
 昨日に続いてスタイルシートの覚書ですが、今日はクラスについてです。
 クラスはクラスAは文字を赤、クラスBは文字を青等場合分け出来ます。
 スタイルシートに以下を追加します。
#side p.blue {
color: blue;
}
 昨日の例でhtmlのサイドメニュー部分の記述を以下のように変更します。
<div id="side">
<p class="blue">サイドメニュー</p>
</div>

 class="blue"部分がblueクラスを適用したという事でサイドメニューの文字が青色に表示されます。

 この時、htmlで以下のようにフッター部分にblueクラスを適用しても青色に表示されません。
<div id="footer">
<p class="blue">フッダー</p>
</div>
 
 これはスタイルシートで#side p.blueと定義しているためで、サイドメニューにしか反映されないクラスのためです。

 次にスタイルシートで以下の定義を追加します。
.red {
color: red;
}
 これはどこでクラスを指定しても反映する汎用的なクラスの定義です。「.」から始まる所がポイントです。
 昨日の例でhtmlのヘッダー部分の記述を以下のように変更します。
<div id="header">
<p class="red">ヘッダー</p>
</div>
 どこで指定しても反映されるため、ヘッダーの文字が赤色に表示されます。

 表示される画面は以下の通りになります。


 クラスを使うと同じボックス内でも異なる見栄えを適用出来ます。
 私はクラスについて理解せずにホームページをリニューアルしたため、殆ど同じだけどちょっとだけ見栄えを変えたい場合にも違うボックスを定義していました。2つのボックスは殆ど同じでちょっとだけ違うため、スタイルシートで同じ定義がずらずらと並んで少しだけ違う所があるボックスが複数記述される状態になります。このため、スタイルシートが結構煩雑になってしまいました。
 クラス分けして作れば、ボックスは1つで見栄えの違う所だけクラスで定義すればいいので簡素化出来ると思います
 
コメントの表示と投稿(0)
スタイルシート / 2012年10月07日(日)
 最近ホームページをリニューアルしていますが、色々なやり方を覚えながらやっているので、後々忘れた時のために覚書をしようと思いました。
 何度かに分けて記載しようと思いますが、最初はスタイルシートについてです。

 スタイルシートはWebサイトの見栄えを定義します。
 htmlで<head>と</head>の間に<link rel="stylesheet" type="text/css" href="スタイルシートのファイル名">と入力する事で指定したスタイルシートを読み込みます。
 スタイルシートではWebサイトの背景色、テキストのフォント、更にはヘッダー、サイドバー、メインコンテンツ、フッター等をどのように表示出来るか指定出来ます。
 かなり以前はhtmlで見栄えを直接指定していましたが、最近ではこのようなやり方は推奨されないようです。
 又、google等で検索される場合でも見栄えの定義に多くの文字を使うと実際に掲載されている内容が重要視されにくいようです。従って、スタイルシートで見栄えを定義する必要性があります。

 簡単な以下の図のようなWebサイトを例にします。



 上記で線で囲まれた部分はボックスでブロックレベル要素と呼ばれ、ヘッダー等の文字の部分はインライン要素と呼ばれているようです。ボックスで配置する場所を決めて、インライン要素でボックスの中身を定義するイメージになると思います。

 実際のスタイルシートですが、まず文字コードを指定します。
@charset "Shift_JIS";

 その後、全体の幅を定義します。
#page { /* 全体の幅を定義 */
width: 200px;
}

 ヘッダー部分を定義します。
#header { /* ヘッダーを定義 */
width: 200px;
height: 30px;
border-style: solid; /* ヘッダーの周りの線 */
border-width: 1px; /* 線の太さ */
text-align: center; /* テキストを中央表示 */
}

 メインコンテンツと記載した部分を定義します。
#main { /* メインコンテンツを定義 */
width: 138px;
height: 100px;
border-style: solid;
border-width: 1px;
float: right; /* メインコンテンツを右に回り込ませる */
text-align: center;
}
 ここでfloatの部分が重要な役目をします。メインコンテンツで記載した部分を右に回り込ませるという意味です。
 これがないとサイドメニューはメインコンテンツの下に表示されてしまいます。

 次にサイドメニューを定義します。
#side { /* サイドメニューを定義 */
width: 58px;
height: 100px;
border-style: solid;
border-width: 1px;
}

 次はフッターの定義です。
#footer { /* フッターを定義 */
width: 200px;
height: 30px;
border-style: solid;
border-width: 1px;
text-align: center;
}

 上記では基本的にボックスの幅、高さ、線等を定義しているだけです。メインコンテンツ部分だけは回り込みを定義しています。

 このようにしてボックスを定義して全体の見栄えを整え、その中に掲載する内容をhtmlで記載する事になります。

 htmlは以下のようになります。
 まずはスタイルシートの定義です。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

 次からは各ボックスの中に表示する内容を記載します。
<body>
<div id="page">
<div id="header">
ヘッダー
</div>
<div id="main">
メインコンテンツ
</div>
<div id="side">
サイドメニュー
</div>
<div id="footer">
フッダー
</div>
</div>
</body>

 div idの部分はスタイルシートで定義したボックスの中身を記載する事を宣言しています。メインコンテンツは<div id="main">の中に記載されているため、右に回り込みしているのでサイドメニューが左に表示されます。
 ボックスの中にボックスを定義する事も可能で、floatする事で横並びにする事も可能です。
 その他にもボックスの余白等、テキストのフォントやカラー、背景色、イメージ等も定義出来るため、スタイルシートでサイトの見栄えが殆ど定義出来ます。htmlはスタイルシートのどの見栄えを使うか指定して内容を記載する事になります。
 本ブログでもスタイルシートを定義してhtnlを書き直す事で選択出来るスキンからかなりイメージを変えています。
 
コメントの表示と投稿(0)
P R
プロフィール
  • プロフィール画像
  • アイコン画像 ニックネーム:のびきよ
  • アイコン画像 性別:男性
読者になる
 主にネットワーク入門サイト、ホームページ入門サイト、The Elder Scrolls V: Skyrim紹介サイトの運営記録を書いています。
 又、以前やっていたロード・オブ・ザ・リングス(LOTRO)、トリックスター、出会い系サイト的スペルバウンドの攻略サイトの話題にもたまに触れていきたいと思っています^^
2012年10月
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Yapme!一覧
読者になる
Global Media Online INC.