テンプレート配布

TIPS:カスタマイズ

  1. TIPS:カスタマイズ

Question-Template

有ると便利かな?と思った情報をまとめておきます。
とりあえず途中ですがupしておきます。
レスポンシブテンプレートのみです。

Answer

サブメニューとかいらないんだよ
つかわなくてへいきですよ。

type-A、type-P

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

削除(使用しません)

type-C、type-D

jquery.toggle.js
 //アコーディオンメニュー
$('nav li,nav > ul > li> a[href^=#]') //省略
        ・
        ・
        ・
        ・
     $('nav li').children('span') //省略
    )
});
3行目~11行目を削除
jquery.toggle.js

※600の部分はテンプレートによって異なるので注意してください
 //小画面時にメニューを閉じてからリサイズするとメニューが表示されないのを防ぐ
$(window).resize(function () {
    var menu = $("#menu"),
        sub  = $(".sub-menu"),
        w = window.innerWidth ? window.innerWidth : $(window).width();
    w > 600 && menu.is(":hidden") && menu.attr("style", ""),
    w > 600 && sub.is(":hidden") && sub.attr("style", "")
});
↓変更
 //小画面時にメニューを閉じてからリサイズするとメニューが表示されないのを防ぐ
$(window).resize(function () {
    var menu = $("#menu"),
        w = window.innerWidth ? window.innerWidth : $(window).width();
    w > 600 && menu.is(":hidden") && menu.attr("style", "")
});


type-F、type-G、type-H、type-I、type-K、type-L、type-M、type-N

jquery.toggle.js
  //アコーディオンメニュー
$('nav li,nav > ul > li> a[href^=#]') //省略
        ・
        ・
        ・
      $('nav li').children('span') //省略
  });
3行目~9行目を削除

狭い画面でもメニューは出しっぱなしがいいのよ
※メニュー側がメインの下に表示されるタイプ(type-E、type-K、type-L、type-N)は、ちょっとややこしいのでここでは説明しません。

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

type-C、type-D、type-F、type-G、type-H、type-I、type-J、type-M

html
<a href="#" id="open"><span id="open-icon"></span></a>   //削除
or
<div id="open"><span id="open-icon"></span></div>  //削除
or
<div id="open"><span id="open-icon"></span><span class="open-text">Open Menu</span></div>   //削除
style.css
※背景色や文字色は 適宜変更してください。
/* スマホ、タブレット用メニュー */
/* menu内 */
display:none;  //削除
position:absolute;  //削除

※position:absolute; 
が書かれていない時は
display:none;  //削除
position:static;   //追加
※背景色や文字色はスマホ、タブレット用メニューのこの辺をいじればかわります
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
jquery.toggle.js
//小画面時にメニュー内リンクを押した場合、一度閉じる
  から
  
}); // ←一番下のこれを残して全て削除
スマホで画像を縮小表示させたいのよ
※18/04/26以降のファイルは実装済み
style.css
/*--------------------------------------------------------
スマホ、タブレット用
横幅○○pxで切り替え
--------------------------------------------------------*/
@media screen and (max-width: ○○px){
        ・
        ・
}
}
↓追加
/*--------------------------------------------------------
スマホ、タブレット用
横幅○○pxで切り替え
--------------------------------------------------------*/
@media screen and (max-width: ○○px){
        ・
        ・
}
img{
max-width:100%;
height:auto
}
}
※この場合、全てのimgが対象になりますので、
一部のみを縮小表示させたい、というような場合には
img.syukusyou{ 
にして、(「syukusyou」は別の名前でもいいです、なんでもいいです)
縮小したい画像にclassをつけてください
img src="○○.png" class="syukusyou"
メニュー書き換えるの面倒なのよ

方法その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'); ?>
<!-- ▲メニュー▲ -->



! 階層が違う場合&ページ毎に別メニューを読み込みたい場合
例えば小説ページと、イラストページで別のメニューを読み込みたいなら
「menu-novel.php」「menu-illust.php」など別のファイルを作って
各htmlで読み込むようにすればいいです

(例)
index.html
link.html
menu.php ←基本はこのメニュー
novel
    |-novel01.html
    |-novel02.html
    |-menu-novel.php ←小説ページメニュー
illust
    |-illust01.html
    |-illust02.html
    |-menu-illust.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株式会社様)