ナビ編

N01 スマホ時のナビ「MENUボタン」の表示を変更する(Palleteシリーズ対応)

スマホでhaikのサイトを表示すると、画面右上にナビがMENUボタンとして表示されます。このデザインが前から気になっていたので変更してみました。
画像を作成して、MENUボタンと入れ替えます。


【手順】

1. ナビのアイコン画像を作成します。当サイトでは幅50px、高さ50pxのPNG画像を作成しました。画像のサイズは任意です。
   当サイトのナビアイコン：
2. 作成した画像をツールのメニューからSWFUでアップロードします。
3. 以下のスクリプトをコピーして、フッター内に貼り付けてください。作成した画像の名前とサイズはそれぞれ変更してください。
   当サイトの例）
   　画像ファイル名：icon-bar-menu.png
   　画像サイズ：width:50px height:50px

   #beforescript{{
   <style type="text/css">
   <!--
   /* スマホ時の画面右上にあるMENUボタンを別の画像に変更する */
   .navbar-toggle {
       background: url("/swfu/d/icon-bar-menu.png") no-repeat scroll left center;
       width: 50px;
       height: 50px;
   }
   
   /* スマホ時の画面右上にあるMENUボタンの枠を非表示にする */
   .haik-palette-orange .haik-nav.navbar-default .navbar-toggle {
       border: 0px;
   }
   -->
   </style>
   }}

4. PHPソースを修正するため、以下のファイルをFTPでダウンロードします。

   \cache\skin_hokukenstyle_haik_seed_pukiwiki.skin.php.qtc
   \skin\hokukenstyle\haik_seed\article.skin.php
   \skin\hokukenstyle\haik_seed\fullpage.skin.php
   \skin\hokukenstyle\haik_seed\nomenu.skin.php
   \skin\hokukenstyle\haik_seed\pukiwiki.skin.php
   \skin\hokukenstyle\haik_seed\wide.skin.php

5. 各ソースの以下の記述を探し、MENU　の文字を削除します。各ファイル１箇所づつ修正が必要です。

    <span class="icon-bar-menu">MENU</span>
       ↓　以下のように修正。
    <span class="icon-bar-menu"></span>

6. 修正したPHPファイルを元の場所にFTPでアップロードします。

【解説】

1. テーマhaik_seedのナビはボタンで表示しています。ボタン内の「NENU」の文字はPHPソース内で記述しています。このMENUの文字が邪魔なので削除します。
2. 作成した画像をナビの背景画像として表示させます。

N02 スマホ時のナビアイコンのデザインを変更する(Simpleシリーズ対応)

Simpleシリーズのデザインを使用しているとき、ナビアイコンのデザインを変更する方法を調査しました。
Palleteシリーズより簡単に変更できます。PHPソースの編集は不要です。


【手順】

1. ナビのアイコン画像を作成します。当サイトでは幅50px、高さ50pxのPNG画像を作成しました。画像のサイズは任意です。
   当サイトのナビアイコン：
2. 作成した画像をツールのメニューからSWFUでアップロードします。
3. 以下のスクリプトをコピーして、フッター内に貼り付けてください。作成した画像の名前とサイズはそれぞれ変更してください。
   当サイトの例）
   　画像ファイル名：icon-bar-menu.png
   　画像サイズ：width:50px height:50px

#beforescript{{
<style type="text/css">
<!--
/* スマホ時の画面右上にあるナビアイコンを別の画像に変更する */
.navbar-toggle {
    background: url("/swfu/d/icon-bar-menu.png") no-repeat scroll left center;
    width: 50px;
    height: 50px;
}

/* スマホ時の画面右上にあるナビアイコンの枠を非表示にする */
.navbar-default .navbar-toggle {
    border: none;
}
/* スマホ時の画面右上にあるナビアイコンの内側の3本の横線を非表示にする */
.navbar-toggle .icon-bar {
    display: none;
}
-->
</style>
}}

【解説】

1. SimpleシリーズのナビアイコンはCSSで描画しています。これを非表示にします。
2. 作成した画像をナビの背景画像として表示させます。

ナビの背景に色をつける

未稿