メニューの表示位置を変える

FlatPress.world のメニューの表示位置を変えてみることにしました。ホームページとして、右または左部分にメニュー選択を持つ例は多いと思います。また、ヘッダー部分の下側にメニュー選択を持っている例も少なくありません。現時点での FlatPress のデザインでは、なるべく縦方向の寸法を短くしたいという意図があるため、右側にメニューを作るのではなくヘッダー下部に変更してすることにしました。

そのためには、次のことが必要となるでしょう。

ヘッダーを表示しているテンプレートを探す。
そこのメニューを表示する領域をスタイルシートを用意する。
現メニューが Widget として扱われているので、同様の仕組みで作る。
新たなメニューを固定ページとして作成する。
ウィジェットの設定を改めてしなくても、上述で済みとなっているだろう。

FlatPress での Widget の構造（たぶん）

Menu 部のテンプレートはどのような仕組で、そのメニューを表示させているかを調べてみました。こんな風に id を指定して中身を表示しているようで、この id を実験として表示させてみると、[widget-bp-menu]のようになっていました。

<div id="{$id}">
{$content}
</div>

現在のmenu 部分は、[widget-bp-menu]というid で表示されているので、ヘッダー部分でそのように表示されれば言い訳です。実際に試してみると、ヘッダー画像やレイアウトも合わせて変更したにと、デザインがマッチしないので、具体的な設定変更の内容説明は先に送ります。

ウィジェット化と場所の指定

Menu の表示位置は簡単にずらせることができます。また、その他のもの、たとえばカテゴリ表示なども同じく表示位置を変更できます。この仕組みの画面になっています。「管理パネル」の「ウィジェット」において、マウス操作で表示場所（右パネルや上パネルなど）や削除ができます。

ヘッダー部分の改造とmenu部分の修正後に、ここでmenuの表示位置を変更してください。

固定ページを作成する

ブログとは別に「固定ページ」を作成することもできます。オリジナルでは「ページ」という言葉になってますが、ブログとページの判別が庵主には難しいので「固定ページ」という表現にしています。ここでは「新しいページ」も作れるのですが、今はメニュー部の改造なので、以下の画面から Menu を編集してください。

メニューの構成を変更する

オリジナルの右側の構成は「管理エリヤ」と「メニュー」の二つがあるのですが、これを集約してしまって、縦方向デザインをより狭めたいと思います。

「固定ページ」の書き方（シンタックス）もbbcode で書かれていますね。なお、後からわかることですが、空白を開けるためのダミーも書き加えています。

ヘッダーデザインを変更する

メニュー部がヘッダー部分に移行することにより、合わせて全体的にヘッダー書き換えます。オリジナルのままですと、どうしてもテイストが合いませんでした。<div id="toppanel">のcss 部分から書き加えてください。

/fp-interface/themes/leggero/header.tpl

<body>
<div id="body-container">
<div id="head">
<h1><a href="/{$smarty.const.BLOG_BASEURL}">{$flatpress.title}</a></h1>
<p class="subtitle">{$flatpress.subtitle}</p>
</div> <!-- end of #head -->
<!-- 2014-8-20 -->
<div id="toppanel">
{widgets pos=top}
<div id="{$id}">
{$content}
</div>
{/widgets}
</div>
<div id="outer-container">
<!-- 2014-8-17 -->
<div id=servername>
{if ($servername == "flatpress.world")}
{$servername}
{/if}
</div>

css ファイルも修正する

/fp-interface/themes/leggero/leggero/res/common.css

/* ===== toppanel ===== */
#toppanel {
    font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
    padding-top: 2px;
    padding-left: 1em;
    padding-bottom: 2px;
    background: #464;
    margin: 0em;
    margin-bottom: 0px;
    margin-top: -20px;
    height: 18px;
    Opacity: 0.8;
}
#toppanel a:link, #toppanel a:visited {
    color: #fff;
}
#toppanel li {
    width: 5em;
    float: left;
}
#toppanel ul {
    list-style:none;
}
#head {
    margin: 0px;
    border: 0px;
    background-image: url('../imgs/Leaves-l.jpg');
    background-position: 0px -30px;
}
#head h1 {
    font-size: 2em;
    letter-spacing: 2px;
    margin: 0 0 10px 90px;
}
.subtitle {
    padding-left: 90px;
    padding-bottom: 50px;
}

また、ヘッダーに挿入する画像は下のものにしましたが、これは/fp-interface/themes/leggero/leggero/imgs/ 配下に格納しておきます。

（http://news.7zz.jp/wp-content/uploads/Leaves-l.jpg）

さて、これで上述した menu の位置（ウィジェット）の変更を忘れずに行って、デザインがどう変わったか確かめてみます。後先が逆になりましたが、ウィジェット設置のところで、「AdminArea」と「Menu」のウィジェットは削除欄に移動させて、右側欄には表示されないようにします。また、何らかの手違いで「管理パネル」が表示されなくなってしまった際には、flatpress.world/admin.php のように admin.php に直接アクセスします。

出来上がった新デザイン

こんな感じに仕上がりました。Login, Logoff とそれに Post や AdminArea へもリンクしています。

FlatPress.info

Information & blog