プライベートモードで閲覧中です。

sugar pot : 【cfdn_09徹底研究ぅ~♪】#6 モードにかかわらず常に表示されるもの(2)サイドバー (2-1)プラグイン有効時

ほろ苦い夢のかけらのおすそわけ

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

trackback

【cfdn_09徹底研究ぅ~♪】#6 モードにかかわらず常に表示されるもの(2)サイドバー (2-1)プラグイン有効時

2005年10月07日(金) コメント:0 トラックバック:0

前項に引き続き、常にブラウザの画面に表示されるものとして、サイドバーについて見ていく。
テンプレートの構造図 図1

プラグインについて

まず先にプラグインについての理解が必要となる。

プラグインとは
  • ナビゲーション(メニュー)や、ブログパーツ(ペットや掲示板、天気予報、ニュース、チャット、などなど)、自由文など、本文記事以外の部分について、それぞれひとかたまりのブロック(プラグイン)に入れておき、それを必要に応じて表示したり表示しなかったりすることができる非常に便利な機能である。
  • プラグインカテゴリという大きなブロックが用意されていて、HTMLにはそのプラグインカテゴリを置き、その中に各プラグインを表示する仕組みとなっている。現在用意されているプラグインカテゴリは1~3の3つである。
  • プラグインの設定は、管理者ページで直感的に行なうことができるため、HTMLを知らなくてもある程度までデザインの変更が可能であるという利点がある。
  • 表示/非表示が簡単なこと、テンプレートを取り替えても設定は引き継がれるため、ブログパーツなどずっと表示しておきたいものをいちいちテンプレートを編集して貼付けなくて良い、などの利点も持つ。
  • プラグイン内の細かなデザインの変更は、管理者ページからプラグインHTMLを編集することで可能である。
  • プラグイン無効のHTMLが記述されているテンプレートでは、プラグイン無効の設定も選択できる。その場合、ナビゲーション(メニュー)やブログパーツ等はテンプレートのHTML内に直接記載してつかう。
  • プラグイン有効/無効の設定は管理者画面>プラグインの設定>プラグインの状態>プラグインの設定の状態にて行なう。デフォルトは有効。

現在FC2ブログで提供されている公式テンプレートはすべてプラグインに対応しているが、共有テンプレートの場合は、対応しているもの・していないものがある。勿論、自分でHTMLを編集することで対応させることができる。

cfdn_09は公式テンプレート、プラグインに対応しており、プラグイン無しの設定もできる。。

プラグイン有効時のサイドバーのメニューやブログパーツなど

場所
<!--plugin-->~<!--/plugin-->内
  1.         <!--plugin-->
  2.         <!--plugin_first-->
  3.         <div class="section"><!-- plug-in-section -->
  4.             <h3 style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3>
  5.             <div style="text-align:<%plugin_first_ialign>"><!-- plug-in-align -->
  6.                 <%plugin_first_description>
  7.             </div><!-- /plug-in-align -->
  8.             <%plugin_first_content>
  9.             <div style="text-align:<%plugin_first_ialign>"><!-- plug-in-align -->
  10.                 <%plugin_first_description2>
  11.             </div><!-- /plug-in-align -->
  12.         </div><!-- /plug-in-section -->
  13.         <!--/plugin_first-->
    プラグインカテゴリ1ここまで。以下煩雑になるのでカテゴリ部分だけを表示する。
  14.         <!--plugin_second-->
    (中略:プラグインカテゴリ1と同様)
  15.         </div><!-- /plug-in-section -->
  16.         <!--/plugin_second-->
  17.         <!--plugin_third-->
  18.         <!--/plugin_third-->
  19.         <!--/plugin-->
つかわれている変数
<%plugin_first_talign>
プラグインのタイトルの文字配列
<%plugin_first_title>
プラグインのタイトル
設定場所:プラグインの設定>プラグインの追加>プラグイン設定の変更(ここまで以下省略)>タイトル
<%plugin_first_ialign>
プラグインの説明の文字配列
上下とも同じ配列が適用される。
設定場所:説明文の文字位置
<%plugin_first_description>
プラグインの説明(通常、プラグインの上に配置される説明)
設定場所:上部に記載するプラグインの説明文
<%plugin_first_content>
プラグインのコンテンツ(HTML部分)
設定場所:プラグインHTMLの編集
注意:フリーエリア以外の編集は変数をよく理解してから。
<%plugin_first_description2>
プラグインの説明その2(通常、プラグインの下に配置される説明)
設定場所:下部に記載するプラグインの説明文
追加できる変数
<%plugin_first_align>
プラグインのコンテンツの文字配列
設定場所:コンテンツの文字位置
<%plugin_first_tag>
プラグインの識別タグ。(プロフィール、カテゴリ、など)
ただしフリーエリアについては、同一カテゴリ内での識別はできない。
カスタマイズのヒント

プラグインの識別タグをつかって、プラグインのタイトルを画像に置き換える。(編集箇所:HTMLとCSS)

  1. <div class="section" id="plugin-<%plugin_first_tag>"><!-- plug-in-section -->
  2. <span><h3 style="text-align:<%plugin_first_talign^gt;"><%plugin_first_title></h3></span>
プラグイン識別タグでidを設定し、それにたいしてCSSで背景画像を設定。 タイトル部分のテキストは<span>~</span>で囲み、CSSで見せないようにする。
div#plugin-XXXX h3 { 
 background :url("画像のアドレス"); 
 }
XXXX部分はcategoryなどタグで識別されたid。

he span{dispaly:none;}

FC2ブログサポートフォーラム「cfdn_09でセカンダリカラム部分の見出しを画像にするには」


「カスタマイズのヒント」では、比較的良く見られるカスタマイズ方法をご紹介しています。ただし、現在記述しているのはHTMLについてなので、色や大きさ、背景画像など、見栄えについては、後日紹介を予定しています。

この連載は私の自学自習コーナーです。解説の体裁を取っているのは「ひとに説明すると理解度が深まる」という定説にのっとるものです。私自身はさほどスキルがあるわけでもありません。できるだけ正確を期すよう努めていますが、誤りがありましたら、ご指摘いただけますようお願いいたします。また、ご覧のかたがたは、その旨ご了承いただけますようお願いをいたします。

#452
カテゴリ:103 HTML CSS JavaScript

trackback

<<【cfdn_09徹底研究ぅ~♪】#5 モードにかかわらず常に表示されるもの(1) | 【cfdn_09徹底研究ぅ~♪】#6 モードにかかわらず常に表示されるもの(2)サイドバー (2-2)プラグイン無効時>>

コメント(-0件)

コメントの投稿

トラックバック(-0件)

http://bittersweetdreams.blog9.fc2.com/tb.php/452-61bb34b2

Bookmarked

Blog Battler

ブログバトラー

Twitter

    フリーエリア

    上部の説明

    下部の説明

    Utilities

    Ad

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。