TIPS：カスタマイズ

Question

サブメニューとかいらないんだよ

つかわなくてへいきですよ。

type-A、type-P

html

<script src="js/jquery.toggle.js"></script>   //削除

jquery.toggle.js

削除(使用しません)

× close

狭い画面でもメニューは出しっぱなしがいいのよ

※一部のみ載せておきます

type-B

html

<div id="open">Open Menu</div>   //削除
<script src="js/jquery.toggle.js"></script>   //削除

style.css

※背景色や文字色は適宜変更してください。

/* スマホ、タブレット用メニュー */
/* #menu内 */
margin-bottom:数値px;  //削除
/* nav内 */
position:absolute;  //削除
/* nav ul内 */
display:none;  //削除

※背景色や文字色はスマホ、タブレット用メニューのこの辺をいじればかわります

menu
nav ul
nav li a,nav li span
nav li a:hover,nav li span:hover
  →background、color

nav li span:after
  →border-top、border-right

× close

スマホで画像を縮小表示させたくないのよ

縮小表示したくない場合は、style.cssの/* 画像の縮小表示 */ の指定部分を全て消してください。

一部の画像のみを縮小表示したい場合

style.css

img.syukusyou{

にして、縮小したい画像にclassをつけてください

html

<img src="○○.png" class="syukusyou">

※syukusyou の部分はなんでも構いません
※gazou でも、なんでもわかりやすいもので大丈夫です

× close

メニュー書き換えるの面倒なのよ

方法その1：一括置換ソフトを使う

html 一括置換などで検索すると沢山のフリーソフトがあります。
当方が愛用させて頂いているのは　TextSS.net
変更部分をコピーして貼ってボタンを押すだけ。
当サイトは素材ページだけで3000程ありますが、5分もかからずに変更ができます。
(あれ…あのファイル、どのページで使ってたっけ…？という検索の時にも便利です)

方法その2：php化

※phpが使用できるサーバーであることが条件です
※htmlでphpが使用できるようにするために、.htaccessへの記述が必要となります。(詳細はこちら)

要は、メニューを1つのファイルにして、各htmlでそのファイルを読み込む、ということです。
これでメニューの書き換えは1つのファイルだけになります。
1つの同じ画像を各htmlで表示させるのと理屈は同じです。

・全てのhtml、phpが同じ階層に有る場合
・階層が違う場合
・ページ毎に別メニューを読み込みたい場合
の3パターンをのせておきます
なるほど、わからん。という場合はお問い合わせください。

全てのhtml、phpが同じ階層に有る場合

各html

<!-- ▼メニュー▼ -->
・
省略
・
<!-- ▲メニュー▲ -->

メニュー内をコピーして

menu.php

という名前で保存
※menu.phpは別の名前でもいいです、なんでもいいです。

各html

コピーした部分を以下に変更

<!-- ▼メニュー▼ -->
<?php include (dirname(__FILE__).'/menu.php'); ?>
<!-- ▲メニュー▲ -->

階層が違う場合

(例)
index.html
link.html
menu.php　←これを読み込む
novel
|-novel01.html
|-novel02.html
illust
|-illust01.html
|-illust02.html

各html

<!-- ▼メニュー▼ -->
・
省略
・
<!-- ▲メニュー▲ -->

メニュー内をコピーして

menu.php

という名前で保存
※menu.phpは別の名前でもいいです、なんでもいいです。

menu.php

<a href="○○○.html">

↓変更

<a href="<?php print $Path; ?>○○○.html">

menu.phpと同じ階層のhtml

<!-- ▼メニュー▼ -->
<?php $Path = "./"; include(dirname(__FILE__).'/menu.php'); ?>
<!-- ▲メニュー▲ -->

menu.phpより下の階層のhtml

(例ではnovel01.htmlやillust01.html)

<!-- ▼メニュー▼ -->
<?php $Path = "../"; include(dirname(__FILE__).'/../menu.php'); ?>
<!-- ▲メニュー▲ -->

階層が違う場合＆ページ毎に別メニューを読み込みたい場合

各html

<!-- ▼メニュー▼ -->
・
省略
・
<!-- ▲メニュー▲ -->

メニュー内をコピーして

menu.php、menu-novel.php、menu-illust.php

という名前で保存

menu.phpと同じ階層のhtml

<!-- ▼メニュー▼ -->
<?php include (dirname(__FILE__).'/menu.php'); ?>
<!-- ▲メニュー▲ -->

menu-novel.phpと同じ階層のhtml

<!-- ▼メニュー▼ -->
<?php include (dirname(__FILE__).'/menu-novel.php'); ?>
<!-- ▲メニュー▲ -->

menu-illust.phpと同じ階層のhtml

<!-- ▼メニュー▼ -->
<?php include (dirname(__FILE__).'/menu-illust.php'); ?>
<!-- ▲メニュー▲ -->

いろいろ応用すれば、基本のメニューは同じで
小説ページだけには基本のメニューに小説用のメニューを追加ということもできるはずです

.htaccessへの記述

htmlでphpが使用できるようにするために、.htaccessへ

<FilesMatch "\.html$">
  AddType application/x-httpd-php .html
</FilesMatch>

や

<FilesMatch "\.html$">
  AddHandler application/x-httpd-php .php .html
</FilesMatch>

のように記述するのですが
各サーバーによって異なりますので、マニュアルやgoogle先生をご確認ください。

各サーバーごとの設定方法の載っているページもあります。
外部リンクです。
【サーバー別】HTML上でPHPを実行するための.htaccessの記述(m630.net様)
HTMLでPHPを動かしたいという無茶を言われた時に見るメモ(ALAKI株式会社様)

× close