北京棒球小僧トップページへ矢印:赤(右3) カープキャップ1Blog technique 矢印:赤(右3)カープユニフォーム1サイドメニューの文字数制限方法

2005年07月05日

カープユニフォーム1 サイドメニューの文字数制限方法

BLOG ONE POINTアドバイス第14弾!!
サイドメニュー変更が意外と楽しい最近の私でございます。
今回はサイドメニューの文字数制限について解説しましょう。
興味のある方は見てください。

これはどう言う事かというと今回は例として『新着記事』で説明します。
普通のサイドバーですと下図の様になっております。
文字制限1-1


1行に1記事であればまだ分かりますが
左の様に記事タイトルが長すぎて
2行目に中途半端に改行されると
読み手側も読む気が無くなってしまいます。
またいちいち記事の文字数に合わせてサイドバーの幅を調整するのも面倒くさい。
そこでーーーーーひらめき
今回は、1行に1記事にする方法を解説します。
前回の箇条書きリンク追加方法と合わせてやりますと
かなりパワーアップしたサイトに変身します。
サイトのスリム化による簡素化は訪問者に良い印象を与えます。
是非チャレンジしてみてください。



文字制限1-3
前回同様、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>

上記が設定変更前の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>

<img src="http://beijingbaseballkids.seesaa.net/mariners/carp-uniform1.gif" alt="carp-uniform1" width="25" height="17" />carp-uniform1←カープのユニフォームアイコンです。

<% article.subject | tag_break | shorten(17) %>この赤字部の追加が今回のポイントです。
サイドバーの幅設定で文字数が決定されますので一概に何文字と言うのは
各自が()内の数値を変えてやってみてください。
参考までに私のサイドーバーは200pxでカープのユニフォームアイコンは25×17です。

文字制限1-2すべてが設定されると右図の様に見やすいサイドーバーに変身します。
上記でもどの部分がタイトル部でどの部分が記事の部分か記述してますが、サイト上のどの部分でも文字数制限は可能です。
前回のRSSコンテンツ、カテゴリ部、コメント部、トラックバック部、お気に入りリンク部とすべてのコンテンツに対応できますので時間がありましたら各コンテンツのどの部分をどう書き換えるか説明します。

どうですかexclamation&question意外と簡単に変えられたのではないでしょうかexclamation&questionまた、HTMLソースと睨めっこして少し分かると更に知りたくなりませんか?
サイトデザインをまだまだ変えたくなると思いますので、引き続きこのコーナー続けていこうかと思いますので宜しくお願いします。

posted by むさC16 at 23:01 | Comment(0) | TrackBack(0) | カープキャップ1Blog technique 上へジャンプ
この記事へのコメント
上へジャンプ
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

上へジャンプ
さくらインターネット株式会社 株式会社ぐるなび 株式会社オートウェイ 損保ジャパンの海外保険 オクトパストラベル・ジャパン
中国醸造株式会社 有限会社BBシステム 日本シグマックス株式会社 日本シグマックス株式会社 株式会社コーエイプランニング OTAIRECORD株式会社