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

2 / 2 ページ

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

メニュー部がヘッダー部分に移行することにより、合わせて全体的にヘッダー書き換えます。オリジナルのままですと、どうしてもテイストが合いませんでした。<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