FC2ブログの歩き方ブログ

FC2ブログユーザを応援します。「バックアップとろうよキャンペーン」実施中。トラックバック大歓迎

Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • TB(-) |
  • CO(-) 
  • [Edit
  • [No Tag]

トップページを作りたい

フォーラムで質問がありましたので、作ってみました。

カテゴリのみを表示したトップページ

「トップページを作る」のは常に一定の需要がありますし、私自身、最初にこの変数(<!--index_area-->)を使ってうまくいったときはかなり嬉しかったため、ここにソースを記しておきます。

※「Enterページを作る」については、別途記事を設けました。Enterページを作る


公式テンプレートdefaultでトップページにカテゴリのみを置くカスタマイズ

htmlの該当部分に太字部分を追加。
  1. <%introduction></p>

  2.  </div>
  3.  
  4. <!--index_area-->
  5.  <div id="top">
  6.   <p id="topmsg">
  7.    (メッセージ文言。改行が必要な場合は<br />で改行)
  8.   </p>
  9.   <h3>このブログのカテゴリ</h3>
  10.   <ul>
  11.    <!--category-->
  12.     <li id="c<%category_no>">
  13.      <a href="./blog-category-<%category_no>.html"><%category_name></a>
  14.      </li>
  15.    <!--/category-->
  16.    </ul>
  17.  </div>
  18. <!--/index_area-->
  19. <!--not_index_area-->
  20.  <div id="left" class="column">
  21. (中略)
  22.   <!--/plugin_second-->
  23.  <!--/plugin-->
  24. <!--/not_index_area-->
  25.  
  26.    <div id="footer">
スタイルシートに以下を追加。
  1. #top{
  2. width:400px;
  3. margin-left:auto;
  4. margin-right:auto;
  5. padding:2em;
  6. border:10px #ffa500 ridge;/*枠はお好みで。*/
  7. }

一部カテゴリを表示したい場合

すべてのカテゴリではなく、一部のカテゴリを表示したいときもあります。そのときは、<ul>~</ul>の部分を以下のようにします。タイトル部分(<h3>このブログのカテゴリ</h3>)も「<h3>おすすめカテゴリ</h3>」などにすると良いでしょう。)

  1. <ul>
  2.  <li id="c[カテゴリ番号]">
  3.   <a href="./blog-category-[カテゴリ番号].html">[カテゴリ名]</a>
  4.  </li>
  5.  <li id="c[カテゴリ番号]">
  6.   <a href="./blog-category-[カテゴリ番号].html">[カテゴリ名]</a>
  7.  </li>……
  8. </ul>

<li id="c[カテゴリ番号]">~</li>は手書きです※1。カテゴリ番号とカテゴリ名は表示したいものを入力します。

カテゴリ番号の見方

ブログ上にて、カテゴリをクリック。ブラウザのアドレスバーに表示される

ブログアドレスblog-category-[xx].html

[xx]に入る数字がカテゴリ番号です。

このブログだと、「バックアップとろうよ!」をクリックするとblog-category-12.htmlが表示されます。つまり、カテゴリ名「バックアップとろうよ!」のカテゴリ番号は「12」となります。

アドレスバー

トップページに最新の記事へのリンクを表示する

最新の記事を表示したトップページ

トップページに最新の記事を表示したいときは、<ul>~</ul>の部分を以下のようにします。タイトル部分(<h3>このブログのカテゴリ</h3>)も「<h3>最新の記事</h3>」にしましょう。)

  1. <ul>
  2. <!--recent-->
  3. <li>
  4. <a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
  5. </li>
  6. <!--/recent-->
  7. </ul>

トップページに特定の記事へのリンクを表示する

特定の記事へのリンクを表示する際は、手書きです。

  1. <ul>
  2.  <li id="e[記事番号]">;
  3.   <a href="./blog-entry-[記事番号].html">[記事タイトル]</a>;
  4.  </li>
  5.  <li id="e[記事番号]">;
  6.   <a href="./blog-entry-[記事番号].html">[記事タイトル]</a>;
  7.  </li>……
  8. </ul>

トップページに特定の記事へのリンクを配置する

特定の記事へのリンクを配置したトップページ

たとえばブログの説明やプロフィールなど、必ず最初に読んでほしいページがある場合、このような構成にすることもできます。

ただし、訪問者は必ずしもトップページから見に来るわけではありません。そのことを認識しておく必要があります。

  1. <p id="enter">
  2.    <a href="./blog-entry-X.html">見せたい記事のタイトル</a>
  3. </p>

Xには、見せたい記事の番号を入れます。記事の番号は、「記事の編集」画面で確認するのが最も簡単です。

トップページに「Enter」ボタンを配置する

「Enter」ボタンを配置したトップページ

Enterページを作りたいをご覧ください。

トップページにプラグインカテゴリを配置する

もうお気づきでしょうが、トップページにプラグインカテゴリを置いて、トップページの内容を管理画面で管理することも可能です。

プラグインカテゴリ3を表示

「最新の記事を表示したトップページ」と見かけは同じですが、これは「プラグインカテゴリ3に最新の記事プラグインのみを置いた状態」です。もちろん、プラグインカテゴリ3に複数のプラグインを置くこともできますし、プラグインカテゴリ1、2、3すべてを置くこともできます。

ここではプラグインカテゴリ3を置く場合について書きます。<ul>~</ul>の部分を、以下と差し替えます。

  1. <!--plugin-->
  2.          <!--plugin_third-->
  3.     <h3  id="p-<%plugin_third_tag>"><%plugin_third_title></h3>
  4.      <!--plugin_third_description-->
  5.       <p style="text-align:<%plugin_third_ialign>"><%plugin_third_description></p>
  6.      <!--/plugin_third_description-->
  7.      <%plugin_third_content>
  8.      <!--plugin_third_description2-->
  9.       <p style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></p>
  10.      <!--/plugin_third_description2-->
  11.          <!--/plugin_third-->
  12.         <!--/plugin-->

実際にはテンプレート上のプラグインカテゴリ3の部分(<--plugin_third-->~ <!--/plugin_third-->)を移動させると簡単です。ただ、その際に、「<--plugin_third-->~ <!--/plugin_third-->」を新たに「<--plugin-->~ <!--/plugin-->」で囲むことを忘れないでください。

注意(あらかじめ知っておきたいこと)

  • <!--index_area-->~<!--/index_area-->で囲んだ部分は、トップページのみで表示されます。
  • <!--not_index_area-->~<!--/not_index_area-->で囲んだ部分は、トップページ以外で表示されます。
  • 上記タグは必ず対になります。どちらかが欠けると、ブログが真っ白になります。その際は、慌てずに、元のテンプレートに一旦戻して(復元できるように必ず「複製をしておきます」)、もう一度手順を踏みましょう。データ(ブログの記事)はなくなってはいませんから、落ち着いて作業を試みてください。
  • この記事は公式テンプレートdefaultのソースを元に解説しています。別のテンプレートではHTMLが異なることもあります。その際は、FC2ブログテンプレート変数一覧を見て、変数を頼りに「どこに何が書かれているか」を理解しながら進めてください。
スポンサーサイト

Comment[この記事へのコメント]

No title 

とても為になりました。
ありがとうございました。
  • 七海 
  • URL 
  • at 2009.02.05 16:08 
  • [編集]

Comment_form

管理者のみ表示。

Trackback[この記事へのトラックバック]

トラックバックURL
http://fc2blogwalker.blog21.fc2.com/tb.php/117-e88807d3

-

管理人の承認後に表示されます
  • from  
  • at 2013.04.15 19:53

スクロールで訪問者の意思を確認する

ブログで小説!:外部リンクから来た閲覧者には、メッセージを出す 「“お仲間”な読者だけENTER」ではなく、「“お仲間”な読者だけ下へス...

Menu

from admin

万が一、記載に誤りのある場合や、追加情報がある場合など、該当記事のコメント欄でお知らせいただけるとありがたく存じます。

sugar

ブロとも申請フォーム

analyzer

カレンダー

08 | 2017/09 | 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

StyleChanger

public my share

ブログ内検索

Style Changer

この選択ツールについて up!

見本用記事一覧

アルキカタQ&A検索

アルキカタ版Q&Aの内容を検索します。




複数語は半角スペースで区切って検索してください

analyzer

analyzer

Profile

sugar & FC2blog beauties

Author:sugar & FC2blog beauties
「FC2ブログの歩き方」(アルキカタサイト)FC2ブログ出張所です。このブログは、アルキカタサイトの管理人であるsugarと、協力を申し出たサポータ複数で管理しています。

アルキカタサイト管理人:sugar

&FC2blog beauties(アルキカタサポータ)
 Chako
 cyaimi
 KAI

最近の記事

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