ナビ編

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

FTPを使用してPHPファイルのダウンロードし、ソース修正してアップロードを行います。FTPがよくわからない方は、危険ですの改造はしないでください。ただし、改造といっても文字を削除するだけなのでやり方は簡単です。

スマホ時のナビ「MENUボタン」の表示を変更する

スマホで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 の文字を削除します。各ファイル1箇所づつ修正が必要です。
     <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. 作成した画像をナビの背景画像として表示させます。

ナビの背景に色をつける

未稿

ご意見箱

皆様のご意見をお待ちします。

  • HAIK7.0.5のseedでやってみました。
    最初のファイル
    \cache\skin_hokukenstyle_haik_seed_pukiwiki.skin.php.qtc
    には該当箇所がありませんでした。仕様が変わったのかもしれません。
    それ以外の5つのファイルからMENUの文字を削除してみたところうまくいきました。
    -- うみほし 2017-07-03 (月) 11:26:04
  • うみほしさん

    \cache\skin_hokukenstyle_haik_seed_pukiwiki.skin.php.qtc
    は、キャッシュなので、キャッシュがある時と無いときでは見た目が変わるかもしれません。

    HAIK 7.0.5でも動作することが確認できて良かったです。
    報告ありがとうございます。 -- tomzo 2017-07-09 (日) 09:55:09

当ページは役に立ちましたか?

選択肢 投票
とても役に立った 2  
少しだけ 1  
あんまり 0