登録サイト表示部のカスタマイズ
公開日：
:
最終更新日：2015/05/11
カテゴリーページをカスタマイズ
カスタマイズ前と後を比較できるようにもう一つYomi-Searchをインストールしました。
「DEMO1」のほうはそのままで、「DEMO2」のサイトをカスタマイズします。
まずは「template」フォルダー内の「kt.html」をテキストエディタで開いて、headタグ内（<head>と</head>の間）に以下の2行を追加します。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no" />
それぞれの意味については沢山のサイトで解説されていますので説明は割愛させていただきます。詳しく知りたい方は「viewport」「format-detection」で検索していただければ良いかと思います。
追加したらサーバーにアップして、Yomi-Searchの管理画面にログイン、「HTMLログファイルの更新処理」ですべてのカテゴリーを更新します。
そしてカテゴリーページをブラウザで開いてみます。サイトが登録されているカテゴリーがよいので、「サーチエンジン」カテゴリーの「Yomi-Search系」を開きます。
ソースを見ていただければ分かりますが、Yomi-Searchはほとんど全てがテーブルでレイアウトされています。
テーブルの幅を「table width=」で指定している部分とスタイルシートで指定している部分がありますが、とりあえずはソースは気にせずに、ブラウザの幅を狭くしてどのように表示されるか見てみます。
やたら縦長の画像で申し訳ないですが、こんな感じで表示されました。
このようにブラウザの幅を狭くすれば、リキッドレイアウトにするためにどこをいじれば良いか分かりやすくなります。
狭くしたときに右にスクロールしなければ見えない部分、言い換えれば右にはみ出してしまう部分がなくなるようにすれば良いのです。
で、右にはみ出している部分はというと登録サイトの表示部分だけなので、その部分のソースを見てみます。
文字化けしていますが、「<!– ログ侮ｦ –>」から「<!– /ログ侮ｦ –>」の間のテーブルがそうです。
タグは「<table border=3 cellpadding=7 id=log>」となっていますので、CSSでスタイルを指定しているようです。
なので外部スタイルシートを見てみましょう。外部スタイルシートは「ヨミサーチビギナーズガイド」の「ヨミサーチカスタマイズ1」の手順通りにインストールしていれば「link」フォルダー内、Yomi-Searchをダウンロードしたままなにもいじっていない場合は「html」フォルダー内にある「style.css」です。テキストエディタで開きます。
a:link{ text-decoration:underline; color:#6666CC; }
a:visited{ text-decoration:underline; color:#996699; }
a:active{ text-decoration:underline; color:#FF6699; }
a:hover{ text-decoration:underline; color:#FF6699; }
body{ font-size:11pt; color:#737373; background-color:#ffffff; background-image:url(); margin-left:4%; margin-right:4%; }
tr,td{ font-size:11pt; color:#737373; }
hr{ color:#aaaaaa; }
#mid{ font-size:11pt; }
#small{ font-size:10pt; }
#kanri{ color:#ff9999; } /* 管理人コメントの色 */
#log{ width:630; border-style:solid; border-color:#9999CC; }
#log-0{ background-color:#FFCC66; } /* ランキング順位 */
#log-1{ background-color:#CCCCFF; } /* タイトル */
#log-2{ background-color:#FFCCFF; } /* カテゴリ */
#log-3{ background-color:#FFFFFF; } /* 紹介文 */
#log-4{ background-color:#FFFFFF; } /* 管理人コメント */
#title-bar{ background-color:#A7C2DD; color:#000000; font-size:13pt; } /* タイトルバー */
#mid-bar{ background-color:#DDDDDD; } /* 中段バー */
テーブルタグで「id=log」となっていますので、11行目が該当部分です。「width:630;」と固定幅で指定されていますので、「width:95%;」に変更してみます。
下のように登録サイトの表示部分も右にはみ出さなくなりました。
ブラウザの幅を狭くしても右にはみ出さなくなりましたが、逆に幅を元に戻すと登録サイト表示部分のテーブル幅が広くなりすぎて間延びした感じです。
そこで、「max-width:630px;」を加えて以下のようにします。
#log{ width:95%; max-width:630px; border-style:solid; border-color:#9999CC; }
これでブラウザの幅を広げてもテーブル幅は最大で630pxになりますので、最初にページを開いたときと全く同じに見えるようになりました。
ここまでで試しにGoogleのモバイルフレンドリーテストにかけてみます。
あっさり合格です（笑）。
ですが、スマートフォンで見てみると分かりますが、リンクが近くてタップし難かったり、カテゴリー名が無理やり改行されて読みにくかったりと、とてもフレンドリーといえる代物ではありません。
という訳で、さらに修正を加えていくことにします。
スポンサードリンク
関連記事
-
-
まずはカテゴリーページから
はじめにカテゴリーページをカスタマイズします。 なぜトップページからではなくカテゴリーページか
-
-
上部メニューバーのカスタマイズ
カスタマイズ用のYomi-Searchである「DEMO2」の大カテゴリー「サーチエンジン」のページを
-
-
子カテゴリー表示部分のカスタマイズ1
それでは、子カテゴリー表示部分をカスタマイズします。 前回のカスタマイズでこのようになっていま
-
-
子カテゴリー表示部分のカスタマイズ2
カスタマイズ用デモサイトの「サーチエンジン」カテゴリーの子カテゴリー表示部分をリスト表示に変更したH
-
-
その他のカテゴリー表示部分のカスタマイズ
カテゴリーページの一番下にある【その他のカテゴリ】表示部分をカスタマイズします。 ここは前
-
-
検索フォームをカスタマイズ
次に検索フォーム部分をカスタマイズします。 背景色がグレーの部分です。 パソコン等、
-
-
検索フォーム下のリンクをカスタマイズ
検索フォーム下の、[サイトマップ]、[ヘルプ]、[修正・削除]、[このカテゴリに新規登録]の
-
-
カテゴリーページのカスタマイズ仕上げ
前回まででカテゴリーページのカスタマイズはほぼ終了ですが、仕上げとして少し手を加えましょう。
スポンサードリンク
- PREV
- まずはカテゴリーページから
- NEXT
- 上部メニューバーのカスタマイズ
