/home/syany/.SErc

みなさま、いつもプラグインをダウンロードいただきありがとうございます。

おかげさまで、この間ついに「気まぐれクラウド」のプラグインが500ダウンロードを超えました。

気まぐれクラウドとは・・・
貴方のブログをから自動的にキーワードを読み込み、『キーワードの文字群を表示する』プラグインです。
仕様として
・英語、日本語で順に表示します。
・より重要性の高いものが文字が大きくなります
・リンクとして表示します。デフォルトのリンク先は、「ブログ内検索結果」です。

＊利点
どのようなページなのか、一目でわかるキーワードが表示されるため、閲覧者に理解されやすいです。
また、配置位置を、「ブログ内検索」の下あたりに配置していただくと、関連キーワードみたいになって良い感じです。

本日は、そのお礼としまして、ソースを公開＋ダウンロードできるようにしました。

恥ずかしいですが、、

「あ〜だから重いのか」

など思いながら、使えそうならば今後にご使用ください。

また、一部、ヌルコムアーカイブス様のエンコードスクリプトを修正して公開させていただいております。

著作権のみで、ライセンス的に公開の許可が必要かと思いますので、もし必要であればご指摘ください。

ご指摘にしたがい、削除などの措置をさせていただきます。

では、お見せします

実行には以下の5ファイルが必要です

今回で最終回です。

ここまでお付き合い下さった方、ありがとうございました。後半ささやかながらプレゼントがございます。

4.内容系クラスを製作する

さて、早速最後に残った内容系のクラスの製作をしていきますが、正直なところあまり書くことがありません。

というのも、前回までにお話したプロパティ＋名前空間＋子孫セレクタ&複数クラスを利用してのオブジェクト指向プログラミングのただの応用だからです。

内容クラス用のクラス名を設定する

まず、前回行った、構造系クラスと今回の内容系クラスの設定を分離させるために、今回も内容系クラス独自のクラス名を設定します。

というか、実は前回のサンプルにその記述も入れておきました（笑）

<div class="Outline Header Left HeaderLeftColumn">
[ヘッダ左]
</div>
<div class="Outline Header Right HeaderRightColumn">
[ヘッダ右]
</div>

これが前回のヘッダー部分ですが、これのHeaderLeftColumn、HeaderRightColumnが今回の内容系クラス用の名前空間になります。

それが証拠に、前回お配りしたスタイルシート側には、セレクタにこのクラス名は一度も使われていないはずです。

内容系クラス名を用いてスタイルシートを記述する

そして、いよいよ最後の内容系スタイルシートを記述するのですが、書き方も構造系でお話した感じです。

ただし、構造系スタイルよりも書ける内容が増えます。前回にも書いた第１回でお話したプロパティグループ

今回は、そのすべてが書けます

今回から実践です。

今までの3回に分けた能書き説明をもとに、０からサンプルになるようなページのテンプレートを作成していきます。

1.ページ全体の構成系スタイルと内容のスタイルを分離する

まず、全体の構成を考えていきます。

近年は、多種なページ構成があり（ヘッダー付きの３カラムページ、ヘッダー、フッター付きの2カラムページなど）、その多くがdivを使ったページ構成となっています。

ですので、ページを作成する際は、少なからず、ページ構成の意識が必要になっています。

そして、ページ構成のために使用するスタイルは、ページの内容のために指定するスタイルとは別のグループで考えると、整理されたスタイルシートになります。

そこで、今回はページ構成のみを記述したスタイルシート(CSS 2.1)と、html(XHTML 1.0)を紹介します

ページ全体の構成系スタイルの範囲。サンプルの紹介

内容ページは次回最終回に記載することにして、「ページ構成」の書き方について、できる限り噛み砕いた説明をいたします。

ひとくちに「ページ構成」と言ってもわかりにくいと思いますが、先ほど書きましたヘッダー付きの３カラムのヘッダーや１つのカラムといったレベルのブロック単位での配置関係=構成という風に考えてください。

また、以降の内容用スタイルとの依存関係を最小限無くすため構成用スタイル群には、次のようなきまりを設けました。