【1,500円】「STORK（ストーク）にフッター固定メニューを導入する方法」を販売しています！

こんにちは。とみっちです。

当ブログはスマホで閲覧した際に、フッター固定メニューを表示できるようにしています。

嬉しいことに「同じメニューを設置したい！」といった問い合わせが多く届きます。

いっそのこと、プログラム一式と、設置方法をまとめた方法を販売してみようかな！と考えたので、Gumroadを使って販売を開始してみます。

【必読】注意事項

「注意事項」を最初に記載します。

注意事項に反する利用用途に関してはサポートできませんので、必ず目を通してください。

「STORKフッター固定メニュー」が沢山の方に導入されるようになり、注意事項が細かくなってきています。

お買い上げ後のトラブルをできるだけ防ぎ、「導入してよかった！」と気持ちよく使っていただくためのものですので、ご了承ください。

STORKのライセンス

当ページで販売している「フッター固定メニュー」は、ザサイベースブログの管理人「とみっち」が個人的に作成したもので、STORKを販売しているOPENCAGE公式サイトとは無関係です。販売許可をいただいています。

当ページで販売している「フッター固定メニュー」に関する問い合わせは、OPENCAGE公式サイトではなく僕にお願いします。

また、「フッター固定メニュー」の導入はOPENCAGE公式サイトで購入したWordPressテーマ「STORK」が必ず必要となりますのでご注意ください↓↓↓

WordPressテーマ
「ストーク」

販売中の「フッター固定メニュー」ファイル一式の中にはSTORK本体に関するファイルは一切含まれていません。

複数のブログを運営する方は、運営するブログ数のライセンスを公式サイトで購入する必要があります。

STORKの子テーマ化

親テーマを直接編集すると、アップデートの際に作業内容が消えてしまいます。作業前に必ずSTORKの子テーマ化を済まてください。

フッター固定メニューを導入する作業に伴い、操作を誤りファイルを間違えて消してしまった、記述を間違えて画面が真っ白になってしまったといったことが発生する可能性があります。

WordPressのファイルはご自身であらかじめバックアップを取っていただくなどをして、十分に気をつけて作業を行ってください。

必ず作業前の状態に戻せるようにしてから作業に臨んでください。

ご自身の作業内容によってブログに不具合が発生した場合、いかなる被害や損害に関しても、当サイト及び管理人は一切の責任を負いかねます。ご自身のご判断と責任でご利用ください。
今回用意したプログラムは十分内容に気をつけて作成していますが、もしも不具合がございましたら修正対応しますのでお問い合わせください。

必要な知識

今回販売している「フッター固定メニュー」はWordPressのプラグインではなく、HTMLファイルやCSSファイル、JSファイルを変更する内容となります。

最低限、FTPソフトが使用できる、メモ帳ではなくテキストエディタが少し使えるということが前提となります。

また、有料の導入サポートをご希望される場合、必要に応じてSkypeやChatwork、GoogleハングアウトのいずれかでPCの画面共有ができるという方を対象に行っています。

購入方法、料金

料金は1,500円（税込）となります。

クレジットカード決済とPayPal決済が可能な「Gumroad」、もしくは「銀行振込」に対応しています。

Gumroad

Gumroadは日本を含め、世界190カ国に対応している決済サービスです。

ちょっと日本語翻訳が変な点がありますが、ちゃんと取引できますので安心してください。

もちろん、決済処理はSSL通信で暗号化されています。

STORKにフッター固定メニューを導入する方法

Gumroadで可能な決済方法

クレジットカード（VISA、Mastercard、AMERICAN EXPRESS、JCB、Diners Club）
PayPal

販売画面がポップアップ表示（もしくは別ウィンドウ表示）された後、「これが欲しいです！」ボタンをクリックしてください。

「これが欲しいです！」以外の表記にしたいんですが、設定変更できませんでした。。

ファイルサイズは6KB弱と軽量で、すぐにダウンロードできる大きさです。

クレジットカード情報を入力、もしくはPayPalでの支払いを選択でき、簡単に決済が完了します。

Gumroadでの購入後は、購入完了の通知Eメールが届きます。

Eメール内にファイル一式のダウンロードリンクがありますので、クリックしてダウンロードしてください。

ファイルをダウンロードしたら「readme.txt」を読んでくださいね！

銀行振込

銀行振込をご希望の場合は、口座情報をお知らせします。

対応銀行
埼玉縣信用金庫「ザサイベース」名義
三菱東京UFJ銀行「とみっち」個人名義
埼玉りそな銀行「とみっち」個人名義

ご入金確認後、直接ファイル一式のダウンロードURLをお送りしますので、お問い合わせフォームよりご連絡ください。

購入できる内容

Gumroadより購入後、以下のファイル一式をすぐにダウンロード可能です。

readme.txt	フッター固定メニューの設置方法を詳しく説明したページへのアクセス情報を記載
footer_add.php	「footer.php」のカスタマイズ内容を記載
functions_add.php	「functions.php」のカスタマイズ内容を記載
footer-fixed-menu.css	フッター固定メニューのスタイルを設定
footer-fixed-menu.js	フッター固定メニューのアクションを設定
footer-fixed-menu-gad.js	Googleアンカー広告と同時に使用する際に使用

設置方法を詳しく説明したページ

「設置方法を詳しく説明したページ」は当ブログ内にパスワードを設定して用意しています。

説明ページの見出しだけ紹介しますと、以下となります。

更新履歴
注意事項
STORKの子テーマを導入する
フッター固定メニューの完成形
　「メニュー」をタップ
　「最新記事」をタップ
　「フォロー」をタップ
　「SNSでシェア」をタップ
フッター固定メニューの導入に必要なファイル一覧
　1. footer-fixed-menu.css （新規設置）
　2. footer-fixed-menu.js （新規設置）
　3. functions.php （設置後内容を編集）
　4. footer.php （設置後内容を編集）
アイコンの変更
電話発信メニューを設置
Google Adsenseのアンカー広告
CSSファイル、JSファイルの圧縮
CSSのカスタム例
著作権
最後に

設置の際の注意

新規でサーバーに設置するファイル、及び編集するファイルがあります。

コピペでファイルを修正しますので、バックアップをご自身でとっていただいた後、WordPressの管理画面もしくは、テキストエディタでファイル内容を修正できる、WordPressの管理画面もしくは、FTPクライアントソフトを使用して、新規ディレクトリ（フォルダ）を作成できる方向けの内容となります。

フッター固定メニュー

フッター固定メニューを導入すると、スマホ閲覧時、以下のように表示されます。

当ブログでも導入しているので、スマホで見ると確認できます。

「footer.php」のHTMLタグを修正するだけなので、もちろんご自身で好きなメニューに変更していただくことも可能です。

スマホ端末がどんどん大きくなってきて、スマホサイトのヘッダーにあるハンバーガーメニューがホームボタンから遠く、どんどん使いづらくなってきましたね。。

今後、ハンバーガーメニューに変わるスマホメニューの表示方法の一つとしてフッター固定メニューは注目されています。

ボタンはそれぞれ、以下のような挙動をします。

ホーム	トップページへのリンク
メニュー	メニューをポップアップ表示（ヘッダーのハンバーガーメニューをタップした際と同様の動き）
最新記事	最新記事へスクロール
フォロー	フォローボタンをフッターに表示（Twitterとfacebook）
SNSでシェア	SNSシェアポップアップを表示
トップ	ページ最上部へとスクロール

それぞれのボタンをタップした際に表示される画面は以下となります。

「メニュー」をタップ

「メニュー」ボタンをタップすると、STORKのハンバーガーメニューをタップした際と同様にメニューを表示します。

「フォロー」をタップ

「フォロー」ボタンをタップすると、SNSフォローボタンが下からニョキっとアニメーションして表示されます。不要な方は、該当メニュー部分の記述を削除、もしくはコメントアウトしてください。

「SNSでシェア」をタップ

「シェア」ボタンをタップすると、SNSシェアできるポップアップが表示されます。

これらはあくまでも設置例ですので、HTMLを編集できる方は、表示される内容をご自身で好きなものに変更していただいても構いません。

表示するメニューは3個〜6個までがオススメです。

Googleアンカー広告との併用

「Googleアンカー広告」と併用することも可能です。

Googleアンカー広告が表示される際にはメニューが上に移動し、広告が非表示となった際にはメニューも下に移動します。

ただし、フッター固定メニューの近くに広告が表示されることは、誤クリック（タップ）を誘発すると捉えられ、場合によってはGoogle Adsenseの規約に反する可能性がありますので、推奨はしません。

ご自身の責任の元ご使用ください。

電話発信メニューを設置

【2017年6月追加】
電話発信メニューを設置する方法を追記しました。

「電話」ボタンをタップすると、指定した電話番号に発信をすることが可能です。

電話番号の指定はHTMLのaタグ内に「tel:090-xxxx-xxxx」を指定することで簡単に実装できます。

会社や店舗のブログで、「問い合わせ先」などの用途として是非ご使用ください。

アイコンの変更

今回のメニューでは、アイコンにはSTORKデフォルトで使用されている「Font Awesome」というアイコンフォントを使用しています。

このような記述が「Font Awesome」を使用したものとなります。

<i class="fa fa-file-text-o" aria-hidden="true"></i>

公式ページから好きなアイコンを選び、指定することもできます。

カスタマイズに関して

ボタンの色、テキストの大きさ、余白、線の色など、フッターに関する設定は全て「footer-fixed-menu.css」に記述をしていますので、CSSを編集できる方は、是非自由にカスタマイズを行って、自分らしいデザインにしてみてください。

使用するアイコンに関しても、「font-awesome」を使わずに、ご自身で画像を用意していただいても面白いかもしれません。

お買い上げいただいた方々のメッセージ

STORKのフッター固定メニューをお買い上げいただいた方のTweetを一部掲載させていただきます。

固定フッターはこの人のを買ったけどSTORKを使ってる人にはオススメ！(というかSTORKでしか使えないけど)ユーザビリティが上がるし他のテンプレっぽいブログと違ったデザインにできます。 https://t.co/vTKgeRNtgt
— さだぢ (@ngomeen) August 17, 2017

うひょー俺のストークがオシャレに1UPしたあああああああああ(´ω`)
「STORK（ストーク）にフッター固定メニューを導入する方法」を販売開始しました！ https://t.co/8xTGc7vOZp pic.twitter.com/ZBkCw6LLqI
— まっさーマサオカブログ主宰 (@iMassa07) June 3, 2017

とみっち(G)さん（@tomicci）のこれ、めっちゃ使える。これで1,000円とか安すぎわろた
「STORK（ストーク）にフッター固定メニューを導入する方法」を販売開始しました！ https://t.co/3hoAFlxBfT
— タカハタユウスケ (@sutaba_mac) April 20, 2017