コンテンツ「カテゴリ」、「最近の記事」をサイドナビに【前編】

 ここでは、コンテンツの「カテゴリ」や「最近の記事」を、「スタイルシートでサイドナビを作成する」で紹介したようなデザインにカスタマイズする手順を紹介します。
【前編】で1と2、【後編】で3を掲載します。
  1. コンテンツHTML編集
  2. 保存⇒再構築で確定する
  3. スタイルシートを設定する

1.コンテンツHTML編集

 「デザイン」→「コンテンツ」でコンテンツ編集ページを開き、サイドバーにある「カテゴリ」もしくは「最近の記事」のリンクをクリックして、

コンテンツページを開く

                  
開いたページの右上にある「コンテンツHTML編集」と書かれたリンクをクリックします。

コンテンツHTML編集ページを開く


下の画像のようなページが表示されるので、この内容を多少変更していきます。
下の画像は「カテゴリ」のコンテンツHTML編集を開いたページですが、「最近の記事」の方もも書かれているコンテンツHTMLはほとんど同じです。


開いたコンテンツHTML編集ページ



編集前のコンテンツHTMLソース

コンテンツ「カテゴリ」の編集前
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br />
<% /loop -%>
<% content.footer -%>
</div>
コンテンツ「最近の記事」の編集前
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>)<a href="<% article.page_url %>"><% article.subject | tag_break %></a><br />
<% /loop -%>
<% content.footer -%>
</div>

 このHTMLを多少変更していきます。


→ スタイルシートのセレクタを変更する

変更前

<div class="sidetitle">〜〜〜</div>
<div class="side">



</div>
変更後
<div class="miginvtitle3">〜〜〜</div>
<div class="miginavi3">



</div>

 サイドバーにある各コンテンツ(「最近の記事」、「カテゴリ」、「過去ログ」など)の、タイトル部分のスタイルを指定しているセレクタ【.sidetitle】と、各コンテンツの中身の部分のスタイルを指定しているセレクタ【.side】を、私が適当に作ったセレクタ名【.miginvtitle3】と【.miginavi3】にそれぞれ変更しています。

各セレクタ名の内容

【.sidetitle】・・・テンプレートごとに定められている、サイドコンテンツのタイトル部分のスタイルを指定するセレクタ。

【.side】・・・テンプレートごとに定められている、サイドコンテンツの中身のスタイル指定するセレクタ。

【.miginvtitle3】、【.miginavi3】・・・適当に名づけたセレクタ名。それぞれ
<div class="セレクタ名">〜〜〜</div>
の範囲内のスタイルを指定。

このセレクタ【.miginvtitle3】、【.miginavi3】の内容(宣言)は次ページ「3.スタイルシートを設定する」で記載します。


 セレクタ名を変更せずにスタイルシートの編集画面で【.sidetitle】と【.side】のセレクタの内容(宣言)を変更することも可能ですが、その場合はサイドナビにあるその他のコンテンツのスタイルも一括して変更されてしまいます。



→ 改行の<br />タグを削除する
 下の例は「カテゴリ」ですが、「最近の記事」の場合も全く同じです。

変更前





<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br />


赤い文字の部分を削除する。

変更後





<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)


改行タグを削除する理由
 次のページで説明するスタイルシートにdisplay:block;という記載があり、ブロックレベル要素に変更されることで自動的に改行されます。
 そのため、<br />タグが残っていると二度改行されてしまい、無駄な余白ができてしまうので削除します。


→ コンテンツ「カテゴリ」・・・記事件数を削除する場合
個々のカテゴリ名の後に続く、 (6) ←などと書かれたカテゴリの記事件数の部分を削除します。

変更前





<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)


赤い文字の部分を削除する。
変更後




<a href="<% category.page_url %>"><% category.name | tag_break %></a>


カテゴリの件数の部分を削除する方法は赤い文字の部分を削除するだけです。


→ コンテンツ「最近の記事」・・・日付を削除する場合
個々の記事タイトルの前にある (12/10) ←などと書かれた日付の部分を削除します。

変更前





(<% article.createstamp | date_format("%m/%d") %>)<a href="<% article.page_url %>"><% article.subject | tag_break %></a>


赤い文字の部分を削除する。
変更後




<a href="<% article.page_url %>"><% article.subject | tag_break %></a>


日付の部分を削除する方法は赤い文字の部分を削除するだけです。

2.保存⇒再構築で確定する

 コンテンツHTMLを変更後、ページ下にある「保存」ボタンを押すとページの上に再構築の画面があらわれるので、再構築する範囲を指定して再構築を実行します。

保存して再構築

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。