> 新着情報タイトルの文字数指定方法 (No. 1483)

質問

迅速なご対応ありがとうございます！

こちらの説明が足りなかったと思うのですが、以下に記載頂いたようなことを希望しておりました。

--------------------------------------------------------------------------------------------------
■ご質問の取り違えの場合
入力の長さは制限はせず、新着情報だけ表示をカットしたいのだという場合は別の方法で調整します。
この場合はお手数ですが再度ご質問下さい。
--------------------------------------------------------------------------------------------------

上記にあるように、新着情報（短い一覧）で表示されるタイトルの文字数を指定したいという意図でした。
お忙しいとは思いますがご教授頂けると幸いです。

回答

※ このご質問と回答は、以下のご質問の続きです。
http://sugutsukaeru.jp/bbs/1482/

ご質問の取り違え大変失礼いたしました。

■新着情報（短い一覧）のデザイン指定方法
新着情報（短い一覧）のデザイン指定は、以下の「テンプレートファイル」を変更する事によって行います。

templates/article/short_list.html
templates/article/short_list.txt


■タイトルの文字数の指定方法
文字数の指定（決めた長さでカット）は、基本的にはCSS（スタイルシート）で表示幅を制限してしまう事により行います。

〇制限事項
CSSを使った制限は、幅に合わせて内容の表示をカットするため、使用するフォントや具体的な入力によって、文字の途中で残りが陰に隠れたような表示になる事があります。


■設定例
CSSはどこに指定してもいいのですが、今回は製品サンプルに既にクラス（class）設定がされていますので、このクラスに新しいスタイルを追加する方法をご紹介したいと思います。

templates/article/short_list.html を開くと <style type="text/css"> 〜 </style> に既にスタイルが色々設定してありますので、ここに以下のスタイル設定を追加して下さい。

=================
.listlink a {
    display: inline-block;
    width: 6em; /* ここを希望の幅に合わせて変更 */
    overflow: hidden;
    white-space: nowrap;
}
=================

上の設定をどこに追加するか迷った場合は、最後の「/* アイコンの設定 ここまで */」の直後に追加して下さい。

また、「width: 6em; /* ここを希望の幅に合わせて変更 */」の部分は「6em」の部分をご希望の幅に変更して下さい。

「em」は、スタイルシートで使用する幅の単位です。「px」なども使えます。詳しい指定方法は一般のCSS参考書などをご参照下さい。


■変更の反映と確認
編集したファイル templates/article/short_list.html をサーバに上書きアップロードした後、今度は管理画面の一覧画面から「再構築（テンプレート変更反映）」ボタンを1回押して下さい。

その後、ブラウザのキャッシュをクリアしてから「短い一覧」を表示してご確認下さい。