【販売終了】「STORK(ストーク)にフッター固定メニューを導入する方法」1500円

【重要】WordPressプラグイン版
2018年2月6日に「プラグイン版」をリリースしました。
より設定が簡易になっておりますので、新規でお買い求めの方はこちらをご利用ください。

当ページで販売していたカスタマイズ方法は古い内容となり、販売終了しています。既にお買い上げの方は、購入者限定ページよりダウンロード可能です。

Webクリエイター「とみっち」です。

当ブログは人気WordPressテーマ「STORK」を使用しているのですが、スマホで閲覧した際に、フッター固定メニューを表示できるようにカスタマイズしています。

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

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

現在は「プラグイン版」に完全移行しましたので、本ページのカスタマイズ方法は販売していません！

クリックでジャンプ

1 【必読】注意事項
2 購入方法、料金
- 2.1 Gumroad
3 当ページから以前購入できた内容
- 3.1 設置時の注意点
4 フッター固定メニュー
5 アイコンの変更
6 カスタマイズに関して
7 お買い上げいただいた方々のメッセージ
8 最後に

【必読】注意事項

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

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

「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(ストーク)固定フッター」プラグイン〜スマホ固定フッターメニューを表示〜

気がつけばノマド歴5年。Webクリエイターの「とみっち」です。当ブログでは、有料WordPressテーマ「STORK(ストーク)」に関する情報をいくつか発信しています。昨年2017年4月、スマホで閲覧した際に「固

thesaibase.com

当ページから以前購入できた内容

当記事にリンクしていた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アンカー広告と同時に使用する際に使用

設置時の注意点

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

コピペでファイルを修正しますので、バックアップをご自身でとっていただいた後、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」を使用したものとなります。

&lt;i class=&quot;fa fa-file-text-o&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;

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

カスタマイズに関して

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

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

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

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

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