トップページにコンテンツ「更新情報」を設置する【中編】

 「トップページにコンテンツ「更新情報」を設置する【前編】」のつづき。
前編】で1〜3、【中編】で4・5【後編】で6・7を掲載します。
  1. コンテンツ「最近の記事」をメインに設置する
  2. トップページのみ表示する設定にする
  3. タイトル・表示件数の設定
  4. コンテンツHTML編集
  5. 保存⇒再構築で確定する
  6. スタイルシートを設定する
  7. 使用した画像素材

4.コンテンツHTML編集

 【前編】の「3.タイトル・表示件数の設定」で開いたページの右上にある「コンテンツHTML編集」と書かれたリンクがあります。ここをクリックすると、

コンテンツHTML編集へのリンク


下の画像のようなページが表れます。この内容を多少変更していきます。


コンテンツHTML編集ページ



HTMLソースの編集前と編集後

このサイトのトップページに設定した「更新情報」のコンテンツHTMLの編集例です。

■編集前
HTML編集前

                  
■編集後
HTML編集後


変更箇所を1つずつ見ていきます。

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

変更前

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



</div>
変更後
<div class="topnew01">〜〜〜</div>
<div class="topnew02">



</div>

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

各セレクタ名の内容

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

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

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

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


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


→ 記事タイトルの前にある日付を削除する
このサイトのトップでは日付の部分を削除したので削除する範囲を説明します。消したくなければ別に消す必要はありません。

変更前





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


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




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


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


→ 記事タイトルの前にボタン画像()を貼る

変更前





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


日付が表示されている状態のコンテンツHTMLです。

変更後





<img src="http://ボタン画像のURL" /> <a href="<% article.page_url %>"><% article.subject | tag_break %></a><br />


日付の部分を削除して、その部分にボタン画像のアドレスを貼り付けています。その後に続くアンカータグ<a>の前に半角スペースを挿入しています。これは、ボタン画像と記事タイトルの間に少しだけすき間が欲しいので挿入しました。




→ どうしてもコンテンツタイトルの変更が反映されない場合
 前の項目「3.タイトル・表示件数の設定」で、タイトルの変更の反映が不安定だと書きました。保存・再構築をやり直したり、時間を置いて(1日半くらい?)設定が反映されるのを待つべきだと思いますが、それでも上手くいかない場合は、コンテンツHTML編集で直接書き換える方法もあります。

変更前

<div class="sidetitle"><% content.title %></div>




変更後
<div class="topnew01">コンテンツのタイトル</div>




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

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

topnew09.gif

×

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