FlatPress.info

カテゴリ表示のカスタマイズ

相変わらず、現実験サイトは縦長に思えてなりません。そこで、カテゴリ部分の圧縮を考えてみたいと思います。まず、今回のスタート地点での画面の様相は次のようです。また、引き続く画面は、天井部の空白を除去したものになります。

天井部の空白を除去

/flatpress.world/fp-interface/themes/leggero/leggero/res/style.css

/* FlatPress.info 2014-8-23 */
/* body { margin: 80px 0 0 0 } */
body{margin: 0} 

カテゴリの一部をリスト表現解除にする

カテゴリ部分を表示させているのは次のプログラムが担当しています。また、このプログラムは「カテゴリ表示」全般を担当しているので、ブログ投稿(記事作成)画面でのカテゴリ選択の表示(デザイン)へも同様の影響を与えます。この図はデフォルトの状況での「ブログ投稿」時のカテゴリ選択のスナップです。

さて、改造の話に移ります。

/latpress.world/fp-includes/smarty/plugins/function.list_categories.php

まずは、このプログラムでのサブカテゴリ表示のリスト化を停止してみましょう。この辺りまで調べてくると、FlatPress の作者のプログラマーとしての腕前に感嘆してしまいますね。ここでは、連想配列されている状況において、下に行で li タブを除去し /li タブを空白一つに書き換えて対応しました。

function smarty_function_list_categories($params) //, &$smarty)
{
    $cat_params = array(
                             'ild'=>'<li>','ird'=>"</li>\n",
                             'old'=>"<ul>\n",'ord'=>"</ul>\n",
                             'name' => isset($params['name'])? $params['name'] : '',
                             'selected' => array()
);

    //list($catId) = each($categories);
    $cat_params = array_merge($cat_params, $params);

    // FlatPress.info 2014-8-24
    $noli = array('ild'=>'','ird'=>"&nbsp;");
    $cat_params = array_merge($cat_params, $noli);

css ファイルもこのように変更してみました。(日付部分で示しています）
/flatpress.world/fp-interface/themes/leggero/leggero/res/column.css

/* === List === */
#column ul li table { font-size: 100% }
/* FlatPress.info 2014-8-23 */
#column #widget-categories ul ul {
border-left: 4px solid #c5e19b;
margin-left: 0.5em;
}


#column ul {
list-style-type: none;
/* FlatPress.info 2014-8-23 */
/* margin-right: 10px; */
/* margin-bottom: .5em; */
padding-left: 1em
}
#column fieldset { margin: 0 5px 0 5px } 

かなり縦方向が縮まってきています（なるべくスクロールをしたくないので）。下をみると一目瞭然ですが、記事を書く方でのカテゴリチェックもこのように見やすくなったようです。