上部メニューバーのカスタマイズ
公開日：
:
最終更新日：2015/05/11
カテゴリーページをカスタマイズ
カスタマイズ用のYomi-Searchである「DEMO2」の大カテゴリー「サーチエンジン」のページを実際にスマホで表示してスクリーンショットを撮りました。
こちらが上の部分です。
まず、一番上の「新着サイト – 更新サイト – おすすめサイト – 相互リンクサイト」の部分（メニューバー）ですが、改行されてしまうため非常にタップし難いです。おすすめサイトをタップしようとしても相互リンクサイトをタップしてしまうことがありますし、その逆もあります。
ということで、ここを修正します。
改行されてしまう原因は文字数が多いためなので、単純に文字数を減らすことにします。
ここの修正はYomi-Searchの「管理室」でできます。
管理室にログインして【環境設定】の右の「GO」ボタンをクリック。環境設定画面の一番下までスクロールします。
【メニューバー/外部検索エンジン/ヘッダ・フッタスペースの設定】の『1.メニューバーの設定』の部分で「新着サイト」「更新サイト」「おすすめサイト」「相互リンクサイト」の「サイト」の文字を消して、「新着」「更新」おすすめ」「相互リンク」にしてから、左下の「変更する」ボタンをクリックします。
管理室に戻ったら、【HTMLログファイル更新処理】で全てのカテゴリーを更新してください。
これでメニューバー部分が改行されなくなりました。
一行に収まるようになっただけでかなり誤タップは防げるようになりますが、少し文字サイズを調整してみます。
「kt.html」をテキストエディタで開き、<body>タグ直下の以下の部分をCSSで調整できるように修正します。
<!-- メニューバー --> <div align=right><font id=small> <!--HTML--> #<!--(↓修正不可↓) &menu_bar; # (↑修正不可↑)--> print<<"<!--HTML-->"; </font></div> <hr>
「<div align=right><font id=small>」を「<div id=”menu-bar”>」に変えて、「</font>」を消し、以下のようにします。
<!-- メニューバー --> <div id="menu-bar"> <!--HTML--> #<!--(↓修正不可↓) &menu_bar; # (↑修正不可↑)--> print<<"<!--HTML-->"; </div> <hr>
「kt.html」を保存してサーバーにアップしてから、管理室でHTMLログファイルの更新をします。
次に外部スタイルシート（style.css）をテキストエディタで開いて、以下の一行を追加して保存、サーバーにアップします。
#menu-bar{font-size:16px;text-align:right;}
これで文字が大きくなりました。
文字のサイズを変更しないよりは誤タップが少なくなるかと思います。
私の持っているデバイス幅が320pxのスマートフォンではフォントサイズ18pxまでは改行せずに表示できましたが、他の部分の文字サイズとのバランスで一応16pxにしました。ここは後で再度調整するかもしれません。
とりあえずメニューバー部分の修正はここまでとし、次回は子カテゴリーの表示部分を修正したいと思います。
スポンサードリンク
関連記事
-
-
まずはカテゴリーページから
はじめにカテゴリーページをカスタマイズします。 なぜトップページからではなくカテゴリーページか
-
-
登録サイト表示部のカスタマイズ
カスタマイズ前と後を比較できるようにもう一つYomi-Searchをインストールしました。 「DE
-
-
子カテゴリー表示部分のカスタマイズ1
それでは、子カテゴリー表示部分をカスタマイズします。 前回のカスタマイズでこのようになっていま
-
-
子カテゴリー表示部分のカスタマイズ2
カスタマイズ用デモサイトの「サーチエンジン」カテゴリーの子カテゴリー表示部分をリスト表示に変更したH
-
-
その他のカテゴリー表示部分のカスタマイズ
カテゴリーページの一番下にある【その他のカテゴリ】表示部分をカスタマイズします。 ここは前
-
-
検索フォームをカスタマイズ
次に検索フォーム部分をカスタマイズします。 背景色がグレーの部分です。 パソコン等、
-
-
検索フォーム下のリンクをカスタマイズ
検索フォーム下の、[サイトマップ]、[ヘルプ]、[修正・削除]、[このカテゴリに新規登録]の
-
-
カテゴリーページのカスタマイズ仕上げ
前回まででカテゴリーページのカスタマイズはほぼ終了ですが、仕上げとして少し手を加えましょう。
スポンサードリンク
- PREV
- 登録サイト表示部のカスタマイズ
- NEXT
- 子カテゴリー表示部分のカスタマイズ1
