問題を整理すると、アーカイブ(年と月)が縦に並んでいて天地に広がり過ぎています。恐らく、3年分を横に並べられるのではないでしょうか。
どの部分を治すかですが、例によって使われているテンプレートを調べると widget.pl です。これはウィジェット機能(別途に調べることにしましょう)が利用されていることを示しています。そこで、[FlatPress/fp-plugins/archives/]のディレクトリが目に付くことになりました。
plugin.archives.php を修正
/FlatPress/fp-plugins/archives/plugin.archives.php を修正します。下の部分のハイライトしているところです。少ない修正ですが必要となります。
<p style=clear:both>
この1行です。
挿入部分は下のハイライトしているところです。
function plugin_archives_widget() { lang_load('plugin:archives'); global $lang, $PLUGIN_ARCHIVES_MONTHLIST; return array( 'subject' => $lang['plugin']['archives']['subject'], 'content' => ($list = $PLUGIN_ARCHIVES_MONTHLIST->getHtmlList()) ? '<ul>' . $list . '</ul><p style=clear:both>' : "<p>{$lang['plugin']['archives']['no_posts']}</p>" ); }
アーカイブ部分の CSS の様相を見る
下の画面は、Firefox の CSS を調査するプラグイン(FireBug)を利用しているところです。このようにして調べると、青枠線の部分を縮小すればよいことがわかります。加えて、右へ右へと次の年が回り込みをするようにもしないといけませんね。そこでスタイルシートとしては[float: left]を使いましょう。クラスは何かをみると、[class=archive-year]に当たりを付けて確かめてみましょう。
(ソースを直さなくても、Firebug を上手に使えば、その場で変化を確かめられます)
ご承知にように FlatPress.world はインタネット側からアクセスできない純粋仮想ドメインです。ところで、実際に活用しようと考え始めたとき、どっちの画面であるのかわからなくなることがあります。
その理由の一つは、ヘッダー部分を含めてまだ(ユニークなデザインにする)カスタマイズに手が届いていない状況であることと、コピーを取って試験をするような場合です。
サーバ名表示をする
そこで、サーバ名を自動的に表示させて容易に判別しようと考えました。
- サーバ名を取得する。(たぶん、php プログラムのどこか)
- その値または有無を変数に格納する。(たぶん、sumarty に引き渡す)
- テンプレートでそれを表示する。(たぶん、ここで判別する)
- テンプレートの場所は、この「テンプレート適用場所の調査」で判明している。
- 表示部分を確認しておき、スタイルシートを書き加える。
サーバ名の取得
/index.php で試しています。
<?php include 'defaults.php'; include INCLUDES_DIR . 'includes.php'; include SMARTY_DIR . 'SmartyValidate.class.php'; define('MOD_INDEX', 1); /* 2014-8-17 */ $servername = getenv('SERVER_NAME'); $smarty->assign('servername', $servername);
最後の3行を index.php の5行目ぐらいに挿入しました。ここでしていることは、ウェブサーバ(Apache)からサーバ名を受け取り、その後、Smarty の変数に引き渡しています。
テンプレートがどの場所に適用されているかを調べてみました。本当は、プログラム構成がどのように成り立っているかを学習してからの方がよいとは思うのですが、FlatPress はデータを処理するというより、データの表現に力点がある訳で、カスタマイズの強く意味するところは、UIの部分だと思えたからです。
考え方:
- FlatPress は Smarty を利用している。
- Smarty にはどのテンプレートが使われたかを表示できる。(Debug)
- ディレクトリ内のすべてのテンプレート(.tpl)を見つけて、テンプレート名を表示させる。
- そのための簡単なスクリプトを作る。
スクリプト例:
#! /bin/sh # display smarty template # add template name # copy oldname # backupdate="copy-2014-8-17" work=/tmp/$0.work debugline='<font color=red><div class=debug_tpl>{$smarty.template}</div></font>' find . | grep .tpl$ > $work while read filename do cp $filename $filename.$backupdate echo >> $filename echo $debugline >> $filename diff $filename $filename.$backupdate done < $work
一応の注意をしておきます。まずは、バックアップを取っておきましょう。自他ともに救われた経験は多いと思います。
実際のディレクトリで試してもよいでしょうし、別の場所にコピーをしてそこで適用してもよいでしょう。
ここでは、記事紹介に便利なように /usr/local/www/virtual/flatpress.world/DISPLAY のように現ディレクトリの直下として試験場所を作りました。スクリプトがうまくいっていたら、赤色で利用されたテンプレート名が読めるです。これが今後のカスタマイズに役立ちます。さて、どんなものでしょうか。
カテゴリを区分して情報(ブログ)が整理できます。以前にタグを利用して情報が便利に探索できたツールがあって、それが TiddlyWiki でした。
記事を書く時に、カテゴリを指定(チェックボタン)します。後で記事追加を予定しているのですが、タブクラウドを利用しての表示も可能です。
カテゴリ区分の見本
カテゴリを作るとどのようになるのか調べてみます。そのためにはある程度の見本を作っておく必要があります。そこで、今使っている Firefox のGmarks のデータを利用してみましょう。Gmarks でデータを export して Gmarks.html を取り出し、それをテキストのみに加工して、Xmind に掛けて、全体像を把握しました。それが次の図です。