【電脳】ニュースサイトっぽいカテゴリバー
丁寧にやれば、誰でも出来るように解説しますので、興味があったら見て下さいね。私は技術者では無いので、細かいハード関係は分かりませんし、正式な書式も勉強している訳では無いので、その辺はご容赦下さいませ。
まず、なぜこんなメンドクサイ事をするかと言うと、自分が丹念に記事を書いてきた愛しのサイト（？）が、読まれる前に嫌われてしまう要素を減らす為なんです。
嫌われるサイトと言えば、「重い」「見づらい」「よく分からない」等が筆頭に挙げられます。これらのサイトは、「開いたとたんに、Xボタンを押されて、タブを閉じられる」可能性が非常に高いです。
私はビッグなサイトの持ち主では有りませんから、訪問者は毎日数えるほどです。しかし、来てくれた方は大切にしたい。おもてなしです。読者になってくれるかもしれませんからね。
ニュースサイトにあるあれです。横一列に「政治」「国際」「社会」「IT」なんて並んでいるボタンが有ります。あれ、かなりの高確率でクリックしますよね？
と言うことは、使用頻度が高く、分かりやすいと言うことなんです。これを使用しない手はありません。サイドバーに隠れている「カテゴリ」なんかに脚光を浴びせてサイトを魅せましょう。特殊なサイトでないかぎり、サイドバーの「カテゴリ」は死んだリンクになっているかもしれません。
最初に確認することは、今使っている「ブログサービス」が、改造できるのかどうか？ です。
必要なのは「HTML」の編集機能、「CSS」の編集機能があるかどうか？ です。
ブログサービスによっては、「CSS」は「スタイルシート」とか、「スキン」とか呼ばれます。
確認できたら、HTML、CSSの編集画面を開いてみます。よく分からない記号や英語っぽい文字列がずらずらと出てくればOK。
テキストを弄くり回す前に、まずバックアップしておきます。テキスト内の文字列をマウスでまず「全選択」、そして「コピー」します。
そして、ワードパットとか、メモ帳にペーストして、分かりやすいファイル名でパソコンに保存しておきます。
こうしておくことで、後で訳が分からなくなって、ブログの表示がぐちゃぐちゃになったとしても、バックアップしておいた文字列を元に戻るようペーストすることで、いじる前の状態に戻せます。
次は、実際に「HTML」からいじっていきましょう。
まず、下のHTMLをコピーしておいて下さい。これがカテゴリーメニューの雛形になります。
*この雛型は「改行」されていません。見づらい場合は、「＞」の記号の後に改行を入れて整形して下さい。
これを、「HTMLテキストの上の方、 </div> の後ろの行で、 <div class="○○"> の前の行に挿入してみます。成功させるコツは、一行ないし二行空白の列がある場所が狙い目です。
なんとなくこの辺かな〜なんて感じで挿入してみて下さい。そして「プレビュー」してみます。
この部分、つまり「ヘッダーバナー」と「本文」の間に「カテゴリーが入るばしょだよ〜ん」と表示されれば成功です。
次は、下のタグを、メニューに取り入れたい数だけ改造して、「カテゴリが入る場所だよ〜ん」のテキストを消し、その部分に、その改造した数のタグ分挿入していきます。
*こんな感じで、だらだらと「カテゴリーリンク」を加えていきます。
完成したら、プレビューしてみて下さい。
先ほどの「カテゴリーが入るばしょだよ〜ん」というテキストがあった部分に、あなたの書いたカテゴリーリストが、縦にずらずらと表示されればOKです。
さあ、このままでは、自分のサイトがかなりキタナイ作りになってしまいます。あんまり「おもてなし」という感じではありません。
ここで、「CSS」の登場です。
まず、今まで作ったHTMLを必ず「保存」「変更」しておきましょう。苦労して打ち込んだタグ、もしも消えてしまったらタイヘンなので、またワードパッドなり、メモ帳なりにバックアップ保存しておくのも確実です。
それでは、「CSS」の編集画面を開いて見ましょう。
CSSにも記載する順序が正式にはあるらしいのですが、最近のブラウザはそんなこと気にしませんから、ここは分かりやすく「一番最後」に下の雛形をコピペしてください。
*コチラのCSSの雛形も「改行してありません。「；」の記号の後で改行を入れておくと、グッとみやすくなりますよ。
早速プレビューしてみて下さい。
「確かに横には並んだけど、うちのサイトとサイズがあっていない…」
そのとおり。では、次にCSSの「数値」をいじっていきましょう。
ここから、数値の変換の仕方を下図で説明します。
サイトのサイズは、うちのサイトが横840pxです。ご参考までに。
色見本はコチラ。
色見本（カラーチャート） ナスカ特製
フォントサイズはコチラ。
MovableType 初心者講座: CSSで文字サイズの設定
ちょっと高度なCSS講座はコチラ。
2step脱テーブルスタイルシートCSSレイアウト講座
親切なサイト作り
まず、なぜこんなメンドクサイ事をするかと言うと、自分が丹念に記事を書いてきた愛しのサイト（？）が、読まれる前に嫌われてしまう要素を減らす為なんです。
嫌われるサイトと言えば、「重い」「見づらい」「よく分からない」等が筆頭に挙げられます。これらのサイトは、「開いたとたんに、Xボタンを押されて、タブを閉じられる」可能性が非常に高いです。
私はビッグなサイトの持ち主では有りませんから、訪問者は毎日数えるほどです。しかし、来てくれた方は大切にしたい。おもてなしです。読者になってくれるかもしれませんからね。
カテゴリメニューを作ってみる。
ニュースサイトにあるあれです。横一列に「政治」「国際」「社会」「IT」なんて並んでいるボタンが有ります。あれ、かなりの高確率でクリックしますよね？
と言うことは、使用頻度が高く、分かりやすいと言うことなんです。これを使用しない手はありません。サイドバーに隠れている「カテゴリ」なんかに脚光を浴びせてサイトを魅せましょう。特殊なサイトでないかぎり、サイドバーの「カテゴリ」は死んだリンクになっているかもしれません。
使えるブログか確認する
最初に確認することは、今使っている「ブログサービス」が、改造できるのかどうか？ です。
必要なのは「HTML」の編集機能、「CSS」の編集機能があるかどうか？ です。
ブログサービスによっては、「CSS」は「スタイルシート」とか、「スキン」とか呼ばれます。
テキスト編集画面を開いてみる
確認できたら、HTML、CSSの編集画面を開いてみます。よく分からない記号や英語っぽい文字列がずらずらと出てくればOK。
まずはバックアップ
テキストを弄くり回す前に、まずバックアップしておきます。テキスト内の文字列をマウスでまず「全選択」、そして「コピー」します。
そして、ワードパットとか、メモ帳にペーストして、分かりやすいファイル名でパソコンに保存しておきます。
こうしておくことで、後で訳が分からなくなって、ブログの表示がぐちゃぐちゃになったとしても、バックアップしておいた文字列を元に戻るようペーストすることで、いじる前の状態に戻せます。
カテゴリを挿入する場所を探す
次は、実際に「HTML」からいじっていきましょう。
まず、下のHTMLをコピーしておいて下さい。これがカテゴリーメニューの雛形になります。
*この雛型は「改行」されていません。見づらい場合は、「＞」の記号の後に改行を入れて整形して下さい。
これを、「HTMLテキストの上の方、 </div> の後ろの行で、 <div class="○○"> の前の行に挿入してみます。成功させるコツは、一行ないし二行空白の列がある場所が狙い目です。
なんとなくこの辺かな〜なんて感じで挿入してみて下さい。そして「プレビュー」してみます。
この部分、つまり「ヘッダーバナー」と「本文」の間に「カテゴリーが入るばしょだよ〜ん」と表示されれば成功です。
リンクのタグ打ち
次は、下のタグを、メニューに取り入れたい数だけ改造して、「カテゴリが入る場所だよ〜ん」のテキストを消し、その部分に、その改造した数のタグ分挿入していきます。
*こんな感じで、だらだらと「カテゴリーリンク」を加えていきます。
完成したら、プレビューしてみて下さい。
先ほどの「カテゴリーが入るばしょだよ〜ん」というテキストがあった部分に、あなたの書いたカテゴリーリストが、縦にずらずらと表示されればOKです。
さあ、このままでは、自分のサイトがかなりキタナイ作りになってしまいます。あんまり「おもてなし」という感じではありません。
ここで、「CSS」の登場です。
まず、今まで作ったHTMLを必ず「保存」「変更」しておきましょう。苦労して打ち込んだタグ、もしも消えてしまったらタイヘンなので、またワードパッドなり、メモ帳なりにバックアップ保存しておくのも確実です。
CSSの雛形
それでは、「CSS」の編集画面を開いて見ましょう。
CSSにも記載する順序が正式にはあるらしいのですが、最近のブラウザはそんなこと気にしませんから、ここは分かりやすく「一番最後」に下の雛形をコピペしてください。
*コチラのCSSの雛形も「改行してありません。「；」の記号の後で改行を入れておくと、グッとみやすくなりますよ。
早速プレビューしてみて下さい。
「確かに横には並んだけど、うちのサイトとサイズがあっていない…」
そのとおり。では、次にCSSの「数値」をいじっていきましょう。
CSSの数値の修正
ここから、数値の変換の仕方を下図で説明します。
サイトのサイズは、うちのサイトが横840pxです。ご参考までに。
色見本はコチラ。
色見本（カラーチャート） ナスカ特製
フォントサイズはコチラ。
MovableType 初心者講座: CSSで文字サイズの設定
ちょっと高度なCSS講座はコチラ。
2step脱テーブルスタイルシートCSSレイアウト講座
