スマートフォンページのフッターに固定メニューを作成してみました

前回スマートフォンページのヘッダーに検索フォームを設置する記事を書いてみたのですが、気に入らなかったのでスマートフォンページのフッターに固定式のメニューを付けてみました(検索フォームも含む)。こんな感じ。

フッターメニュー-3

設置したフッターメニューには「ホーム」「シェア」「記事のトップに戻る」「検索」という4つのボタンを装備して、ついでにTwenty Twelveでずっと気になっていたスマートフォン版の「メニューボタン」も削除してこのフッターメニューに入れ込んでみました。合計5つのフッターメニューです。

各ボタンをクリックするとポワッと中身が出現するタイプです。例えば「シェア」をクリックするとこんな感じ。

フッターメニュー-4

まあ、挙動に関しては実際にスマートフォンから見て確認して頂けたらと思います(変な挙動があれば教えて下さい)。

ただ、今回のカスタマイズは結構大変で難易度も結構高めです。カスタマイズの前にバックアップしておき、まずは記事を最後まで読んでみてからトライする事をおすすめします。

今回参考にさせて頂いたのがコチラのサイトです。非常に勉強になります。

参考:【STINGER5】スクロールしてもフッターで固定するメニューを設置してみたよ!|Shufulife

私の場合はTwenty Twelveのテーマを利用していますが、これを参考に早速作業してみたいと思います。

スポンサーリンク

フッターメニューの作成の手順と流れ

まずフッターのメニューに使う「アイコン」が必要なので、私の場合は「icomoon」でアイコンをダウンロードしてアップロードしておきました。

ちなみに前回自作のSNSボタンを作成した時にダウンロードしたアイコンは次の通り。

フッターメニュー-7

それで今回新たに追加したアイコンがコチラ。再度全部ダウンロードし、スタイルシートも書き換えてます。

フッターメニュー-9

icomoonについては以前もSNS用のアイコンを取得した時の記事がありますので参考に。
アイコン画像をWebフォントに変更して高速化

それからこのスマートフォンのフッターメニューに「記事の先頭に戻る」ボタンも設定します。プラグインで「記事の先頭に戻る」ボタンを設置している場合には一度外しておきます(PCでスマートフォンでも両方表示されるため)。

それでこの「記事の先頭に戻るボタン」を事前に自作しておく事をおすすめします。次の2つの記事で実装できます。

それと、スマートフォンでの条件分岐をするために「functions.php」に記述も必要になります。これも事前にやっておきます。子テーマのfunctions.phpに記述を追加するだけでOKですが、既に記述している場合にはそのままでOK(スティンガーの場合は不要)。
WordPressの条件分岐でスマートフォンとタブレットを分ける方法

さて、自作したトップに戻るボタンはPCでもスマートフォンでも表示されますが、これをPCのみで表示させるように子テーマの「footer.php」で条件分岐をしてやります。まずは自作した時に「footer.php」に追加したコード。

<div id="scroll-top"><p>▲TOP</p></div>

これを条件分岐タグ(if文)で囲ってやってスマートフォンでは表示させないようにします。

<?php if (!is_mobile()) :?>
<div id="scroll-top"><p>▲TOP</p></div>
<?php endif; ?>

それと子テーマに追加したJavascript「scroll-top.js」には次のコードも追加しておきます。

jQuery(function() {
    var pageTop = jQuery('#mobile-top');
       //スクロールしてトップ
        pageTop.click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
        });
  });

結局この「scroll-top.js」の中身はこんな感じになりました。

フッターメニュー-1

以上でとりあえず準備は完了。

スタイルシートの記述

先に子テーマのCSSに記述をしておきます。

/*--------------------------------
モーダルウィンドウ
---------------------------------*/

.modal-window {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
opacity: 0;
line-height: 1.3;
display: none9;
}
.modal-window:target {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
.is-active.modal-window {
display: block9;
}
.modal-window:target {
display: block9;
}
.modal-window .modal-inner {
position: absolute;
top: 100px;
left: 5%;
z-index: 20;
padding:5%;
margin:0 auto;
width: 80%;
overflow-x: hidden;
border-radius: 6px;
background: #fff;
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

.modal-window .modal-close {
display: block;
text-indent: -100px;
overflow: hidden;
}
.modal-window .modal-close:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: #333;
	-moz-opacity: 0.7;
	opacity: 0.7;
}
.modal-window .modal-close:after {
content: '\00d7';
position: absolute;
top: 70px;
right:15%;
z-index: 20;
margin:0 auto;
background: #fff;
border-radius: 2px;
padding: 10px 10px;
text-decoration: none;
text-indent: 0;
}

.modal-window {
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}



/*--------------------------------
スマホのフッターメニュー
---------------------------------*/
ul.footer_menu {
	margin: 0 auto;
	padding: 12px 0;
	width: 100%;
	overflow: hidden;
	display: table;
        table-layout: fixed;
        text-align: center;
        width: 100%;
}

ul.footer_menu li {
	margin: 0;
	padding: 0;
	display: table-cell;
	vertical-align:middle;
	list-style-type: none;
	font-size: 13px;
       line-height: 15px;
}

ul.footer_menu li a i{
	font-size: 24px;
}

ul.footer_menu li a {
	border: none;
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

.footer_menu {
	position: fixed;
	bottom: 0;
	left:0;
	background: #000;
	z-index: 9999999999;
	-moz-opacity: 0.9;
	opacity: 0.9;
}


/*--------------------------------
SNSの部分
---------------------------------*/


.modal-window .modal-inner.sns{
	margin:0 auto;
	text-align:center;
}
.modal-inner ul {
	list-style:none;
}
.modal-inner li {
	list-style:none;
	float:left;
	width:25%;
	margin:3%;
}
.modal-inner li a {
	font-size:150%;
	position:relative;
	display:block;
	padding:10px;
	color:#fff;
	border-radius:6px;
	text-align:center;
	text-decoration: none;
}
.modal-inner li a:hover {
	box-shadow:none;
}


.share li a {display : block;
    padding : 10px 5px;
    color : #fff;
    font-size : 14px;
    text-decoration : none;
    text-align : center;}
.share li a:hover {opacity :0.8;
    color : #fff;}
.share li a:visited{ color: #fff;}

.tweet a{background-color : #55acee;}
.facebook a{background-color : #315096;}
.googleplus a{background-color : #dd4b39;}
.hatena a{background-color : #008fde;}
.line a{background-color: #00c300;}
.pocket a{background-color :#f03e51;}
.rss a {background-color: #ff8c00;}
.feedly a {background-color: #6cc655;}

.share-sm {margin:0;}
.share-sm ul:after {content : "";
    display : block;
    clear : both;}

/*--------------------------------
メニューの部分
---------------------------------*/

.mod li{
  float:none;
  display:block;
  width:100%;}

.mod li a {
  text-align: left;  /* メニューを左寄せ */
  font-weight: bold;  /* メニューを太字に */
  background: #000;  /* メニューの背景色 */
  margin: 2%;
font-size: 14px;  /* メニュー文字サイズ */
}

以上がCSSです。後で少し補足の説明をします。

フッターメニュー設置

CSSができたら今度は子テーマの「footer.php」にフッターメニューを追加していきます。「footer.php」の一番最後の方に「/body」というタグがあるのでその直前に次のコードを入れます。

<?php if(wp_is_mobile()) { ?>

<ul class="footer_menu">
<li><a href="<?php echo home_url(); ?>/"><span class="icon-home" style="font-size:16px"></span><br>ホーム</a></li>
<li><a href="#modal-p01"><span class="icon-share2" style="font-size:16px"></span><br>シェア</a></li>
<li><a href="#modal-p02"><span class="icon-search" style="font-size:16px"></span><br>検索</a></li>
<li><a href="#modal-p03"><span class="icon-menu"></span><br>menu</a></li>
<li><a id="mobile-top" href="#wrapper"><span class="icon-circle-up" style="font-size:16px"></span><br>TOP</a></li>
</ul>

<?php } else { ?> <?php } ?>

この時点で「ホーム」と「TOP」ボタンは機能すると思いますが、「シェア(#modal-p01)」「検索(#modal-p02)」「メニュー(#modal-p03)」の3つはまだ機能しません。

これから中身を追加しますが、この部分をちょっと解説しておきます。

「span class=○○」「/span」という部分がicoMoonから取得したアイコンの呼び出しコードです。私と同じアイコンを取得している方は同じコードなのでこれでOKですが、違うアイコンを利用する場合にはこの「span class=○○」を書き換える必要があります。これは以下シェアボタンの時にも使ってますので確認しておいて下さい。

それでは更に追加作業です。先ほど「footer.php」に追加したコードの最後の部分を確認してください。

<?php } else { ?> <?php } ?>

これの直前に次のコードを入れます。

<!--modal-p01の中身-->
<div class="modal-window" id="modal-p01">
<div class="modal-inner">
<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
?>
   <ul class="share-sm">
<!--ツイートボタン-->
      <li class="tweet"> 
       <a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton"><span class="icon-twitter"></span></a>
      </li>
<!--Facebookいいね!/シェアボタン-->      
      <li class="facebook">
       <a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><span class="icon-facebook"></span></i></a>
      </li>
<!--Google+1ボタン-->
       <li class="googleplus">
  <a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><span class="icon-google-plus"></span></a>
      </li>
<!--はてブボタン-->  
      <li class="hatena">       
      <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><span class="icon-hatebu"></span></a>
      </li>
<!--LINEボタン-->   
      <li class="line">
  <a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><span class="icon-line"></span></a>
  </li>     
<!--ポケットボタン-->      
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><span class="icon-pocket"></span></a></li>   
    </ul>      
</div>
 <a href="#!" class="modal-close">&times;</a> 
 </div>


<!--modal-p02の中身-->
<div class="modal-window" id="modal-p02">
<div class="modal-inner">
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url('/'); ?>">
  <div>
    
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="検索" />
  </div>
</form>
</div>
<a href="#!" class="modal-close">&times;</a> 
</div>


<!--modal-p03の中身-->
<div class="modal-window" id="modal-p03">
<div class="modal-inner">

<ul class="mod">
<li><a href="#">タイトル1</a></li>
<li><a href="#">タイトル2</a></li>
<li><a href="#">タイトル3</a></li>
<li><a href="#">タイトル4</a></li>
<li><a href="#">タイトル5</a></li>
<li><a href="#">タイトル6</a></li>
</ul>

</div>
<a href="#!" class="modal-close">&times;</a> 
</div>

こんな感じになります。

フッターメニュー-2

後は最後に追加した「メニュー(modal-p03の中身)」を編集して表示させたい記事のタイトルとURLを入れます。「#」の部分だけを消してURLを入れます。それでタイトル1から6までの部分にその記事のタイトルを入力。

ただし、タイトルが長すぎると入りきれないのでちょっと短めのタイトルが良いかもしれません。全部できたら保存します。

実際にスマートフォンで確認する場合には一度WordPressのキャッシュとか削除しないと以前のままのデータが表示されますので、キャッシュ系のプラグイン等を利用している場合にはキャッシュを削除もしくはプラグインを停止してから確認がいいと思われます。

Twenty Twelveのメニューを削除

これはずっと気になっていたんですよ。これね。

フッターメニュー-5

今回フッターメニューにこのメニューの中身を入れたのでこのボタンは削除することにしました。

子テーマの「header.php」のこの部分を探します。

<nav id="site-navigation" class="main-navigation" role="navigation">

この記述の下のまとまりの一部を削除するのですが、このまとまりの部分を全部削除するとPCページのナビゲーションメニュ-まで消えるので注意です。削除するのはこの部分です。

フッターメニュー-6

「button」~「/button」それと「a class=”assistive-text”」~「/a」の部分を削除しておきました。

以上フッターメニューを設置するカスタマイズでした。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

スマートフォンページのフッターに固定メニューを作成してみました”に50件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. 佐々木

    お早い回答、感謝いたします!
    とても簡単に出来るのですね。
    お忙しい中、本当に有難うございました。

  2. しげぞう 投稿作成者

    佐々木様

    コメントありがとうございます。まず、サイドバーの各部分(カテゴリーとか人気記事とか最近の記事など)にはそれぞれidというか名前がつけられてます。サイドバーに追加されたテキストウィジェットは「text-1」とか「text-2」という感じで順番に数値が割当てられてます。それを調べる必要があります。

    調べるにはPCのでサイトを開き、飛ばしたいサイドバーのタイトル部分にカーソルを合わせて右クリック⇒検証をクリックします。するとその部分のHTMLとかCSSなどが表示されますので以下のような記述(aside id)を探します。私の人気記事のidは「text-3」になってました。

    aside idが見つかったらfooter.phpのメニューを書いてる部分に以下のようにリストタグ(li)を追加します。飛び先のIDに#をつけて記述。


  3. 人気記事
  4. 上記は私のサイトのやつなので#text-3となっている所を自分のものに変更してください(#id名)。

  5. 佐々木

    しげぞう様

    お世話になります。
    フッターメニューの件です。今しげぞう様がフッターメニューに置いてある「人気記事」のようなスクロール機能を使ってみたいのですが、どうすれば良いのかさっぱり分かりません。

    メニューからウィジェットまでサッとスクロール(表示)させるにはどのようにすればいいのでしょうか。
    お忙しいところ恐縮ですが、ご回答いただければ幸いです。
    宜しくお願いいたします。

  6. しげぞう 投稿作成者

    もちがき様

    上手く行って良かったです。サイトの数ですが、ここ数年で30サイト程度まで減らしました。収益がなくなったサイトや大幅な修正が必要になったサイト、また、修正しても収益があがらないと思われるサイトやアフィリエイト案件が終了したサイトは削除。それ以外は統合という方針にしました。

    当時400くらいのサイト数ありましたが、そのほとんどは無料ブログ(Seesaa)でした。このブログでも書きましたがSeesaaブログからWordPressへのリダイレクト方法が上手く行ったので、Seesaaブログで収益を上げたサイトだけ独自ドメイン取得してWordPressへ引っ越しするようなスタイル(昇格スタイル)にしてました。そのため、当時はSeesaaブログが7割くらいで残りが独自ドメインでした。

    今はなんとか管理できる数まで減らしてます。最近作成しているサイト達は1つ1つ時間かけて作るスタイルです。今無料ブログはテスト用しか残してません。

    以前たくさんサイト作ったおかげでたくさんの実験や失敗もできたおかげで質問などにも答える事ができますしホント良かったなと思います(^^)

  7. もちがき

    しげぞうさん
    早速のご返答ありがとうございます。はてブの番号を教えていただいてありがとうございます。上手くいきました。フォルダの件は当分は2つで行こうと思います。アドバイスいただいて本当に恐縮です。「Font Awesome」は知らなかったので調べたいと思っています。
    重ね重ねご丁寧な返信をいただいて恐縮です。しばらくはサイト作成に精を出したいと思っています。
    しげぞうさんに質問なのですが、しげぞうさんはサイトを400個ほどお持ちとのことですが、そのうちワードプレスで作成されたものの割合はどれくらいあるのでしょうか?また、すべて独自ドメインでの運営になりますでしょうか?
    質問ばかりですみませんがよろしくお願い申し上げます。
    しげぞうさんを励みに頑張りたいと思っています。

  8. しげぞう 投稿作成者

    もちがき様

    コメントありがとうございます。私のは「content: “\e602”;」となってますが、他の方と全く同じになるかはやってみないと分かりません。それからfontsフォルダが2つある事については今問題なければ大丈夫ではないかなと思います。私のfontsファイル見てみたらicomoonのフォントとかウェブフォントなどのファイルなど結構色々入ってました(笑)

    気になるようであればまとめたフォルダでも反映されるか確認してみても良いかもしれません。別々にした今の状態のフォルダ達と一緒にまとめたフォルダの2つを用意していつでも元に戻せるようにしてから試してみれば気軽に試せるかなと思います。

    もしフォルダが別れるのが嫌という場合や1つ1つアップロードするのが面倒という場合は「Font Awesome」を使うのも良いと思います。Font Awesomeで全てのアイコンがそろうかはちょっと試してないですが、アイコンフォントで一番使われているのではないかなと思います。header.phpに1行コードを追加するだけで色々なアイコンを呼び出せるようになるので便利です。

    私の場合も最初Font Awesomeと迷ったのですが、必要なものだけあればOKと思っていた事、それから自分で自作のアイコンを作って使いたかった事という2つの理由でicomoonを選択した感じでした。

  9. もちがき

    しげぞうさん
    はじめまして、ワードプレスのサイト作成になくてはならないサイトでありがたく利用させていただいております。
    早速で申し訳ございませんが、フォントのダウンロードの「icomoon」サイトですが、その中のLINEとはてブなど一部のものが掲載されていませんでした。そこで他のサイトのやはり「icomoon」で作成されたフォントをダウンロードしましたが、はてブだけが上手く表記されませんでした。つきましてはしげぞうさんのサイトで使用されているはてブのスタイルシートの下記の◯◯◯◯の部分の識別コードを教えてほしいと思いました。色々試したのですが、おそらくここの部分だけが合えば表記できると考えているのですが、いかがでしょうか?

    .icon-hatena:before {
    content: “◯◯◯◯”;

    }

    また、他サイトからのダウンロード分(これにはLINEとはてブとポケットなどが入ってましたので)をfontsフォルダとして、さらにホームなどスマフォのメニューバー用のフォントをfonts2としてフォルダを作成してスタイルシートで反映させていますが、苦肉の策なのですが、これで今は上手くいっておりますが、このようなカタチでもよろしいでしょうか?

    まとめ
    ・はてブの識別コードを知りたいということ。
    ・fontsフォルダを二つにしていることについて
    以上どうかよろしくお願い申し上げます。
    しげぞうさんのようになりたいと願ってこれからも頑張ります。どうかよろしくお願い申し上げます。

  10. ひとし

    しげぞう様

    退院おめでとうございます。前回の件なんですがなんとか自力で解決する事が出来ました。どうもありがとうございました。

  11. しげぞう 投稿作成者

    ひとし様

    時間が空いてしまってすみません。もしまだ解決していない場合には再度ブログのURLを教えて下さい。改めてチェックしてみますね!どうぞよろしくお願いいたします。

  12. ひとし

    しげぞう様

    やっとこさ時間ができたので戻るボタンに挑戦してみたのですがやはり表示されませんでした、我ながら情けない限りです…

    戻るプラグインを停止したのですが…

    ちなみに下記の記述はあっていますか?
    子テーマと戻るボタンを同じ

    ククルのか悩んでます、相変わらずの初心者丸出しの質問ですみません。

    「function.php」

  13. しげぞう 投稿作成者

    ひとし様

    返信ありがとうございます。これ、もしかしてページの先頭に戻るプラグインを使ってませんか?ソースコードのチェックをしたのですが、多分プラグインの戻るボタンがあるような感じがします。なので、再度インストール済みのプラグインをチェックしてみて、もし先頭に戻る機能のプラグインがあればそれを停止してみて下さい。

    もしそのようなプラグインがないという場合にはお手数ですがまたコメント下さい。よろしくお願いします。

  14. ひとし

    しげぞう様

    お騒がせしてます、超初心者のひとしです。おかげさまでソーシャルボタン完成しました。
    あとは戻るボタン ですがもうお手上げです。
    下記に「scroll-top.js」「function.php」を貼っておきます、お手数ですが連休明けにでも確認してやって下さい、よろしくお願いします。

    「scroll-top.js」
    jQuery(function(){
    jQuery(window).scroll(function(){
    var a=jQuery(window).scrollTop();
    if(a>50){jQuery(“#scroll-top”).fadeIn(“slow”)
    }else{
    jQuery(“#scroll-top”).fadeOut(“slow”)}
    });
    jQuery(“#scroll-top”).on(“click”,function(){
    jQuery(“html,body”).animate({scrollTop:0},”slow”)}
    )});
    jQuery(function() {
    var pageTop = jQuery(‘#mobile-top’);
    //??????????
    pageTop.click(function () {
    jQuery(‘body,html’).animate({
    scrollTop: 0
    }, 800);
    return false;
    });
    });

    「function.php」

    あと「Autoptimize」を使っていたのですがカスタムメニューの▽が□になったり、502get…とよくわからないエラーが出たので停止しました。

  15. しげぞう 投稿作成者

    ひとし様

    返信ありがとうございます!ざっくりチェックをしてみたのですが、ひとし様の言われるように表示自体はできているようですし、それぞれのボタンの中身も機能しているかと思います。私のブラウザで確認してみた所、PCで表示している「ページの先頭に戻るボタン」がスマホページでも表示されてますが、これを表示しないようにする(フッターメニューに装備しているのでこれは表示しない)のが1点。それから2点目がSNSのボタンですね。

    それ以外は機能しているように見えます。

    まず、SNSボタンのセットですが、これは別記事でも紹介しています(https://affiliate150.com/icon-web-font)。この記事に書いてますが、別のサイト様の作成してくれたSNSボタンセットをicomoonでインポートしてSNSボタンを作成してダウンロードしておく必要があります。先ほど書いたURLの記事でも紹介してますが、このサイト様からSNSボタンをダウンロードできます(記事の後半にあります)。
    ⇒http://douraku.sw2x.com/web/3868/

    なので、ちょっと面倒ですが、上記サイト様からSNSボタンのセットをダウンロードしてicomoonにインポート。それで再度ダウンロードしたファイルをサーバーにアップし、アイコンフォント用のCSSも追加するという手順になります。

    それで、1点目で書いたページの先頭に戻るボタンに関してはこの記事(フッターメニューを作成の記事)の途中でJavascript「scroll-top.js」の記述を書いてますので、再度こちらを見直してみて下さい。もしかすると記述ミスがあるかもしれません。

    それと、最後に、「Autoptimize」というプラグインを利用されているかと思うのですが、このプラグインの設定で、JavaScript Optionsという項目があります。ここの「Optimize JavaScript Code?」というチェック欄にチェックがあれば外しておいて下さい。

    これはJavaScriptを圧縮する機能なんですが、これを設定すると、時々JavaScriptが上手く機能しない場合があります。なので、JavaScriptの設定だけチェックを外して「save changes and Empty Cashe」で設定を保存&キャッシュをクリアしてみて下さい。

    上記の対策でもしまだ上手く行かないようであればお手数ですが再度コメント下さい。返信は連休明けになるかもしれませんが、どうぞよろしくお願い致します。

  16. ひとし

    しげぞう様

    本当に何度も申し訳ないです。何故か少し表示するようになってからトントンと前に進んだのですが、あと少し。相変わらずPCだけに表示される戻るボタンが表示されないのと”IcoMoon”サイトにソーシャルボタン用のアイコン(LINEなど)が見当たりません。良い方法をお願いします。

  17. ひとし

    しげぞう様

    何度もすみません、超初心者のひとしです。今まで何も表示しなかったのですが少し表示するようになりました。理由はわからないのですが。なので当分この状態で放置しておきますので、時間がある時にでも訪問してやってください。よろしくお願いします。

  18. ひとし

    しげぞう様

    とてもとても丁寧な返信ありがとうございます。超初心者のひとしです。
    前回のコメントの追記になるのですが、上記記事のアイコンも戻るボタンも表示することができませんでした。ロリポップからムームー、wordpress、etc…までこちらの記事を参考にやっとここまでたどり着き、後はヘッター固定メニューを完成させればひと段落なのですが… どうかご教授を願いします。

    恥ずかしながらのサイトURL

    ちなみに下記サイトの「アイコンフォントFont Awesome版」という項目は簡単に表示したのですが、やはりこちらのサイトのものと比べると…

  19. しげぞう 投稿作成者

    ひとし様

    コメントありがとうございます。私の場合はTwenty Twelveというテーマを使って紹介をしていますが、カスタマイズなどもテーマによって違う部分が多々あります。何か1部でも表示されていれば原因は分かりやすいのですが、何1つ表示されていないという事なのでテーマ自体の構成から見てみる必要もあるかと思います。

    なので、もし良かったら一度ブログのURLを教えてもらえると助かります。何も表示されないという事で、原因が分かるかどうか?は自信はありませんが、何か分かるかも?くらいの感じです。URLはコメント公開時には削除しますので、もしよければ教えて下さい。それでも分からない場合はすみません!

  20. ひとし

    初めまして超初心者のひとしともうします。
    上記記事を参考にあれやこれやと2回も3回もやってみたのですが、何一つ表示されず途方に暮れてます。原因はなんなのでしょうか?ThemaはHuemanを使ってます。よろしくお願いします。

  21. younyaaan

    しげぞう様

    あれから、CSSなども見直し、他のサイトも参考にしながら、何とかフッターメニューつくることができました(*^^*)

    いろいろと教えてくださり、ありがとうございました!あとは、色などを変えて理想に近づけていきたいと思います。

  22. しげぞう 投稿作成者

    younyaaan様

    返信ありがとうございます。再度CSSをチェックしてみたのですが、幾つか記述ミスがありました。

    具体的にはCSSの記述で「 : 」と「 ; 」が間違って混じっています。これが原因かもしれません。本来「 : 」と記述する所に「 ; 」が記述されている部分が何箇所かありますので、良くみてチェックしてみて下さい。

  23. younyaaan

    お忙しい中、早速のお返事ありがとうございます。

    そうなんですね、CSSの可能性が高いんですね! ご指摘頂いた記述は、両方とも削除してみましたが、特に何も変化がありませんでした(>_<)

    SNSのリンク部分も含め、まだまだ勉強不足なのですが、もう一度私も見直してみます。

  24. しげぞう 投稿作成者

    younyaaan様

    コメントありがとうございます。まず、メニューが縦に並ぶという部分なんですが、これはCSSが反映されてないというのが原因として考えられます。通常このような場合に疑うのがCSSの記述なんです。それでちょっとサイトのデザインもチェックしてみたのですが、トップに戻るボタンなどの高さなども反映されてません。

    ここからは推測で、1つ1つ原因を探して行く作業になるのですが、今ざっと見た感じで次のような記述がCSSにあります。

    /*アイコンにsnsのリンクをつけて、表示する*/
    <a href="http://instagram.com/○○○○" style="text-decoration:none;" target="_blank"><i class="icon-instagram"></i></a>
    <a href="https://twitter.com/○○○○" style="text-decoration:none;" target="_blank"><i class="icon-twitter"></i></a>
    <a href="#" style="text-decoration:none;" target="_blank"><i class="icon-pinterest"></i></a>

    上記がスタイルシート(CSS)に記述されているのですが、これはHTMLかと思いますので、これはCSSには不要かと思います。なので、一度こちらを消してみて、トップに戻るボタンの高さが変わるか確かめてもらえますか?トップに戻るボタンの高さが反映されていれば他の部分も反映されるような感じもしてます。

    もしそれでも反映されない場合にはまた別の原因を探す必要があるかと思いますので、お手数ですが、再度コメント下さい。

    それから全く関係ない部分なんですが、各個別ページの最後の部分に「PC・タブレット用コンテンツ」というテキストが入りこんでます。

    これは多分「content.php」にこの記述をしているのでは?と思いますので、一度確認し、不要であれば削除してみると良いと思います。一応編集まえに編集するPHPファイルなどはコピーをしておき、いつでも元に戻せるようにしてから試してみて下さい。

  25. younyaaan

    しげぞう様

    少し前に、こちらで質問をさせて頂いたものですが、今回スマホページ用の固定メニューを作成したところ、メニューが縦に表示され、検索の枠がページの上部に表示されたままになってしまいます。

    さらに、下の記述をすると画面が真っ暗に表示され、その上に検索などの枠が出た状態になり、モーダルウィンドウも×のマークは表示されますが、押してもcloseできないという状況になってしまいました。さらに、他のSNSから飛ぶとページが表示されませんになってしまいます。

    ちょうど、こちらで、たいいくさんが過去に投稿されていた写真と同じようなレイアウトになっていたため、返答にあった}や?も確認してみましたが、特にそれらしい箇所は見つけられませんでした。

    もし、お時間があれば一度見ていただけないでしょうか。

    ちなみに、homeボタンとtopへ戻るボタンは機能しています。また、リンクシェアに関しては、SNSのサイトへ直接繋げたかったので、少しコードを変えて、こちらも機能している状態です。

    どうか宜しくお願い致します。

    補足:上の記述は、ページが見れなくなるため、今は記述していません。

  26. たいいく

    しげぞう様

    なんというありがたいお言葉!
    助かります。

    なるべく自分でやってみて、どうしてもできないとき、
    また頼らせてください~。

    ありがとうございました~。

    たいいく

  27. しげぞう 投稿作成者

    たいいく様

    返信ありがとうございます!反映されて良かった!現在は別サイトも作成してますが、できるだけコメントの返信はしていくつもりですので、また何かあればいつでもコメント下さい。今後ともどうぞよろしくお願い致します。

  28. たいいく

    しげぞう様

    お返事ありがとうございます。
    できましたー!ありがとうございます!
    ちゃんと表示されたときは感動しました!

    丁寧に教えていただき、とても助かりました。

    twitterを拝見すると、新しいサイトを作成中とのこと。
    お忙しい中対応していだき、ありがとうございました。

    まだまだ未熟者ですが、しげぞう様のブログを見習って、
    がんばっていこうと思います。

    この度は本当にありがとうございました!

    たいいく

  29. しげぞう 投稿作成者

    たいいく様

    返信ありがとうございます。先ほど条件分岐599px以下の部分で「 } 」が1つ足りない状態だったのですが、さらにその記述の上にこのような記述があると思います。

    /* ボタンのサイズPC用 */
    @media screen and (min-width: 600px) {
    #scroll-top{   /* ボタンのデザイン */
    width:150px;   /* ボタンの横幅 */
    height:40px;   /* ボタン高さ */
    }
    #scroll-top p {        /* ボタンのテキスト部分 */
    line-height: 40px;  /* 文字の高さ */
    }

    これも条件分岐している部分で同じように最後にもう1つ「 } 」が必要になります。なのでこの部分にも「 } 」を1つ追加して試してみてもらえますか?もしこれでも反映されない場合にはさらに原因を探してみますので、再度コメント下さい。よろしくお願い致します。

  30. たいいく

    しげぞう様

    お返事ありがとうございます!
    時間を割いて初心者にお付き合いいただき、本当に感謝しております。

    スタイルシートの最後の記述に「}」を追加してみたところ、
    メニューが出てきました!

    ただ、メニュー自体が左下に縦に並んでおり、
    メニュー項目や検索画面が常に表示された状態になっています…

    お手すきのときに、スマホにてご確認いただければ幸いです。
    URLを念のためもう一度記載します。

    どうぞよろしくお願いいたします。

  31. しげぞう 投稿作成者

    たいいく様

    返信ありがとうございます。スタイルシートに関しては相性の問題ではなく、単純に記述の原因だと思います。

    改めてたいいく様のサイトのスタイルシートを確認しましたが、以下のような記述があります。フッターメニュー(モーダルウィンドウの記述)の直前部分です。

    /* ボタンのサイズスマートフォン用 */
    @media screen and (max-width: 599px) {
    #scroll-top{   /* ボタンのデザイン */
    width:120px;   /* ボタンの横幅 */
    height:40px;   /* ボタン高さ */
    position:fixed; /* 画面がスクロールしても固定する */
    right:10px; /* 固定する場所は右から10px */
    bottom:10px; /* 固定する場所は下から10px */
    }
     
    #scroll-top p{ /* ボタンのテキスト部分 */
    line-height: 40px; /* 文字の高さ */
    }

    これ、先頭に戻るボタンのスタイルが記述されていると思うのですが、最初に条件分岐がしてあって、599px以下の場合という記述です。ただ、最後に条件分岐を締めるためにもう1つ「 } 」が必要かと思いますので、上記記述の後に「 } 」をもう1つ追加して下さい。上記の記述の最後が「 } 」が2つ並ぶ感じになります。

    それで一度試してもらえますか?これが直接影響しているかは分かりませんが、1つ1つ原因を探して対処してみましょうか。

  32. たいいく

    しげぞう様

    お返事ありがとうございました。
    「?」をすべて削除してみましたが、
    フッターのスペースが詰まっただけで変化なしでした…泣

    何か相性の問題なんですかねぇ…

  33. しげぞう 投稿作成者

    たいいく様

    返信ありがとうございます。そうです、スペースに?が入っているのが原因ではないかと私も思ったのです。コピペで?が入る原因がよく分からないのですが、一度?の部分を削除して試してみるといいかもしれませんね、その?を削除した状態で再度確認してみてもらえますか?

  34. たいいく

    しげぞう様

    度々のコメントですみません。
    ちょっと気になった点がありましたので、追記させていただきます。

    しげぞう様の本記事「スマートフォンページのフッターに固定メニューを作成してみました」の、スタイルシートを私のPCのエディタで開いてみたところ、スペースに?が入っていました。
    画像を下記よりご確認いただければと思います。

    文字コードにおかしい部分があるとのことで、何か関連性が無いかと思い、
    再度コメントさせていただきました。

    ちなみに、しげぞう様の他の記事に記載されているコードもたくさんコピペさせていただいているのですが(ありがとうございます!)、他の記事のコードは?は入っていないようでした。

    何かの材料になればと思い、再度コメントさせていただきました。
    丁寧に対応していだいて、本当にありがとうございます。

  35. たいいく

    しげぞう様

    お返事いただきましてありがとうございました。
    スタイルシートを一度削除し、再度コピペしてみました。

    お手数おかけいたします…
    どうぞよろしくお願いいたします。

  36. しげぞう 投稿作成者

    たいいく様

    返信ありがとうございます。ブログ確認してみたのですが、スタイルシートの記述でちょっと気になる部分があって、フッターメニュー用のコードの部分の表示がおかしい感じになってます。普通見たら問題ない感じなんですが、文字コードを変更してみるとちょっとおかしい感じになっている部分がありました。原因は分かりませんが、多分コピペする時に何か問題があったかもしれません。サイト自体に問題があるわけではないと思います。

    このスタイルシートが原因かどうかは一度直してみないと分からないので、フッターメニュー用の記述(スタイルシート)を一度削除して再度コピペしてみてもらえないでしょうか?それで再度コメントもらえると助かります。お手数ですが、どうぞよろしくお願い致します。

  37. たいいく

    しげぞう様

    お返事いただきましてありがとうございました。
    ぜひブログを見ていただければと思います。URLは下記です。

    どうぞよろしくお願いいたします。

    たいいく

  38. しげぞう 投稿作成者

    たいいく様

    コメントありがとうございます。これはスタイルシートと、footer.phpどちらの原因も考えられます。どちらか1つ間違えていると画像のようになるかと思います。実際にこれは見てみないと原因がハッキリ分からないので、もし良かったらブログのURLを教えて頂けると原因を探しやすくて助かります。コメント公開時にはURLは削除しますのでよろしくお願いします。

  39. たいいく

    しげぞう様

    はじめまして。TwentyTwelveのスマホのメニューをなんとかしたいと思い、
    こちらの記事にたどり着きました。

    上手く実装できないため、質問させていただきます。

    記事を参考に「Twenty Twelveのメニューを削除」の前までの処理を完了させました。
    スマホで見てみると、フッター部分にアイコンが表示はされていますが、表示が崩れ、
    CSSもあたっていないような感じです…。

    写真で見ていただいた方が早いと思うので、下記にアップいたしました。

    http://www.fastpic.jp/viewer.php?file=6359919642.png

    こういった表示になってしまっています。下までスクロールするとこの部分が現れます。(proudly powered by WordPressという表示の更に下です)

    「ホーム」と「トップ」は機能しますが、「シェア」を押すと、URLの自分のドメイン以下に「#modal-p01」と表示されるだけで、何も変化なしです…。以下「検索」「menu」も同様です。

    写真の下の「検索」はきちんと機能します。「目次ページ」は、modal-p03の中身に記述したもので、こちらを押すときちんとリンクしたページには飛んでくれます。

    何回も最初からやり直してみたのですが、うまくいかず…

    以前のコメントを参照し、CSSの「}」の閉じ忘れを確認しましたが、こちらは大丈夫なようでした。(一番後ろにフォントを大きくするコードを書いたらきちんと反映されました)

    またキャッシュも削除して試してみましたが変化なしでした…。

    原因としてどういった問題が考えられるでしょうか?

    突然の質問で申し訳ありません…。
    ご教授いただければ幸いです。

  40. あか

    お世話になっております。
    数時間前にモーダルウィンドウを閉じる時の表示が「0d7」になってしまうと質問させていただきましたが、CSSのところで「0d7」の文字を発見し、「x」に変更したら上手く×が表示されるようになりました。ありがとうございます。

  41. あか

    しげぞう様

    毎日こちらのブログを見ながら、初めてのワードプレスブログの立ち上げに格闘している初心者です。どのページもとても分かりやすく、いつもありがとうございます。

    質問させていただきます。
    このページの記事を見て、スマートフォン版のフッターメニューの入れ込みを完了させたのですが、各ボタンをクリックしてポワッと中身が出現するところので、
    閉じようとする表示のところが「×」ではなく「0d7」と表示されてしまいます。
    どのボタンも同じで、「0d7」を押すと一応閉じることはできます。

    「0d7」→「×」に表示する方法を教えていただきたいのですが、よろしくお願い致します。

  42. しげぞう 投稿作成者

    まいまい様

    コメントありがとうございます。フッターメニュー結構複雑ですよね。上手く実装できて良かったです。modal-p03のコンテンツの部分ですが、まいまい様の言われるようにメニューが多いと下の部分が隠れてしまいます。これを収める上手い方法を思いつかないのですが、例えばメニューの文字の大きさや行間を狭くする事で若干多めに詰め込む事は可能かと思います。

    スタイルシートで追加した部分で「mod li a 」という部分で「font-size」を14pxにしてみましたが、ここの数値を少し小さくし、さらに「line-height」を追加する事でで文字の高さも調整できます。

    .mod li a {
      text-align: left;  /* メニューを左寄せ */
      font-weight: bold;  /* メニューを太字に */
      background: #000;  /* メニューの背景色 */
      margin: 2%;
      font-size: 14px;  /* メニュー文字サイズ(この部分)*/
      line-height:14px; /* 行間の調整(この部分)*/
    }

    スタイルシートに追加したこの最後の部分に「line-height」を追加して文字の大きさ「font-size」と一緒に少し小さくすれば若干項目も追加できるかと思います。

    注意点としては「line-heght」の数値は「font-size」よりも小さくならないようにしてみて下さい。苦肉の策ですが、また何か上手くできそうであれば追記していきますので、今後もどうぞよろしくお願い致します。

  43. まいまい

    はじめまして!フッター固定のメニューをさがしていてこちらにたどり着きました。
    ずっとうまく実装できずにいましたが、おかげさまで希望の動きをするメニューを追加することが出来ました。

    1点だけ質問なのですが、modal-p03のコンテンツの中身へのリンク部分なのですが、もっと項目を追加したいと思っています。
    その際、スクロールができずに下の部分が隠れてしまうのですがこちらは何か解決方法はご存知ないでしょうか。

    どうぞよろしくお願い致します。

  44. ケンボー

    しげぞうさん

    ありがとうございます。
    できました!
    本当にありがとうございました。

  45. しげぞう 投稿作成者

    >ケンボー様

    報告ありがとうございました。ヘッダーは上手く反映されたようで良かったです!私も初めてだったので勉強になりました。今回のスマートフォンのフッターメニューですが、スタイルシートに追加したこの部分で背景色と文字色(アイコンの色)を変更できます。コメントを入れている部分を変更して下さい。

    ul.footer_menu li a {
        border: none;
        display: block;
        color: #fff;  /* 文字、アイコンの色(白) */
        text-align: center;
        text-decoration: none;
    }
     
    .footer_menu {
        position: fixed;
        bottom: 0;
        left:0;
        background: #000;   /* 背景色(黒) */
        z-index: 9999999999;
        -moz-opacity: 0.9;
        opacity: 0.9;
    }

    それからソーシャルボタンの横並びですが、これはそれぞれのボタンに余白が設定されているため、ボタンの幅を50%にすると余白の部分が入りきれないため縦に並びます(下に落ちるのです)、40%とかちょっと少なめの数値に変更して試して見てください。

    また何かあればコメント頂けると助かります。よろしくお願い致します。

  46. ケンボー

    しげぞうさん先ほどはヘッダー画像の件ありがとうございました。

    フッターメニューについて教えてほしいのですが、表示のバックの色の変更はできますか?変更できるのであれば方法を教えて頂きたいです。

    それと、ソーシャルボタンのスマホ表示を、しげぞうさんのブログのように2つ横並びに表示したいのですが、50%では短くなって縦に並ぶだけでした。

    何か追加で記述しないといけないのでしょうか?

    お手数をおかけしますが宜しくお願い致します。

  47. しげぞう 投稿作成者

    >たみー様

    報告ありがとうございます。原因が分かってよかったです!また分からない部分などありましたらいつでもコメント下さい。今後ともどうぞよろしくお願い親します。

  48. たみー

    しげぞう 様

    たびたび、返答ありがとうございます。

    ご指摘の通り、スタイルシートの設定で、「 } 」の閉じ忘れがあり、
    表示がおかしくなっておりました。
    いろいろと教えて頂きありがとうございました。

    また、何かありましたら、ご教授願いたいと思います。
    ありがとうございました。

  49. しげぞう 投稿作成者

    >たみー様

    返信ありがとうございます。Twenty Twelveなんですね!ありがとうございます。推測なんですが、CSSの記述で「 } 」の閉じ忘れがあるかもしれません。今回のコードではなく、以前のコードで閉じ忘れがあるとその後に記述した内容が反映されない事があります。特に条件分岐(PCとスマートフォンを分ける)記述をする時の結構忘れる事が多いです。

    それを確かめるために一度CSSの一番最後に何かフォントサイズや色を変更するようなコードを追加してみてそれが反映されるか確かめてみて下さい。これで反映されるなら原因は別にあると思います。

    よく忘れるのが条件分岐のとじ忘れです。条件分岐というのはこんなやつです。

    @media screen and (max-width:●●px){
    
    .●● {font-size: 20px;}
    .●● {font-size:70%}
    
    }

    こんな感じで条件分岐する内容を書いた後の最後の「 } 」を忘れている事がありますので、以前の追加したコードも確認してみるといいかも知れません。それでも原因が分からないという場合にはお手数ですが、URLを教えて頂けると助かります。もちろんコメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  50. たみー

    しげぞう 様

    返答ありがとうございます。

    現在、私もこのサイトの内容通り、「STINGER5」を利用せずに、
    「Twenty Twelve」を利用して、スマホページのフッターに固定メニューを
    配置をしようとしています(こちらのサイトの目次の内容を上からずっと
    やってきました)。

    スマートフォンで、こちらのサイトを開くと、うまくメニューが
    フッター部で横になって表示されていますが、
    私の場合は、縦表示になって、なおかつ、モーダルウィンドウとして表示されないはずの
    twitterや、lineのアイコンが最初から表示されたままとなってしまいます。
    内容的には、こちらのサイトのまま記述しているだけなのですが・・・。

    同じ内容でやっているにもかかわらず、表示等が違っていたので、
    何か他の記述や、設定がされていることがあるのではないかと思い、
    コメントをさせて頂きました。

  51. しげぞう 投稿作成者

    >たみー様

    コメントありがとうございます。私の利用しているテーマが「Twenty Twelve」です。すみません。「STINGER5」は利用した事がないのでちょっと詳しくは分からないのですが、参考元として紹介した記事は「STINGER5」なのではないかと思います。

    あくまで推測ですが、参考元の記事を見ますとCSSは「/*レイアウト スマートフォンより前の部分」に追加するという風に書いてあります。おそらく「STINGER5」の場合はCSSの記述場所で違ってくるかも知れません。細かい条件分岐がテーマによって違います(PCの場合とかスマホの場合という条件分岐)。そのため、「STINGER5」の場合は参考元のサイトを参考にしたほうが上手くいくと思います。

    あまり参考にならずすみません。

  52. たみー

    いつも、こちらのサイトで勉強させてもらっております。

    今、フッターに固定メニューを表示させるところでなかなか
    うまくいかず困っております。

    そもそも、こちらの内容は「STINGER5」を利用していることを
    前提で書かれている内容でしょうか?

    実際に、「STINGER5」を利用せずにやってみると下記の2点がうまくいきません。
    ①フッターのメニューが縦に並んで表示されてしまう
     (横にならない)。
    ②モーダルウィンドウが、フッターメニューをクリックしたときに
     出るのではなく、常に最初から表示されたままの状態となってしまう。

    以上、ご教授お願いします。