LoginSignup
1
1

More than 5 years have passed since last update.

【HypCommonFunc】フッターバーのサイズを変更する

Last updated at Posted at 2014-02-05

hyp_preload.phpの1770行目付近のこの内容に変更

styleをつけて適当にwidthとheightを指定しただけですが、

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-->

data-iconのところは自分で作成する

HypCommonの設定を開き、モバイル設定の追加CSSの中にオリジナルのテーマを入れますが、ここに以下を追加

今回はテーマ f があるとして作っています。

jquery_custom.css
.ui-icon-menu {
    background-image: url(サイトURL/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(サイトURL/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;
}

アイコンの大きさはbackground-sizeで指定
アイコンが見えるサイズはwidth heightで指定

【平成26年2月5日16時50分追記】
修正したcssを追加

1
1
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
1
1