2018.07.26 2020.01.14 WordPressカスタマイズ関連rinrinrin

WordPressスマホ固定フッター(フロート)メニューの表示方法!コピペ可のCSSコードも!

WordPressスマホ固定フッター(フロート)メニューをカスタマイズで表示させる方法!コピペ可のCSSコードも!

テンプレートの機能にはないけど、WordPressサイトをスマートフォンで開いたときにフッターに固定メニュー（フロートメニュー）を表示させたい！

そんなあなたに、超PC音痴の私が、自作でできるカンタンなカスタマイズ方法を【コピペできるCSS＆HTMLコード】とともにお教えします♪

Contents

1 WordPressスマホ固定フッター(フロート)メニューをカスタマイズで表示させました!
2 WordPressスマホ固定フッター(フロート)メニューとは？メリットも！
3 WordPressスマホ固定フッター(フロート)メニューの作成・カスタマイズ手順！
- 3.1 関連

WordPressスマホ固定フッター(フロート)メニューをカスタマイズで表示させました!

WordPressスマホフッターの固定フロートメニュー表示方法!コピペ可のCSSコードも!

こんにちは～♪凛（＠Rin_LBLL）です★

本日は、システム＆PC超絶音痴のわたしが七転八倒しながらなんとか完了させた…

「スマホの固定（フロート）フッター」の自作方法、参考サイトや実際のコード

をドドンと公開します(´艸｀*)✨

これを読めば…

私が半日以上かけて完成させた方法がサクッと数分で完了します♪

回り道なしでフッターメニューをパパっと完成させちゃってください！

完成するまで、本当に大変だった…（TωT）

でも、この記事の内容をそっくりそのまま実践すれば完成はすぐですよ～＾＾♪

WordPressスマホ固定フッター(フロート)メニューとは？メリットも！

じゃあ早速カスタマイズ方法を…と進みたいところですが！

そもそも、スマホの固定フッターメニューって何？

なんで表示させる必要があるの？

…と疑問に思っている方のために、簡単にご説明しますね♪

スマホの固定フッターメニューって？

このピンクの太線で囲んだ部分が、今回自作したフッターメニューです♪

これはスクロールしてもずっとページの一番下に「固定」で表示されます(*´▽｀*)✨

スマホの固定フッターメニューのメリットは？

スマホの固定フッターには、自分で指定した特定のメニューを表示させることができます。

指定したページへのリンク、検索窓、ハンバーガーメニュー（開くといくつかのページのリンクが表示される）など、配置は自由です♪

記事数が増えてくると、ついつい古い記事は新しい記事の下に埋もれがち…。

でも、スマホの固定フッターメニューがあれば、閲覧してもらいたいページへぐいっと読者さんを誘導することができちゃいます(/ω＼*)

検索窓やハンバーガーメニューを設置すれば、読者さんの満足度や使い勝手も向上させることができますね★

サイトアフィリエイトでも使える手法ですね(´艸｀*)✨

直接商品ページに案内したり、力を入れたキラーページに案内することで…ぐぐっと成約率が高まります♪

なるほどね！

情報発信サイトだけじゃなくて、アフィリエイトサイトにも使えるなら覚えておいて損はないね♪

WordPressスマホ固定フッター(フロート)メニューの作成・カスタマイズ手順！

今回のカスタマイズで、一番お世話になったサイトがこちらっ！

▶スマートフォンページのフッターに固定メニューを作成してみました｜アフィリエイトで稼ぐ方法を全部話そうと思う

本当に参考にさせていただきました！

こんなコードを自力で書けるなんて…神以外のなにものでもない…（崇拝

ありがとうございます～（TωT）！！

注意

これから親テーマを編集することになりますので、かならずバックアップをとっておいてくださいね！！

わたしは「BackWPup」というプラグインでバックアップデータをPCに保存してからスタートしました★

また、後ほどおはなししますが…

上記のサイトでは、スマホフッターに表示させる「メール」や「ハート」「星」、などの記号アイコンを「icomoon」からダウンロードしています。

ただ、私のサイトではアイコンの読み込みに関しては他の方法をとっていますので、若干コードが異なります。

そして…わたしの利用しているテンプレートは▶ハミングバードのため、他のテンプレートでは手順や表示が異なる場合がありますので、ご了承ください（＞＜。

こちらをもとに…

まずは、テンプレートの子テーマの「追加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;  /* メニュー文字サイズ */
}



/*--------------------------------
スマホフッターフロートメニューアイコン
---------------------------------*/
@charset "UTF-8";

 @font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?71374117');
  src: url('../font/fontello.eot?71374117#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?71374117') format('woff2'),
       url('../font/fontello.woff?71374117') format('woff'),
       url('../font/fontello.ttf?71374117') format('truetype'),
       url('../font/fontello.svg?71374117#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?71374117#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-th-list:before { content: '\2261'; } /* '≡' */
.icon-star-empty:before { content: '\2606'; } /* '★' */
.icon-mail:before { content: '\2709'; } /* '✉' */
.icon-heart:before { content: '\2764'; } /* '♡' */
.icon-search:before { content: '♬'; } /* '\1f50d' */

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

/*--------------------------------

モーダルウィンドウ

---------------------------------*/

.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; /* メニュー文字サイズ */

}

/*--------------------------------

スマホフッターフロートメニューアイコン

---------------------------------*/

@charset "UTF-8";

@font-face {

font-family: 'fontello';

src: url('../font/fontello.eot?71374117');

src: url('../font/fontello.eot?71374117#iefix') format('embedded-opentype'),

url('../font/fontello.woff2?71374117') format('woff2'),

url('../font/fontello.woff?71374117') format('woff'),

url('../font/fontello.ttf?71374117') format('truetype'),

url('../font/fontello.svg?71374117#fontello') format('svg');

font-weight: normal;

font-style: normal;

}

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */

/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */

@media screen and (-webkit-min-device-pixel-ratio:0) {

@font-face {

font-family: 'fontello';

src: url('../font/fontello.svg?71374117#fontello') format('svg');

}

[class^="icon-"]:before, [class*=" icon-"]:before {

font-family: "fontello";

font-style: normal;

font-weight: normal;

speak: none;

display: inline-block;

text-decoration: inherit;

width: 1em;

margin-right: .2em;

text-align: center;

/* opacity: .8; */

/* For safety - reset parent styles, that can break glyph codes*/

font-variant: normal;

text-transform: none;

/* fix buttons height, for twitter bootstrap */

line-height: 1em;

/* Animation center compensation - margins should be symmetric */

/* remove if not needed */

margin-left: .2em;

/* you can be more comfortable with increased icons size */

/* font-size: 120%; */

/* Font smoothing. That was taken from TWBS */

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

/* Uncomment for 3D effect */

/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

}

.icon-th-list:before { content: '\2261'; } /* '≡' */

.icon-star-empty:before { content: '\2606'; } /* '★' */

.icon-mail:before { content: '\2709'; } /* '✉' */

.icon-heart:before { content: '\2764'; } /* '♡' */

.icon-search:before { content: '♬'; } /* '\1f50d' */

※今回はフッターメニューに「SNSシェアボタン」を私は入れていませんが、今後カスタマイズする可能性もあるため、上記の「SNSの部分」と記述されたコードには入れたままにしています

つづいて…

WordPressダッシュボード＞外観＞テーマの編集＞右上の「編集するテーマを選択」から親テーマを選択＞「テーマフッター」を選択＞コードの中の</body>の直前に下記のコードをコピペ＆貼り付け＞「ファイルを更新」ボタンをクリックして完了！

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

<ul class="footer_menu">
<li><a href="#modal-p01"><span class="dashicons dashicons-menu"></span><br>メニュー</a></li>
<li><a href="■URL1"><span class="dashicons dashicons-email" style="font-size:16px"></span><br>■左から2番目</a></li>
<li><a href="■URL2"><span class="dashicons dashicons-heart" style="font-size:16px"></span><br>■左から3番目</a></li>
<li><a href="■URL3"><span class="dashicons dashicons-star-filled" style="font-size:16px"></span><br>■左から4番目</a></li>
<li><a href="#modal-p05"><span class="dashicons dashicons-search" style="font-size:16px"></span><br>検索</a></li>

</ul>

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

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

<ul class="mod">
<li><a href="■メニューURL1">■メニュー１■</a></li>
<li><a href="■メニューURL2">■メニュー２■</a></li>
<li><a href="■メニューURL3">■メニュー３■</a></li>
<li><a href="■メニューURL4">■メニュー４■</a></li>
<li><a href="■メニューURL5">■メニュー５■</a></li>
<li><a href="■メニューURL6">■メニュー６■</a></li>
<li><a href="■メニューURL7">■メニュー７■</a></li>
</ul>

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


<!--modal-p05の中身-->
<div class="modal-window" id="modal-p05">
<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>

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

</ul>

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

</ul>

</div>

</div>

<div>

</div>

</form>

</div>

</div>

このコードでは、フッターメニューの5つの項目のうち、

■一番左が「メニュー」

■一番右が「検索」

というところは決めてしまっていますが…

そのほかは自由に設定が可能です(´艸｀*)✨

<li><a href="■URL1"><span class="dashicons dashicons-email" style="font-size:16px"></span><br>■左から2番目</a></li>
<li><a href="■URL2"><span class="dashicons dashicons-heart" style="font-size:16px"></span><br>■左から3番目</a></li>
<li><a href="■URL3"><span class="dashicons dashicons-star-filled" style="font-size:16px"></span><br>■左から4番目</a></li>

こちらの最初の「■URL1」～「■URL3」には好きなURLを、「■左から2番目」～「■左から4番目」にはお好きなメニュー名をそれぞれ入力してください♪

※「■」も削除して入力してくださいね＾＾*

私の場合、フッターメニューの表示名は…

「■左から2番目」は「メルマガ」

「■左から3番目」は「外注化」

「■左から4番目」は「Adsense」

としているので参考にしてくださいね＾＾*

そして、一番左のハンバーガーメニューに表示させるページは…

<li><a href="■メニューURL1">■メニュー１■</a></li>
<li><a href="■メニューURL2">■メニュー２■</a></li>
<li><a href="■メニューURL3">■メニュー３■</a></li>
<li><a href="■メニューURL4">■メニュー４■</a></li>
<li><a href="■メニューURL5">■メニュー５■</a></li>
<li><a href="■メニューURL6">■メニュー６■</a></li>
<li><a href="■メニューURL7">■メニュー７■</a></li>

こちらの「■メニューURL1」～「■メニューURL7」と「■メニュー１■」～「■メニュー7■」も同様にお好きなURLとメニュー名を入れてくださいね♪

※7つもいらない場合は、必要ない箇所を削除してOK！削除するのは、それぞれの行の<li>~</li>です＾＾*

ちなみに私の場合は、メニューの中身はこんな感じにしています(*’ω’*)b

こちらの画像の下にある「三本線のメニュー」「メール」「ハート」「星」のマークのアイコンの表示方法については、このページを参考にさせていただきました(´艸｀*)✨

▶WordPressでアイコンフォントを導入する方法｜Web Shufu WordPressブログ運営日誌

図解でとってもわかりやすかったです(/ω＼*)

本当にありがとうございます！！

わたしが使っているアイコンと異なるアイコンを利用したい場合は、上記のサイトにもありますが…

▶コチラのサイトから…

好きなアイコンを選択＞「Copy HTML」でコードを表示＞コードの”○○”の中の○○の部分をコピー！

<li><a href="#modal-p01"><span class="dashicons dashicons-menu"></span><br>メニュー</a></li>
<li><a href="■URL1"><span class="dashicons dashicons-email" style="font-size:16px"></span><br>■左から2番目</a></li>
<li><a href="■URL2"><span class="dashicons dashicons-heart" style="font-size:16px"></span><br>■左から3番目</a></li>
<li><a href="■URL3"><span class="dashicons dashicons-star-filled" style="font-size:16px"></span><br>■左から4番目</a></li>
<li><a href="#modal-p05"><span class="dashicons dashicons-search" style="font-size:16px"></span><br>検索</a></li>

この中の、

<span class="dashicons dashicons-email" style="font-size:16px">

1	<span class="dashicons dashicons-email" style="font-size:16px">

“○○”で囲まれた「dashicons dashicons-email」の部分を、先ほどコピーしてきたアイコンのコードに変更！

ここでアイコンを変更しない場合は上記のわたしが利用したアイコンと同じ並びになります♪

※左から「ハンバーガーメニュー」⇒「メール」⇒「ハート」⇒「星」⇒「検索」のマークですね＾＾*

これで完了です★

本当にお疲れ様でした～(/ω＼*)

注意

「一部のiPhoneでスマホフッターが表示されない」という事例が報告されております！

解決策がわかり次第、追記させていただきますっ（＞＜

こうやったら解決したよ♪という声も大募集中です！

カスタマイズに強く心優しき読者さんのアドバイスを心よりお待ちしております（TωT）

わたしがお世話になった2つのサイトもあわせて読んで、自分のお気に入りのフッターメニューを作ってみてくださいね♪

自分でフッターメニューを表示させられたとき、ものすごい達成感を得られること間違いなし♪です！

少しでも役に立った！と感じたら…応援ぽち♪おねがいします(´艸｀*)✨

あと、自分で書いておいて本当に恐縮なのですが…

私が実際に利用しているコードを改変してのカスタマイズに関するご質問はお答えできない可能性が高いです…(TωT)うう

そもそもが、とーーーってもニガテな分野なので、何卒ご了承くださいませ…(笑)

でも、ここに書かれている方法で大のPC音痴が実際にフッターメニューが完成したことは事実♪(笑)

「フッターメニュー表示させたいけどテンプレートに機能がついていなくて諦めてる…(。´･ω･)」そんな方はぜひチャレンジしてみてね！

バックアップは忘れずに！ね！

▼ぽちっと応援♪おねがいします～★▼

▶毎日変動！今の凛の順位をCHECKしてみる♪

いつも応援ありがとうございます♪

◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆

凛のメルマガに登録すると、上記のようなアフィリエイトお役立ち情報が届きます(^^♪

無料プレゼントは「凛が144万円稼ぐまでの5か月間の報酬・行動・思考」すべてをまとめたサイト！大好評なので、お見逃しなくっ★

▶凛のメルマガ無料登録はこちら♪

WordPressスマホ固定フッター(フロート)メニューの表示方法!コピペ可のCSSコードも!

WordPressスマホ固定フッター(フロート)メニューをカスタマイズで表示させました!

WordPressスマホ固定フッター(フロート)メニューとは？メリットも！

WordPressスマホ固定フッター(フロート)メニューの作成・カスタマイズ手順！

関連

【無料】ゼロからおうちで始めるアフィリエイト講座♪

凛の成功の秘訣を詰め込んだ、ブログの教科書を作りました。

【14日間無料】仲間が集うライフアップサロン♪

作業時間がない…けど稼ぎたいアナタへ。

♥凛―Rin―のプロフィール♥

♪ブログランキングに参加中♪

Follow Me♥

カテゴリー

Follow me on Twitter

最近の投稿

WordPressスマホ固定フッター(フロート)メニューをカスタマイズで表示させました!

WordPressスマホ固定フッター(フロート)メニューとは？メリットも！

WordPressスマホ固定フッター(フロート)メニューの作成・カスタマイズ手順！

関連

Recommend関連記事

【無料】ゼロからおうちで始めるアフィリエイト講座♪

凛の成功の秘訣を詰め込んだ、ブログの教科書を作りました。

【14日間無料】仲間が集うライフアップサロン♪

作業時間がない…けど稼ぎたいアナタへ。

♥凛―Rin―のプロフィール♥

♪ブログランキングに参加中♪

Follow Me♥

カテゴリー

Follow me on Twitter

最近の投稿