FlatPress.info

Information & blog

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

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

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

 

FlatPress での Widget の構造(たぶん)

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

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

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

 

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

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

widget-setting

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

 

 

固定ページを作成する

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

edit-fix-page

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

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

page-fix-menu

page-fix-menu-add

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

FlatPess 記事

Copyright c  flatpress.info 2015. All Rights Reserved.