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

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

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

スポンサーサイト

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

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

trackback

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

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

テンプレートの構造図 図1

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

場所
<!--not_plugin-->~<!--/not_plugin-->内
  1.         <!--not_plugin-->
  1.         <!--/not_plugin-->

以下それぞれのブロックについて説明していく。場所はすべて上記タグ内なので省略。

また、このテンプレートでは、メニューリストのツリー化がはかられている。ツリー化のJavaScriptは外部を参照している。参照しているのはここ。

  1. <script type="text/javascript" src="http://blog9.fc2.com/template/cfdn_09/list-tree.js"></script><!-- ///// ツリー化スクリプト ///// -->
カスタマイズのヒント
サイドメニューのタイトルを日本語にする(編集箇所:HTML)
<h3>と</h3>との間の英語がタイトル。この部分を日本語に変更する。
日本語は各プラグインの説明のタイトルを参考に。ほかに良いものがあったら教えてください。
サイドメニューのタイトルを画像で表示する(編集箇所:HTML)
<h3>と</h3>との間の英語がタイトル。この部分を画像に差し替える。
  1.             <h3><img src="画像のアドレス" alt=""></h3>
CHOUR-FLEURさんからのコメントをご覧ください。
さらに追記。「”display:none;”は大丈夫?」もご参考に。
サイドメニューのタイトルにアイコンをつける(編集箇所:CSS)
CSSの以下の部分に最後の行を追加。

         div.secondary-column h3 {
         padding-top : 0.2em;
         font-family : "Helvetica", "Arial", sans-serif;
         font-weight : bold;
         border-top : 5px solid #07b;
         background :url("アイコンの画像のアドレス") no-repeat left;
         }
数が0以外のときに色を変更する(編集箇所:HTMLとCSS)
コメントが1件以上あった時に、件数(数字)の色を変えることは

プラグイン無効時:カテゴリ別表示(categories-archives)

  1.         <div class="section" id="categories-archives">
  2.             <h3>Categories Archives</h3>
  3.             <ul>
  4.                 <!--category-->
  5.                 <li><a href="<%category_link>"><%category_name> : <%category_count></a></li>
  6.                 <!--/category-->
  7.             </ul>
  8.         </div>
つかわれている変数
<%category_link>
カテゴリのURLを表示。クリックするとそのカテゴリに属する記事だけが一覧表示される。
<%category_name>
カテゴリ名
カテゴリの追加・編集は管理者ページ>カテゴリーの編集
<%category_count>
そのカテゴリに属する記事の数

プラグイン無効時:月別表示(monthly-archives)

  1.         <div class="section" id="monthly-archives">
  2.             <h3>Monthly Archives</h3>
  3.             <ul>
  4.                 <!--archive-->
  5.                 <li><a href="<%archive_link>"><%archive_year>-<%archive_month> : <%archive_count></a></li>
  6.                 <!--/archive-->
  7.             </ul>
  8.         </div>
つかわれている変数
<%archive_link>"
月別アーカイブのURLを表示。クリックするとその月の日付で投稿された記事だけが一覧表示される。
<%archive_year>
<%archive_month>
投稿日時を変更したい場合は、管理者ページ>過去の記事の管理で該当記事の[修正]をクリックして編集画面にし、◎自分で指定になっていることを確認、日付を任意に変更し、最後に一番下の[保存]をクリック。
<%archive_count>
その月に属する記事の数

プラグイン無効時:グーグルアドセンス(Google AdSense)

コメントアウトされていて非表示になっている。304行の<!--と308行の-->(コメント)を削除し、306行<h3>AdSense</h3> の次にAdSeneのスクリプトを貼付ける。

不要な場合はそのまま。

Google AdSense

  1.         <!-- ///// Google AdSense コメントを削除してコードを埋め込み ///// -->
  2.         <!--
  3.         <div class="section" id="appendix-adsense">
  4.             <h3>AdSense</h3>
  5.         </div>
  6.         -->

プラグイン無効時:リンク(links)

  1.         <div class="section" id="links">
  2.             <h3>Links</h3>
  3.             <ul>
  4.                 <!--link-->
  5.                 <li><a href="<%link_url>"><%link_name></a></li>
  6.                 <!--/link-->
  7.             </ul>
  8.         </div>
つかわれている変数
<%link_url>
リンクのURLを表示。
クリックすると新規ウィンドウで新規先のサイトを表示する。
<%link_name>リンク先のサイト名
リンク先の設定は管理者ページ>環境設定>リンクの編集で行なう。並び替えも同メニューで。

プラグイン無効時:最近のコメント(recent-comments)

  1.         <div class="section" id="recent-comments">
  2.             <h3>Recent Comments</h3>
  3.             <ul class="list-tree">
  4.                 <!--rcomment-->
  5.                 <li class="list-tree-child"><a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_etitle>"><%rcomment_name> (<%rcomment_month>/<%rcomment_day>)</a></li>
  6.                 <!--/rcomment-->
  7.             </ul>
  8.             <script type="text/javascript">tree();</script><!-- ///// リストのツリー化を実行 ///// -->
  9.         </div>
つかわれている変数
<%rcomment_link>
コメントにアクセスするURL
<%rcomment_no>
コメントに付された通し番号
<%rcomment_etitle>
コメントされた元記事のタイトル
<%rcomment_name>
コメント投稿者名
<%rcomment_month>
コメント投稿日のうち月
<%rcomment_day>
コメント投稿日のうち日
追加できる変数

ただしあまり多くの変数をサイドバーで使用すると、ブログ全体が見づらくなることに注意。コメントのタイトル以外は個別記事ページでの使用をお薦めする。

<%rcomment_body>
コメントの要約(冒頭から200文字)
<%rcomment_title>
コメントのタイトル
コメントのタイトルを表示したい場合、コメント投稿フォームにタイトルの項目を加えることが必要。 既に投稿されたコメントについては、タイトルが入力されていないため空欄となる。
<%rcomment_year>
コメント投稿日のうち年
<%rcomment_hour>
コメント投稿時刻のうち時
<%rcomment_minute>
コメント投稿時刻のうち分
<%rcomment_second>
コメント投稿時刻のうち秒
<%rcomment_youbi>
<dd>受信日の曜日(英語)
<%rcomment_wayoubi>
受信日の曜日(日本語)

プラグイン無効時:最近のトラックバック(recent-trackbacks)

  1.         <div class="section" id="recent-trackbacks">
  2.             <h3>Recent Trackbacks</h3>
  3.             <ul class="list-tree">
  4.                 <!--rtrackback-->
  5.                 <li class="list-tree-child"><a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_etitle>"><%rtrackback_blog_name> (<%rtrackback_month>/<%rtrackback_day>)</a></li>
  6.                 <!--/rtrackback-->
  7.             </ul>
  8.             <script type="text/javascript">tree();</script><!-- ///// リストのツリー化を実行 ///// -->
  9.         </div>
つかわれている変数
<%rtrackback_link>
トラックバック概要表示部分へのURL
<%rtrackback_no>
トラックバックに付せられた通し番号
<%rtrackback_etitle>
トラックバックが寄せられた記事のタイトル
<%rtrackback_blog_name>
トラックバックを寄せてきたブログの名称
<%rtrackback_month>
受信日のうち月
<%rtrackback_day>
受信日のうち日
追加できる変数

ただしあまり多くの変数をサイドバーで使用すると、ブログ全体が見づらくなることに注意。タイトル以外は個別記事ページでの使用をお薦めする。

<%rtrackback_url>
トラックバックをしてきた記事のURL
<%rtrackback_excerpt>
同記事の要約
<%rtrackback_title>
同記事のタイトル
<%rtrackback_year>
受信日のうち年
<%rtrackback_hour>
受信時刻のうち時
<%rtrackback_minute>
受信時刻のうち分
<%rtrackback_second>
受信時刻のうち秒
<%rtrackback_youbi>
受信日の曜日(英語)
<%rtrackback_wayoubi>
受信日の曜日(日本語)

プラグイン無効時:プロフィール(profile)

  1.         <div class="section" id="profile">
  2.             <h3>Profile</h3>
  3.             <p class="author-pics"><img src="<%image>" width="100" height="100" alt="" /></p><!-- ///// 画像サイズ width 値と height 値を任意で調整して下さい ///// -->
  4.             <p class="author-name"><%author_name></p>
  5.             <p class="author-description"><%introduction2></p>
  6.             <p class="powered"><img src="http://blog9.fc2.com/template/cfdn_09/image/powered.gif" width="125" height="35" alt="Powered by FC2ブログ" /></p>
  7.         </div>
つかわれている変数
<%image>
プロフィール画像のURL
管理者ページ>環境設定>プロフィールの編集(以下略)>プロフィール画面でアップロード。
アップロードした画面を削除したい場合は、「プロフィール画面を使わないようにする」をクリック。
<%author_name>
管理人名
プロフィール名で設定
<%introduction2>
管理人プロフィール。
プロフィール説明で設定。
改行が反映されるので、プログパーツのスクリプトを貼付ける場合は改行をすべて取り除き一行にしてペーストする。改行が入ると正常に作動しない。
自己紹介文のほか、管理人からのアナウンス、ひとりごと、日記など、メモ的にもつかえる面白い部分。その場合、タイトル名も適宜変更。
つかわれている画像
Powered by FC2ブログ
画像のアドレス:http://blogN.fc2.com/template/cfdn_09/image/powered.gif
Nは自分のサーバ番号。ブログのアドレスの「http://USER-ID.blogN.fc2.com/」のNの部分。
カスタマイズのヒント
No imageと出てしまう画像を消したい。
<!--myimage-->と<!--/myimage-->を以下の部分に追加。画像が設定されている場合にのみ画像を表示する。
  1.             <p class="author-pics"><!--myimage--><img src="<%image>" width="100" height="100" alt="" /><!--/myimage--></p><!-- ///// 画像サイズ width 値と height 値を任意で調整して下さい ///// -->
画像が設定されているがこの部分に表示したくない場合は、単純にこの一行を削除する。

プラグイン無効時:RSSフィード(feeds)

RSSリーダーなどで読むひとのためのフィード用アドレスの提示。

  1.         <div class="section" id="feeds">
  2.             <h3>Feeds</h3>
  3.             <ul class="feeds">
  4.                 <li class="rss1"><a href="<%url>?xml" title="[RSS] 本文を購読する">本文</a></li>
  5.                 <li class="rss2"><a href="<%url>?xml&amp;comment" title="[RSS] コメントを購読する">コメント</a></li>
  6.                 <li class="rss3"><a href="<%url>?xml&amp;trackback" title="[RSS] トラックバックを購読する">トラックバック</a></li>
  7.             </ul>
  8.         </div>
つかわれている変数
<%url>
ブログのURL
「?xml」を続ければ記事本文のRSSアドレスになる。
「?xml&comment」を続ければコメントのRSSアドレスになる。
「?xml&trackback」を続ければトラックバックのRSSアドレスになる。

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

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

#453
カテゴリ:103 HTML CSS JavaScript

trackback

<<【cfdn_09徹底研究ぅ~♪】#6 モードにかかわらず常に表示されるもの(2)サイドバー (2-1)プラグイン有効時 | もっとコメントしようよ2・コメントの長さって (BlogPet)>>

コメント(-3件)

CHOU-FLEUR:画像

> サイドメニューのタイトルを画像で表示する
SEO的には画像よりテキストの方が有効だと思われます。
サイドバーに限らず、以下のような方法で画像を使う事が出来ます。
<h3><span>Recent Entries</span></h3>
h3 {
width
height
background
}
h3 span { display
text-indentで飛ばすやり方もありますが、たまに都合が悪い事もあるので、私はこちらの方法を使います。
リンクの場合は以下のようにします。
<h1><a href="./"><span>サイトのタイトルとか</span></a></h1>
h1 {
width
height
background
}
h1 a {
display
width
height
}
h1 span { display
簡単ですね。

  • 2005年10月07日(金)13:07:07
  • URL
  • 編集
sugar:勉強になりまーす。

カスタマイズについては、サポートフォーラムを眺めて挙げているのですが、おっしゃる通り、折角SEOに心を砕いてあるテンプレートを「後退」させてしまう場合がありますね(^^; その視点が欠けていました。
ここに<span>をもってきてdisplay:none;。
思いもつきませんでした、ありがとうございます。

  • 2005年10月07日(金)13:44:21
  • URL
  • 編集
-:管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

  • 2005年10月07日(金)18:06:24
コメントの投稿

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

http://bittersweetdreams.blog9.fc2.com/tb.php/453-646797f9

Bookmarked

Blog Battler

ブログバトラー

Twitter

    フリーエリア

    上部の説明

    下部の説明

    Utilities

    Ad

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