*

カテゴリーページのカスタマイズ仕上げ

公開日： : カテゴリーページをカスタマイズ

前回まででカテゴリーページのカスタマイズはほぼ終了ですが、仕上げとして少し手を加えましょう。

カスタマイズ用のデモサイト「DEMO2」の「Yomi-Search系」カテゴリーをスマートフォンで見てみます。
登録サイト表示部分修正前

登録サイトを表示している部分なんですが、左右の余白幅が違っていてなんか少し変な感じです。

余白をどのように指定しているのかとHTMLソースを見てみると、どうやら左の余白は<ul>タグで囲むことでとっているようです。
これはリストタグですから使い方として少しおかしいですし、見た目も少し変になるということで、とりあえずこの<ul>タグを削除します。

「kt.html」の250行あたり。

$PRmokuji
<ul>
<!--HTML-->

この「<ul>」が開始タグなので削除。

345行目あたりの、

print<<"<!--HTML-->";
</ul>
<!-- 目次表示(下) -->

これが終了タグですので、これも削除します。

そしていつものように、「kt.html」をサーバーにアップ、HTMLを更新します。
登録サイト表示部分修正中

今度は左寄りになっていますのでCSSで修正しましょう。

外部スタイルシート「style.css」を開きます。
登録サイトを表示しているテーブルは「log」というIDでスタイルを指定していました。

#log{ width:95%; max-width:630px; border-style:solid; border-color:#9999CC; }

「登録サイト表示部のカスタマイズ」のときに「width:95%;」としましたが、100%に変更します。
さらに、余白を調整するために「margin:8px auto 0 auto;」を加えて以下のようにしました。

#log{ width:100%; max-width:630px; border-style:solid; border-color:#9999CC; margin:8px auto 0 auto; }

これでスマートフォンで表示するとこうなります。
登録サイト表示部分修正後

少しはよくなったのではないかと思います。

ただこのままでは、パソコン等でウインドウ幅1,000px以上で表示した際にご覧のように登録サイト表示のテーブルが中央寄せになるため上下の部分と比較してなんか間抜けな感じですね。
登録サイト表示部

そもそもYomi-Search自体が、今のようにワイドスクリーンのモニターが主流でなかった頃のものですから、最大でも横幅800px程度での表示を前提にデザインされたのではないかと考えます。

ということで、カテゴリーページのカスタマイズというよりは全体にかかわる部分ではありますが、CSSでbodyの幅を調整することにしましょう。

「style.css」のbodyタグのスタイルを変更します。
以下の部分です。

body{ font-size:11pt; color:#737373; background-color:#ffffff; background-image:url(); margin-left:4%; margin-right:4%; }

左右のマージンを4%ずつとっていますので、幅はデバイスの92%とし、最大で760pxとしてみましょう。
「width:92%; max-width:760px;」を追加です。
これだけだと幅の広いウインドウで見たときに全体が左に寄ってしまうので、中央寄せになるように左右のマージンを「4%」から「auto」に変えました。

body{ width:92%; max-width:760px; font-size:11pt; color:#737373; background-color:#ffffff; background-image:url(); margin-left:auto; margin-right:auto; }

これで以下のような表示になります。
ボディ幅修正後

ウインドウ幅をどれだけ広げてもbodyはこれ以上は広くなりません。
とりあえずこれでよしとしましょう。

外部スタイルシートを変更しているのでついでに。
私はホームページを作成する際いつも文字サイズは「px」で指定しています。
一方、Yomi-Searchでは「pt」で指定されています。
私的には「px」に慣れているので、「10pt」を「12px」に「11pt」を「14px」に変更しました。
まあこれは必要ないといえば必要ないのですが・・・。
また、行間を少しとるために、bodyとtr・tdに「line-height:1.4;」を指定しました。

ここまで、スタイルシート全体はこのようになります。

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{ width:92%; max-width:760px; font-size:14px; line-height:1.4; color:#737373; background-color:#ffffff; background-image:url(); margin-left:auto; margin-right:auto; }
tr,td{ font-size:14px; line-height:1.4; color:#737373; }
hr{ color:#aaaaaa; }
#mid{ font-size:14px; }
#small{ font-size:12px; }
#kanri{ color:#ff9999; } /* 管理人コメントの色 */
#log{ width:100%; max-width:630px; border-style:solid; border-color:#9999CC; margin:8px auto 0 auto; }
#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; } /* 中段バー */

#menu-bar{font-size:16px;text-align:right;}

#kt{width:95%;margin:10px auto;}
#kt ul{list-style:none;margin:0;padding:0;}
#kt li{margin:0 20px 20px 0;float:left;font-size:16px;}

#o-kt{width:95%;margin:10px auto;}
#o-kt ul{list-style:none;margin:0;padding:0;}
#o-kt li{margin:0 20px 20px 0;float:left;font-size:16px;}

.right{text-align:right;}
.c-both{clear:both;}

カテゴリーページカスタマイズの最後に、トップページと同様にカテゴリーページの最上部にもサイトタイトルをヘッダーとして表示するようにします。
「kt.html」の35行目あたり。

<body><a name=top></a>

<!-- メニューバー -->

bodyの開始タグ行の下に次の6行を追加します。

<center>
	<font color=#7D80D7 face="Impact" size=7>
	<b>$EST{search_name}</b>
	</font>
</center>
<hr>

「kt.html」をアップロード、HTMLを更新してカテゴリーページのカスタマイズの終了です。

パソコンでの表示。（画像クリックでデモサイトのページを表示します。）
カテゴリーページカスタマイズ終了（PC）

スマホでの表示。（スマホでご覧の方は画像タップで、PCでご覧の方は画像の下のQRコードをスマホで読み込んでデモサイトのページを実際にご覧いただけます。）
カテゴリーページカスタマイズ終了（スマホ）

demo_2_02_02_qr

スポンサードリンク

【スポンサードリンク】

関連記事

カテゴリーページ

まずはカテゴリーページから

はじめにカテゴリーページをカスタマイズします。 なぜトップページからではなくカテゴリーページか

記事を読む

カテゴリーページ

登録サイト表示部のカスタマイズ

カスタマイズ前と後を比較できるようにもう一つYomi-Searchをインストールしました。 「DE

記事を読む

メニューバー部分修正後スマホ表示

上部メニューバーのカスタマイズ

カスタマイズ用のYomi-Searchである「DEMO2」の大カテゴリー「サーチエンジン」のページを

記事を読む

子カテゴリー表示部分temp.cgi変更後（スマホ）

子カテゴリー表示部分のカスタマイズ1

それでは、子カテゴリー表示部分をカスタマイズします。 前回のカスタマイズでこのようになっていま

記事を読む

子カテゴリー表示部カスタマイズ終了（スマホ）

子カテゴリー表示部分のカスタマイズ2

カスタマイズ用デモサイトの「サーチエンジン」カテゴリーの子カテゴリー表示部分をリスト表示に変更したH

記事を読む

カテゴリーページ下部

その他のカテゴリー表示部分のカスタマイズ

カテゴリーページの一番下にある【その他のカテゴリ】表示部分をカスタマイズします。 ここは前

記事を読む

検索フォームカスタマイズ後

検索フォームをカスタマイズ

次に検索フォーム部分をカスタマイズします。 背景色がグレーの部分です。 パソコン等、

記事を読む

検索フォーム下リンク部分カスタマイズ後

検索フォーム下のリンクをカスタマイズ

検索フォーム下の、[サイトマップ]、[ヘルプ]、[修正・削除]、[このカテゴリに新規登録]の

記事を読む

スポンサードリンク

【スポンサードリンク】

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREV
検索フォーム下のリンクをカスタマイズ
NEXT
検索結果表示ページのカスタマイズ

スポンサードリンク

【スポンサードリンク】

NEW ENTRY

検索フォーム下のリンク修正後
検索フォームとその下のリンク部分の修正

カテゴリーページと同じようになるように検索ページの検索フォームとその下

キーワード検索結果ページの登録サイト表示部分修正後
登録サイト表示部と上部メニューバーの修正

まずは登録サイトの表示部分です。 ここはカテゴリーページと同

検索結果ページ（PC）
検索結果表示ページのカスタマイズ

カテゴリーページのカスタマイズが一応終了しましたので、次に検索結果の表

登録サイト表示部分修正後
カテゴリーページのカスタマイズ仕上げ

前回まででカテゴリーページのカスタマイズはほぼ終了ですが、仕上げとして

検索フォーム下リンク部分カスタマイズ後
検索フォーム下のリンクをカスタマイズ

検索フォーム下の、[サイトマップ]、[ヘルプ]、[修正・削除]

→もっと見る

  • おすすめレンタルサーバー

  • 独自ドメインを取得するなら

PAGE TOP ↑