【HypCommonFunc】hyp_preload.phpで変更した箇所まとめ

まとめるほど変更はしてないのですが僕が変更した箇所は以下です

1770行目から


```php:hyp_preload.php
<!--blockMenu-->
<div id="keitaiblockmenu" data-role="header" data-theme="{$this->k_tai_conf['jquery_theme']}">
 <div data-role="navbar">
  <ul><li>{$blockmenu}</li></ul>
 </div>
</div>
<!--/blockMenu-->
<!--blockMenuBar-->
<div data-role="header" data-theme="{$this->k_tai_conf['jquery_theme']}" style="height:55px">
 <a href="{$_url}" data-ajax="false" data-icon="home2" data-iconpos="notext" style="height:50px;width:60px">Home</a>
 <h4>
  <a id="keitaifixedbar_main" href="#keitaiMainContents" data-ajax="false" style="display:inline;text-decoration:none;"><pagetitle></a>
 </h4>
 <a id="keitaifixedbar_block" href="#" data-icon="menu" data-ajax="false" data-iconpos="notext" style="height:50px;width:60px" >block</a>
</div>
<!--/blockMenuBar-->
EOD;
				} else {
					// old way
					$body .= <<<EOD
<!--blockMenu-->
<div id="keitaiblockmenu" data-role="header">
 <div data-role="navbar">
  <ul><li>{$blockmenu}</li></ul>
 </div>
</div>
<div data-role="header">
 <a href="{$_url}" data-ajax="false" data-icon="home" data-iconpos="notext">Home</a>
 <h4>
  <a id="keitaifixedbar_main" href="#keitaiMainContents" data-ajax="false" style="display:inline;text-decoration:none;"><pagetitle></a>
 </h4>
 <a id="keitaifixedbar_block" href="#" data-ajax="false" data-icon="menu" data-iconpos="notext">block</a>
</div>
<!--/blockMenu-->
EOD;
				}
			}
```

# jqm-custom.css、管理画面で追加できるCSSは以下の用にしました、`重要なのは下の方に書いてあります。`

```css:jqm-custom.css
/* F
-----------------------------------------------------------------------------------------------------------*/

.ui-bar-f {
	border: 1px solid #ed1c24 /*{f-bar-border}*/;
	background: #ee3f3f /*{f-bar-background-color}*/;
	color: #000000 /*{f-bar-color}*/;
	font-weight: bold;
	text-shadow: 0 /*{f-bar-shadow-x}*/ 1px /*{f-bar-shadow-y}*/ 1px /*{f-bar-shadow-radius}*/ #444444 /*{f-bar-shadow-color}*/;
	background: -webkit-gradient(linear, left top, left bottom, from( #FF4949 /*{f-bar-background-start}*/), to( #c73434 /*{f-bar-background-end}*/)); /* Saf4+, Chrome */
	background: -webkit-linear-gradient( #FF4949 /*{f-bar-background-start}*/, #c73434 /*{f-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background:    -moz-linear-gradient( #FF4949 /*{f-bar-background-start}*/, #c73434 /*{f-bar-background-end}*/); /* FF3.6 */
	background:     -ms-linear-gradient( #FF4949 /*{f-bar-background-start}*/, #c73434 /*{f-bar-background-end}*/); /* IE10 */
	background:      -o-linear-gradient( #FF4949 /*{f-bar-background-start}*/, #c73434 /*{f-bar-background-end}*/); /* Opera 11.10+ */
	background:         linear-gradient( #FF4949 /*{f-bar-background-start}*/, #c73434 /*{f-bar-background-end}*/);
}
.ui-bar-a {
	border: 1px solid #ed1c24 /*{f-bar-border}*/;
	background: #ee3f3f /*{f-bar-background-color}*/;
	color: #000000 /*{f-bar-color}*/;
	font-weight: bold;
	text-shadow: 0 /*{f-bar-shadow-x}*/ 1px /*{f-bar-shadow-y}*/ 1px /*{f-bar-shadow-radius}*/ #444444 /*{f-bar-shadow-color}*/;
	background: -webkit-gradient(linear, left top, left bottom, from( #FF4949 /*{f-bar-background-start}*/), to( #c73434 /*{f-bar-background-end}*/)); /* Saf4+, Chrome */
	background: -webkit-linear-gradient( #FF4949 /*{f-bar-background-start}*/, #c73434 /*{f-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background:    -moz-linear-gradient( #FF4949 /*{f-bar-background-start}*/, #c73434 /*{f-bar-background-end}*/); /* FF3.6 */
	background:     -ms-linear-gradient( #FF4949 /*{f-bar-background-start}*/, #c73434 /*{f-bar-background-end}*/); /* IE10 */
	background:      -o-linear-gradient( #FF4949 /*{f-bar-background-start}*/, #c73434 /*{f-bar-background-end}*/); /* Opera 11.10+ */
	background:         linear-gradient( #FF4949 /*{f-bar-background-start}*/, #c73434 /*{f-bar-background-end}*/);
}
.ui-bar-f .ui-link-inherit {
	color: #ffffff /*{f-bar-color}*/;
}

.ui-bar-f a.ui-link {
	color: #eeeeee /*{f-bar-link-color}*/;
	font-weight: bold;
}

.ui-bar-f a.ui-link:visited {
    color: #ffffff /*{f-bar-link-visited}*/;
}

.ui-bar-f a.ui-link:hover {
	color: #ffffff /*{f-bar-link-hover}*/;
}

.ui-bar-f a.ui-link:active {
	color: #ffffff /*{f-bar-link-active}*/;
}

.ui-bar-f,
.ui-bar-f input,
.ui-bar-f select,
.ui-bar-f textarea,
.ui-bar-f button {
	   font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-body-f,
.ui-overlay-f {
	border: 1px solid #aaaaaa /*{f-body-border}*/;
	color: #333333 /*{f-body-color}*/;
	text-shadow: 0 /*{f-body-shadow-x}*/ 1px /*{f-body-shadow-y}*/ 0 /*{f-body-shadow-radius}*/ #ffffff /*{f-body-shadow-color}*/;
	background: #f9f9f9 /*{f-body-background-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #f9f9f9 /*{f-body-background-start}*/), to( #eeeeee /*{f-body-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #f9f9f9 /*{f-body-background-start}*/, #eeeeee /*{f-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #f9f9f9 /*{f-body-background-start}*/, #eeeeee /*{f-body-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #f9f9f9 /*{f-body-background-start}*/, #eeeeee /*{f-body-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #f9f9f9 /*{f-body-background-start}*/, #eeeeee /*{f-body-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #f9f9f9 /*{f-body-background-start}*/, #eeeeee /*{f-body-background-end}*/);
}
.ui-overlay-f {
	background-image: none;
	border-width: 0;
}
.ui-body-f,
.ui-body-f input,
.ui-body-f select,
.ui-body-f textarea,
.ui-body-f button {
	   font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-body-f .ui-link-inherit {
	color: #333333 /*{f-body-color}*/;
}

.ui-body-f .ui-link {
	color: #2489ce /*{f-body-link-color}*/;
	font-weight: bold;
}

.ui-body-f .ui-link:visited {
    color: #2489ce /*{f-body-link-visited}*/;
}

.ui-body-f .ui-link:hover {
	color: #2489ce /*{f-body-link-hover}*/;
}

.ui-body-f .ui-link:active {
	color: #2489ce /*{f-body-link-active}*/;
}

.ui-btn-up-f {
	border: 1px solid #ed1c24 /*{f-bup-border}*/;
	background: #f75858 /*{f-bup-background-color}*/;
	font-weight: bold;
	color: #ffffff /*{f-bup-color}*/;
	text-shadow: 0 /*{f-bup-shadow-x}*/ 1px /*{f-bup-shadow-y}*/ 0 /*{f-bup-shadow-radius}*/ #444444 /*{f-bup-shadow-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #FF6868 /*{f-bup-background-start}*/), to( #c84747 /*{f-bup-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #FF6868 /*{f-bup-background-start}*/, #c84747 /*{f-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #FF6868 /*{f-bup-background-start}*/, #c84747 /*{f-bup-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #FF6868 /*{f-bup-background-start}*/, #c84747 /*{f-bup-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #FF6868 /*{f-bup-background-start}*/, #c84747 /*{f-bup-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #FF6868 /*{f-bup-background-start}*/, #c84747 /*{f-bup-background-end}*/);
}
.ui-btn-up-f:visited,
.ui-btn-up-f a.ui-link-inherit {
	color: #ffffff /*{f-bup-color}*/;
}
.ui-btn-hover-f {
	border: 1px solid #FF2029 /*{f-bhover-border}*/;
	background: #FF2029 /*{f-bhover-background-color}*/;
	font-weight: bold;
	color: #ffffff /*{f-bhover-color}*/;
	text-shadow: 0 /*{f-bhover-shadow-x}*/ 1px /*{f-bhover-shadow-y}*/ 0 /*{f-bhover-shadow-radius}*/ #444444 /*{f-bhover-shadow-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #d81b22 /*{f-bhover-background-start}*/), to( #FF242f /*{f-bhover-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #d81b22 /*{f-bhover-background-start}*/, #FF242f /*{f-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #d81b22 /*{f-bhover-background-start}*/, #FF242f /*{f-bhover-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #d81b22 /*{f-bhover-background-start}*/, #FF242f /*{f-bhover-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #d81b22 /*{f-bhover-background-start}*/, #FF242f /*{f-bhover-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #d81b22 /*{f-bhover-background-start}*/, #FF242f /*{f-bhover-background-end}*/);
}
.ui-btn-hover-f:visited,
.ui-btn-hover-f:hover,
.ui-btn-hover-f a.ui-link-inherit {
	color: #ffffff /*{f-bhover-color}*/;
}
.ui-btn-down-f {
	border: 1px solid #FF2029 /*{f-bdown-border}*/;
	background: #FF2029 /*{f-bdown-background-color}*/;
	font-weight: bold;
	color: #ffffff /*{f-bdown-color}*/;
	text-shadow: 0 /*{f-bdown-shadow-x}*/ 1px /*{f-bdown-shadow-y}*/ 0 /*{f-bdown-shadow-radius}*/ #444444 /*{f-bdown-shadow-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #e51c24 /*{f-bdown-background-start}*/), to( #FF232d /*{f-bdown-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #e51c24 /*{f-bdown-background-start}*/, #FF232d /*{f-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #e51c24 /*{f-bdown-background-start}*/, #FF232d /*{f-bdown-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #e51c24 /*{f-bdown-background-start}*/, #FF232d /*{f-bdown-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #e51c24 /*{f-bdown-background-start}*/, #FF232d /*{f-bdown-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #e51c24 /*{f-bdown-background-start}*/, #FF232d /*{f-bdown-background-end}*/);
}
.ui-btn-down-f:visited,
.ui-btn-down-f:hover,
.ui-btn-down-f a.ui-link-inherit {
	color: #ffffff /*{f-bdown-color}*/;
}
.ui-btn-up-f,
.ui-btn-hover-f,
.ui-btn-down-f {
	   font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
	text-decoration: none;
}
.ui-icon-menu {
	background-image: url(http://parallelworld.me/images/menu.png);
	background-repeat: no-repeat;
	background-size:44px 44px;
	background-color:#ff6666;
	-webkit-border-radius:	9px;
	border-radius:9px;
	position:absolute;
	left:7px;
	width:44px;
	height:44px;
	margin:0 !important;
}
.ui-icon-home2 {
	background-image:url(http://parallelworld.me/images/home.png);
	background-repeat:no-repeat;
	background-size:44px 44px;
	background-color:#ff6666;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	position:absolute;
	left:7px;
	width:44px;
	height:44px;
	margin:0 !important;
}
.ui-btn-text {
	top:10px;
	font-size: 16px;
}
.ui-btn-inner {
	height:44px;
}
div.ui-btn-text {
	top:0;
}
h4.ui-title {
	width:100%;
	position:relative;
	top:7px;
}
```

ボタンのサイズが44pxになっていますがこれの理由については
老若男女問わず使えるようにするためです。

デフォルトのサイズですと僕ですら押し間違いをするのに祖母が操作できるかと考えるとほぼできないです。

なので最適なサイズを調べて結果44x44pxになりました。

本当は横幅を広げて縦：横＝44:88pxが一番良いのですが

これをするとフッターバーがものすごく狭くなって、ページタイトルが見えないので辞めました。