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

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

フッターメニュー-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件のコメントがあります。

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

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

CAPTCHA


  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の記述で「 : 」と「 ; 」が間違って混じっています。これが原因かもしれません。本来「 : 」と記述する所に「 ; 」が記述されている部分が何箇所かありますので、良くみてチェックしてみて下さい。