nike鞋 (04/08)
Blog technique
サイドメニュー変更が意外と楽しい最近の私でございます。
今回はサイドメニューの文字数制限について解説しましょう。
興味のある方は見てください。
これはどう言う事かというと今回は例として『新着記事』で説明します。
普通のサイドバーですと下図の様になっております。
1行に1記事であればまだ分かりますが
左の様に記事タイトルが長すぎて
2行目に中途半端に改行されると
読み手側も読む気が無くなってしまいます。
またいちいち記事の文字数に合わせてサイドバーの幅を調整するのも面倒くさい。
そこでーーーーー
今回は、1行に1記事にする方法を解説します。
前回の箇条書きリンク追加方法と合わせてやりますと
かなりパワーアップしたサイトに変身します。
サイトのスリム化による簡素化は訪問者に良い印象を与えます。
是非チャレンジしてみてください。
前回同様、HTML編集ですが難しく考えないでください。
まず、『デザイン』→『コンテンツ』→『新着記事』→『コンテンツHTML編集』まで行ってください。
そこで、上図のHTMLソースは
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
<a href="<% article.page_url %>"><% article.subject | tag_break %>(<% article.createstamp | date_format("%m/%d") %>)</a><br />
<% /loop -%>
<% content.footer -%>
</div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
<a href="<% article.page_url %>"><% article.subject | tag_break %>(<% article.createstamp | date_format("%m/%d") %>)</a><br />
<% /loop -%>
<% content.footer -%>
</div>
上記が設定変更前のHTMLソースです。
＜% content.title %＞：コンテンツタイトル(ここでは『Selected Entries』）
＜% article.subject | tag_break %＞：記事タイトル
(＜% article.createstamp | date_format("%m/%d") %＞)：日付部
では、上記の記事タイトルに文字数制限と可愛いカープアイコンを追加してみましょう。
(赤字が追加部です)
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
<img src="http://beijingbaseballkids.seesaa.net/mariners/carp-uniform1.gif" alt="carp-uniform1" width="25" height="17" /><a href="<% article.page_url %>"><% article.subject | tag_break | shorten(17) %>(<% article.createstamp | date_format("%m/%d") %>)</a><br />
<% /loop -%>
<% content.footer -%>
</div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
<img src="http://beijingbaseballkids.seesaa.net/mariners/carp-uniform1.gif" alt="carp-uniform1" width="25" height="17" /><a href="<% article.page_url %>"><% article.subject | tag_break | shorten(17) %>(<% article.createstamp | date_format("%m/%d") %>)</a><br />
<% /loop -%>
<% content.footer -%>
</div>
<img src="http://beijingbaseballkids.seesaa.net/mariners/carp-uniform1.gif" alt="carp-uniform1" width="25" height="17" />：
←カープのユニフォームアイコンです。<% article.subject | tag_break | shorten(17) %>：この赤字部の追加が今回のポイントです。
サイドバーの幅設定で文字数が決定されますので一概に何文字と言うのは
各自が()内の数値を変えてやってみてください。
参考までに私のサイドーバーは200pxでカープのユニフォームアイコンは25×17です。
すべてが設定されると右図の様に見やすいサイドーバーに変身します。上記でもどの部分がタイトル部でどの部分が記事の部分か記述してますが、サイト上のどの部分でも文字数制限は可能です。
前回のRSSコンテンツ、カテゴリ部、コメント部、トラックバック部、お気に入りリンク部とすべてのコンテンツに対応できますので時間がありましたら各コンテンツのどの部分をどう書き換えるか説明します。
どうですか
意外と簡単に変えられたのではないでしょうかまた、HTMLソースと睨めっこして少し分かると更に知りたくなりませんか？サイトデザインをまだまだ変えたくなると思いますので、引き続きこのコーナー続けていこうかと思いますので宜しくお願いします。
