LoginSignup
0
0

More than 5 years have passed since last update.

@enagii

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

Posted at

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

1770行目から

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は以下の用にしました、重要なのは下の方に書いてあります。

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が一番良いのですが

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0