WordPress ページトップに戻るボタンをつけよう – WPFront Scroll Top

スクロールが非常に長くて、上まで戻るのが大変!ブログトップはもちろん、文字数の多い記事や、カテゴリー、タグページなどでもそうなりがちですよね。読者に優しいブログにするために、ワンクリックでページトップに戻れるボタンをつけましょう。

この記事では、ページトップに戻れるボタンをつけられるプラグインについて詳しく解説しています。

 

完成品

WPFront Scroll Topをインストールしよう


WordPress には戻るボタンをつけられる、いろいろなプラグインが存在していますが、特におすすめなのが、WPFront Scroll Top というプラグインです。

70 種類以上のボタンが使える

デフォルトで 70 種類以上のボタンが使え、オリジナルの画像をボタンとして使用することも可能です。設定が細かく行えますので、カスタマイズ性もとても高くなっています。

ダッシュボード > プラグイン > 新規追加 で WPFront Scroll Top を検索して、インストール & 有効化してください。

プラグインのインストール方法がわからない方は以下のページを参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

WPFront Scroll Topの使い方


1. 設定ページに移動する

インストールが終わったら、ダッシュボード > WPFront を押して、プラグインの設定ページに移動しましょう。

 

2. ボタンを表示する設定を行う

ボタンを表示するのに最低限必要な設定は以下になります。

 設定  解説
Enabled チェックしてください。プラグインを利用するという意味です。
JavaScript Async チェックしてください。JavaScript というプログラム言語でボタン機能を実現していますが、これを非同期で読み込む設定です。チェックしておくとブログの表示が速くなります。ボタンが正常に表示されなかった場合はチェックを外してください。
Image Button 表示したいボタンを選んでください。好きなボタンを選んでください。後から変更することもできますので、とりあえずでも構いません。

上記、3つの設定を行うだけでボタンを表示することができます。設定が終わりましたら、一番下までスクロールして 変更を保存 ボタンを押してください。

 

3. ボタンを確認する

ブログを確認してください。少しスクロールを行うと、右下にボタンが表示されると思います。押すとページトップに移動します。

とても簡単に表示できましたね!選べるボタンもたくさんあるので、いろいろ試しながらブログのデザインにあったボタンを探してみてください。

オリジナルのボタンを使用する方法


試してみたけど、ボタンのデザインが気に入らなかった。もっと他のボタン画像はないの?ボタンを自作したい!そういった方のためにボタン画像をアップロードして使う方法を解説します。

まず素材サイトなどでボタン画像をダウンロードしてください。

今回は例として、やじるし素材天国からこちらの画像を利用させてもらいました。

 

1. ボタン画像をアップロードする

ダッシュボード > メディア > 新規追加 を選択して、画像のページに移動してください。ここにファイルをドロップと書かれた場所に、ボタン画像をドラッグ&ドロップするか、ファイルを選択からボタン画像を選んでください。

処理中…と書かれたまま、動作が止まってしまうことがありますが、ほとんどの場合、正常にアップロードは終わっていますので、次に進みましょう。

 

2. メディアライブラリに移動する

ダッシュボード > メディア > ライブラリ を選択して、さきほどアップロードしたボタン画像を選択しましょう。

 

3. ボタン画像のURLを取得する

添付ファイルの詳細という画面が表示されますので、右側にある URL というフォームに書かれている URL をコピーしてください。フォームを選択してキーボードの Ctrl + A を押すと選択できます。次に Ctrl + C でコピー完了です。

 

4. 設定ページに戻り、URLを貼り付ける

ダッシュボード > WPFront を選択し、設定ページに戻ったら下の方にスクロールを行い、Custom URL と書かれたフォームに、さきほどコピーした URL を貼り付けてください。そしてラジオボタンをチェックしてから(画像のように青●をつける)変更を保存 ボタンを押してください。

 

5. ボタンをチェックする

巨大な指が表示されました!邪魔過ぎる大きさです。素材サイトなどの画像を利用させてもらう場合は、あらかじめ画像編集ソフトなどで大きさを調整しておくとこういうことにはなりません。

画像のサイズは画像編集ソフトで調整することもできますが、設定ページで、Button Size のフォームに数値を入力することでも調整が可能です。

横 ○○ px × 縦 ○○ px です。片側だけ数値を入力しても、自動的に縦横比を調整してくれます。

※ スマートフォンやタブレットなどのモバイル機器で、画像を綺麗に表示したい場合は、表示したい大きさの倍のサイズの画像をアップロードして、Button Size で半分の値を入力すると綺麗に表示されます。

WPFront Scroll Topの設定解説


WPFront Scroll Top には設定できる項目がたくさんあります。

Display  解説
Enabled チェックするとボタンが表示されます。一時的に無効にしたい場合にチェックを外してください。
JavaScript Async このプラグインは JavaScript というプログラム言語で機能を実現していますが、チェックすると非同期で JavaScript を読み込んでブログの表示を速めます。ボタンが正常に表示されなかった場合はチェックを外してください。
Scroll Offset ボタンは少しスクロールされてから表示されます。この表示されるまでの距離を設定します。大きい数値を設定すると、ある程度スクロールされてから表示されるようになります。
Button Size 表示するボタンのサイズです。横、縦の幅をそれぞれ px で設定します。片側だけ入力しても自動的に縦横比が計算されて、適切なサイズで表示されます。
Button Opacity ボタンの透明度を設定します。数値を小さくすると透明に近づき、大きくすると透明度が下がります。
Button Fade Duration スクロールが上に到達したときにボタンが消えますが、消えるまでの時間を設定します。大きな数値を設定すると、ゆっくりと消えるようになります。
Scroll Duration ボタンを押した時に、どのくらいの速度で上に移動するかの設定です。大きな数値を入力すると、ゆっくり上に戻ります。
Auto Hide チェックすると、スクロールしないでしばらく時間が経つとボタンが自動的に消えます。
Auto Hide After 上の消えるまでの時間を設定します。例えば 2 を設定すると、スクロールせずに 2 秒経つと自動でボタンが消えます。
Hide on Small Devices アクセスしたデバイスの横幅が小さい場合は、ボタンを表示しません。スマートフォンなどの横幅の小さいデバイスでボタンを表示すると、記事が読みにくくなったりする場合は、チェックしておくとボタンが表示されなくなります。
Small Device Max Width 上の設定とセットです。ここで設定した横幅未満のデバイスではボタンを表示しません。
Hide on Small Window Hide on Small Devices のブラウザ版です。チェックすると、ブラウザの横幅が小さいときにボタンを表示しません。
Small Window Max Width 上の設定とセットです。ここで設定した横幅未満のブラウザではボタンを表示しません。
Hide on WP-ADMIN ダッシュボードなどの管理者ページでは、ボタンを表示しません。邪魔に感じた場合はチェックしておくといいでしょう。
Hide on iframes チェックしておくと、ポップアップの中など、インラインフレームではボタンを表示しません。
Move Admin Menu チェックすると、設定ページが ダッシュボード > 設定 > Scroll Top に移動します。チェックを外すと ダッシュボード > WPFront に戻ります。
Button Style ボタンを Image: 画像、Text: 文字、Font Awesom: アイコンフォントの 3 つから選択することができます。

 

Location  解説
Location ボタンを表示する場所を設定します。
Bottom Right: 右下
Bottom Left: 左下
Top Right: 右上
Top Left: 左上
Margin X ボタンを表示する位置を指定します。Location の設定で、○○ Right を選んだときはブラウザの右からの距離。○○ Left を選んだときはブラウザの左からの距離になります。
Margin Y ボタンを表示する位置を指定します。Location の設定で、Bottom ○○ を選んだときはブラウザの下からの距離。Top ○○ を選んだときはブラウザの上からの距離になります。

 

Filter  解説
Display on Pages ボタンを表示するページを設定できます。
All pages: すべてのページに表示します。
Include ~: 指定した記事 ID に表示します。
Exclude ~: 指定した記事 ID を除外して表示します。

 

Image Button  解説
Custom URL オリジナルの画像を使う時に、画像の URL を入力します。
Image ALT 画像の読み込みに失敗したときや、音声読み上げブラウザを利用した際に画像の代わりに読み込まれるテキストになります。ページトップに戻る や Back to top などと入力しておくといいでしょう。

最後に


ページトップへ戻るボタンを用意しておくと、とても便利ですし、ブログの回遊率アップにも繋がると思います。

記事を充実させるだけでなく、インターフェースや使い勝手についても意識していくと、ブログの評価がぐっと高まるのではないでしょうか。

WordPressのサイドバーを固定しよう!スクロールに追従させる – Q2W3 Fixed Widget

文字数の多い記事を書くと、サイドバーよりも記事が大幅に長くなることってよくありますよね。ブラウザでその記事を表示すると、サイドバーの部分になにもない空間が生まれてしまいます。

 

記事を読み終わった時に、サイドバーのメニューから他の記事も読んでもらいたいけど、読者がサイドバーをチェックするには、わざわざスクロールを行ってページの上まで戻ってもらわなければなりません。

これはちょっと気が利いてないですよね。ページの回遊率も下がってしまいます。

だからサイドバーの位置を固定しましょう。スクロールに追従させれば、常にメニューが表示されるようになって、他の記事も読んでもらいやすくなります。

この記事ではプラグインを利用してサイドバーを固定する方法と、スタイルシートを利用して固定する方法の2つを解説しています。

 

完成品

プラグインを利用する – Q2W3 Fixed Widget


1. プラグインをインストールする

Q2W3 Fixed Widget という、簡単にサイドバーを固定することができるプラグインがあります。プラグインの使い方を解説しますので、まずインストールして有効化してください。ダッシュボード > プラグイン > 新規追加 で Q2W3 Fixed Widget を検索しましょう。

プラグインのインストール方法がわからない方は以下のページを参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

 

2. 固定するウィジェットを選ぶ

ダッシュボード > 外観 > ウィジェット を選んで、画像のページに移動してください。そしてブログサイドバーの欄から、固定したいウィジェットを選びましょう。

 

3. Fixed widgetを選んで保存する

固定したいウィジェットを選ぶと、Fixed widget というチェック項目が表示されていますので、チェックしてから保存しましょう。

 

4. ウィジェットが固定されているか確認してみましょう

今回は例としてカテゴリーと検索ウィジェットの位置を固定してみました。確認してみるとスクロールしても消えずに表示されています。

が、しかし、ひとつ問題が…。画像の赤枠を見てもらえるとわかりますが、カテゴリーの一部が見切れてしまっています。使っているテーマやカスタマイズによっては、他の部分と固定しているウィジェットが重なってしまって、うまく表示されないことがあります。

その場合は重ならないように設定を行いましょう。

 

5. 上マージンを設定する

ダッシュボード > 外観 > Fixed Widget 設定 を選ぶと、プラグインの細かい設定が行えるページが表示されます。今回はウィジェットの上部分が重なっているので、上マージンを調整します。上マージンと書かれているフォームに数値を入力して、ちょうどいいスペースを作ってみてください。

 

6. 上マージンの調整後

見切れていた部分が表示されて、カテゴリーという文字が出てきました。こんな感じに重なっている部分を重ならないようにしたり、デザイン的にもうちょっとスペースを空けたいなという時などに、上マージンを設定してみてください。

 

7. サイドバーの縦に長いウィジェットを固定すると?

サイドバーに設置されている縦に長いウィジェットを固定すると、フッター(ブログ一番下のコンテンツ)に、固定しているウィジェットがめりこむことがあります。

この場合はさきほどの上マージンと書かれているフォームの下にある、下マージンの数値を調整してめりこまないように設定しましょう。

 

8. 下にめりこまないようにする設定

下マージンを設定してもめりこまないようにできるのですが、もっと高機能で適切な設定も用意されています。設定画面の 停止 ID フォームです。ここにフッターの ID を入力することで、今後フッターの高さが変わっても、めりこまないようにすることができます。

フッターの ID は、ブラウザの右クリックから ページのソースを表示 して、キーボードで Ctrl + F を押して、ページ内検索で <footer を検索することでわかります。ちょっと難しいかもしれませんが、ソースから以下のような <footer> タグを探してみてください。

<footer id="colophon" class="site-footer" role="contentinfo">

<footer> タグの id=”” で囲まれている文字列が フッターの ID になります。この例の場合は、colophon が ID です。それを 停止 ID フォームに入力することで、サイドバーのウィジェットがフッターにめりこまなくなります。

テーマによっては <footer> タグの代わりに、他のタグがブログの一番下に表示されていることがありますので、その場合はそのタグの ID を入力してください。ようは、めりこませたくない部分のタグの ID を入力すればいいのです。

※ 注意:PCでアクセスした時、スマホ・タブレットでアクセスした時、それぞれで ID の名前が違っていたり、なくなっていたりすることがあります。複数の環境で正常に表示されているか、チェックすることを忘れないようにしてください。

Q2W3 Fixed Widgetの設定解説


設定 解説
上マージン 固定したウィジェットの上方向の余白を設定します。サイドバーの上部分が重なった場合に設定しましょう。
下マージン 固定したウィジェットの下方向の余白を設定します。サイドバーの下部分が重なった場合に設定しましょう。
停止 ID 設定した ID のタグまでスクロールしたら、それ以上は下に行かないようになります。
更新間隔 通常は気にしなくて問題ありません。
幅を無効化 モバイル端末でブログにアクセスしたときに、サイドバーの固定を行わないようにします。ブラウザの横幅が設定した値未満の場合はサイドバーを固定しません。このブログでは現在 750px に設定しています。
高さを無効化 上記設定の高さ版です。
設定 解説
カスタムID 普通は、外観 > ウィジェットの画面で、固定するウィジェットを選んで設定しますが、自分でコードを書いてサイドバーのデザインを行った場合などは、ウィジェットの画面では固定する設定が行えませんので、こちらで直接 ID を指定します。固定したい部分の ID を一行ずつ入力してください。

その他の方法


なんらかの理由でプラグインが正常に動作しなかった場合や、表示の軽さにこだわりたい方のために、スタイルシートを利用してサイドバーを固定する方法も解説しておきます。

この方法は JavaScript を利用せずスタイルシートだけで機能しますので、表示は軽快になります。ただし IE 含む一部のブラウザでは動作しません。最新ブラウザのみ利用できる方法なので、理解した上で利用してください。

対応しているブラウザはこちらのウェブサイトで確認できます。

Can I use… Support tables for HTML5, CSS3, etc

※ テーマによっては機能しないことがあります。

スタイルシートを追加できる環境を作る


まずはスタイルシートを追加できる環境を作ります。このブログではテーマに依存しない形でスタイルシートを追加・編集するために、Simple Custom CSS and JS というプラグインの利用を推奨しています。

Simple Custom CSS and JS をインストールしていない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

もしなんらかの理由があってプラグインのインストールをしたくない場合は、ダッシュボード > 外観 > カスタマイズ内にある 追加 CSS を開いてスタイルシートを入力するようにしてください。

スタイルシートでサイドバーを固定する方法


1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS を選択して、スタイルシートを入力できるページに移動します。

 

2. スタイルシートを貼り付ける

タイトルに Fixed Sidebar と入力して、その下の /* */ に囲まれた英文をすべて削除してから、以下のコードを貼り付けてください。タイトルは自分で管理する用ですので、覚えやすいタイトルに変えていただいて構いません。

貼り終えたら右側にある公開ボタンを押してください。

top: 130px;

この記述は上方向の余白を表しています。サイドバーが固定されたときに、上に 130px の余白が空くという意味です。130px は大きいと思いますので、任意の数値に変更してください。

 

3. テーマによって ID 名・クラス名を変更する

上記のコードを貼り付けても正常に動作しなかった場合は、以下の説明に従ってコードを変更してください。

一般的なテーマの場合、ブログのソースは以下のような構成になっています。

記事などが表示されるメインコンテンツ
<div id="primary" class="content-area">...</div>

サイドバー
<aside id="secondary" class="widget-area">...</div>

サイドバーの ID が secondary なので、スタイルシートで #secondary と指定しています。運営しているブログのソースを確認して、サイドバーの ID が違うものだった場合は、secondary と書かれている部分を、その ID に変更してください。

サイドバーに ID が存在せず、スタイルシートのクラス名だけだった場合は、#secondary.クラス名 に変更してください。クラス名を入力する場合は、半角ドットを忘れないようにしてください。

上記の例の場合は、#secondary(ID名)の代わりに、 .widget-area(クラス名)でも動作します。

最後に


サイドバーを固定させると他の記事を読んでもらいやすくなりますし、無駄なスペースもなくなってブログの見栄えもよくなります。

プラグインを利用すると簡単なので、サイドバーのあるテーマを使っている方はぜひ試してみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

WordPress を利用していると、ここの見た目を変更したい、こんな機能を追加したいなどなど、さまざまな変更や機能追加をしたくなってきますが、そんなときに必要になるのが CSS(スタイルシート)や JavaScript です。

この記事では自作の CSS・JavaScript・HTLM を WordPress に追加する方法について解説していきます。

 

追加 CSS

WordPress には CSS を追加するための機能が最初から用意されており、画像のように、ダッシュボード > 外観 > カスタマイズ内の 追加 CSS という場所で、スタイルシートを追加することができるようになっています。

しかし、この機能はテーマに依存してしまうので、テーマを変更したときに追加したスタイルシートが効かなくなってしまうという問題があります。テーマは絶対に変えない!という方はそれでいいと思いますが、部屋の模様替えをするように、時々見た目を変えたくなったりしますよね?

そういった場合に備えて、日頃からテーマに依存しない形で CSS や JavaScript を追加していきましょう。

Simple Custom CSS and JS


このプラグインを利用すると、テーマに関係なく、CSS・JavaScript・HTMLのコードを追加していくことができるようになります。

ダッシュボード > プラグイン > 新規追加で、Simple Custom CSS and JS を検索してインストール&有効化してください。

プラグインのインストール方法がよくわからない方は、以下のページを参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

使い方


1. スタイルシートを追加してみる

インストールが終わると、ダッシュボードに Custom CSS & JS という項目が表示されていると思います。そこから Add Custom CSS を選んで、スタイルシートを追加してみましょう。

 

2. スタイルシートのタイトルを入力する

画像赤線の ここにタイトルを入力 と書かれているフォームに、スタイルシートのタイトルを入力してください。これは自分で管理するためのタイトルなので、覚えやすいタイトルを入力しておくといいでしょう。

 

3. スタイルシートを入力する

タイトルを入力したら、下のフォームに /* */ で囲まれた英文がありますので、これをすべて削除して、代わりにスタイルシートを入力してください。画像では <strong>タグを赤くするスタイルシートを入力しています。

入力が終わったら、右にある 公開 ボタンを押してください。公開ボタンを押すと、ブログにスタイルシートが適用されます。

 

4. 管理画面で確認する

メニューの All Custom Code を押すと、先程入力したスタイルシートが表示されています。この画面では、入力した CSS・JavaScript・HTML を管理することができ、星マークを押して、公開・非公開を切り替えることができます。

★は現在公開中で、☆は非公開の状態です。不要になったコードがある場合は、このページで非公開に設定しておきましょう。

今回は例としてスタイルシートを入力してみましたが、同じような形で JavaScript と HTML のコードも入力することができます。

Options について


スタイルシートや JavaScript を入力するフォームでは、オプションを設定することができます。そのオプションの各項目について解説します。

Linking type

External File: 入力した CSS・JavaScript を外部ファイルにして、以下のような形で読み込みます。

<link rel='stylesheet' id='1235-css' href='https://gameusers.org/dev/blog/wp-content/uploads/custom-css-js/1235.css?v=9179' type='text/css' media='all' />

Internal: ソースのタグ内にそのまま表示されます。

<style type="text/css">
strong {
 color: red;
}
</style>

Where on page

Header: HTMLのソースの上部、<head>タグ内に表示されます。CSS は上部に表示されるのが普通なので、CSSの場合は Header を選択しておくといいでしょう。

Footer: HTMLのソースの下部に表示されます。JavaScript の場合は、Footer を選んでください。上の方に JavaScript のコードがあると、JavaScript をすべて読み込んでから HTML の読み込みが始まりますので、ページの表示が遅くなってしまいます。特別な場合を除いて、基本的には Footer を選んでおくのが正解です。

Where in site

in Frontend: ブログのトップページや記事のページなど、誰もが見れるページに表示されます。

in Admin: ダッシュボードなど、管理者用のページに表示されます。

On Login Page: ログインページに表示されます。

このプラグインでなにができるの?


この記事を見ただけではなにができるのかよくわからないと思いますが、このプラグインを利用すれば、本当にいろいろなことができるようになります。

このブログでは Simple Custom CSS and JS を利用して、リストの見た目を変更する方法、スクリプトを利用して便利な機能を追加する方法、Web フォントで文字を綺麗にする方法などを解説していきますので、ぜひそちらもチェックしてみてください。

WordPress プラグインのインストール方法を詳しく解説

WordPressにはたくさんの便利なプラグインが用意されています。こんな機能があったらいいのになと思うものは、だいたい存在していると言っても過言ではありません。

今回はプラグインのインストール方法について詳しく解説していきます。WordPressを導入したばかりでよくわからない方は、この記事を参考にしてインストール方法を覚えてください。

プラグインのインストールには大きく分けて3つの方法があります。

  1. プラグインを検索してインストール
  2. プラグインファイルをアップロードしてインストール
  3. サーバーに直接プラグインファイルをアップロードしてインストール

1の方法は、WordPress プラグインディレクトリに登録されているプラグインをインストールする時に使う方法で、一番簡単にインストールが行えます。WordPress プラグインディレクトリというのは、WordPressの関係者が行うチェックを通過したプラグインだけが登録することのできる公式のプラグイン置き場です。

2の方法は、公式に登録されていないプラグインを利用する際に使います。プログラマーが個人的に開発した便利なプラグインを自分のウェブサイトなどで提供してくれている時に、この方法を使ってインストールすることができます。

3の方法は、プラグインのファイルを自分で修正してからインストールを行う人が利用する方法で、バグの修正や細かいカスタマイズなどが行えますが、Web制作の知識が必要になります。

基本的には1と2の方法を知っているだけで問題なくインストールを行えます。

1. プラグインを検索してインストール


1.  プラグインページに移動する

WordPressのダッシュボードで、プラグイン > 新規追加 を選択してください。

 

2. インストールしたいプラグインを検索する

右上の方にプラグインを検索するためのフォームがありますので、そこでインストールしたいプラグインの名前を入力してください。

 

3. プラグインをインストールしましょう

フォームにプラグインの名前を入力すると、プラグインが表示されます。画像では例として Game Users Share Buttons を検索して表示しています。プラグインが表示されたら 今すぐインストール と書かれたボタンを押しましょう。

インストールが始まるのでしばらく待ってください。インストールが終わると、さきほどのボタンが 有効化 に変わります。有効化ボタンを続けて押してください。

 

4. インストール完了!

画面が切り替わって プラグインを有効化しました。 と表示されたら、プラグインのインストールは完了です。簡単ですね!

2. プラグインファイルをアップロードしてインストール


1. プラグインファイルをダウンロードする

開発者が自分のウェブサイトなどでプラグインを公開してくれている場合、そのプラグインファイルをまずダウンロードする必要があります。

今回は例として、WordPress プラグインディレクトリから、Game Users Share Buttons のプラグインファイルをダウンロードしてインストールしてみます。

 

2. プラグインのアップロードページに移動する

ダウンロードしたプラグインファイルはZIPという圧縮ファイルになっています。それを ダッシュボード > プラグイン > 新規追加 からアップロードします。プラグインのアップロード と書かれたボタンを押して、アップロードページに移動してください。

 

3. プラグインファイルをアップロードする

ファイルを選択 というボタンを押して、ダウンロードしたプラグインファイルをアップロードします。プラグインファイルを選択したら、今すぐインストール ボタンを押してください。

注意:プラグインファイルはZIPのままアップロードしてください。ZIPファイルは解凍することができるのですが、インストールする時は解凍してはいけません。

 

4. プラグインを有効化してインストール完了!

アップロードが終わるとインストールが自動的に始まります。インストールが終わると画像のページに移動しますので、プラグインを有効化 と書かれたボタンを押してください。これでファイルをアップロードする方法でのインストールは完了です。

3. サーバーに直接プラグインファイルをアップロードしてインストール


1. プラグインファイルをダウンロードする

※ この方法は知識が必要になりますので、わからない方は行わないようにしてください。間違えると WordPress が正常に動かなくなったりしますので注意してください。

プラグインファイルをダウンロードしてきて、必要ならファイルを解凍してください。フォルダが出てきますので、それをFTPなどを利用してアップロードしましょう。

例えば https://www.example.com/blog/ というアドレスで WordPress を運営している場合、blog ディレクトリの内部に wp-content > plugins という構成のディレクトリがあります。そこに先程のフォルダをまるごとアップロードしてください。

Game Users Share Buttons プラグインの場合は、ZIPを解凍すると game-users-share-buttons というフォルダが出てきますので、それをそのままアップロードします。

blog > wp-content > plugins > game-users-share-buttons

上記のような構成になります。

 

2. プラグインを有効化する

ダッシュボードのプラグインページにアクセスすると、先程アップロードしたプラグインの項目が表示されていますので有効化してください。これでインストールは完了です!

最後に


プラグインのインストール方法について解説してみました。解説のとおりに操作すると簡単にインストールできますので、わからない方は画像を見ながらチャレンジしてみてください。

このブログでは WordPress の便利なプラグインを紹介していきますので、ぜひ他の記事もチェックしてみてください。

Game Users Share Buttons プラグインは特におすすめです!

WordPressのおすすめシェアボタンプラグイン、高速表示&好きなデザインに変更できます

Game Users Share Buttons

ブログをやっているなら絶対に設置しておきたいSNSのシェアボタン。公式が提供するボタンから、WordPressのプラグインで表示できるものまで様々なものがありますが、今回、ご紹介するのは、公式のものと比較すると表示速度は10倍!選べるテーマは無限大!世界中の素材サイトからアイコンをダウンロードしてシェアボタンの画像として利用できる画期的なプラグインです。絵を描いたりデザインが行える方なら、他にない世界でひとつのシェアボタンを作成することもできる、まさに夢のプラグインです!!

 

こんなシェアボタンが使えます

画像を見てください。これは世界中で提供されているSNSのアイコンを利用させてもらって作ったオリジナルのシェアボタンです。今回、紹介する「Game Users Share Buttons」を利用すると、誰でもこんなオシャレなシェアボタンをブログで使うことができるようになります。

これまではデザインに統一性のない公式のシェアボタンを並べて使うか、プラグインとして提供されている決まったデザインのシェアボタンを使うかで、見た目を変更する選択肢がほとんどなく、おしゃれなデザインのシェアボタンを設置しようとすれば、HTML・CSS・Javascript など Web 制作の知識が必要になったり、自分で画像を作る場合はデザインセンスが求められたり、誰でも簡単にできるというものではありませんでした。

しかし Game Users Share Buttons ならそれが可能です。誰にでも簡単にです!この記事ではインストール方法、使い方について詳しく解説していきますので、ぜひ一度、使って試してみてください。

対応テーマ


Twenty Seventeen Twenty Sixteen Twenty Fifteen
Simplicity2 STINGER PLUS+2 STINGER8
Xeory Extension Xeory Base

上記は表示に問題がないか確認済みのテーマです。基本的にはどんなテーマでも利用できます。

 

正常に表示されないテーマ

  • STINGER5

他にも表示に問題のあるテーマが見つかりましたら、ぜひ教えてください。

インストール方法


WordPress のダッシュボード > プラグイン > 新規追加ページで Game Users Share Buttons を検索してください。

1. ダッシュボードを表示する

ログインしている場合は、画像のように上部メニューからダッシュボードを選択してください。ログインしていない場合はログインすると自動的にダッシュボードに移動します。

 

2. メニューから プラグイン > 新規追加 を選択

ダッシュボードのメニューからプラグインを選び、次に新規追加を選んでください。

 

3. プラグインを検索する

ページ右上のフォームに Game Users Share Buttons と入力すると、黒ネコのアイコンのプラグインが出てきますので、そこに表示されている今すぐインストールボタンを押してください。

 

4. プラグインをインストールして有効化する

プラグインのインストールが終わると、有効化と書かれたボタンが表示されますので、押してください。

 

5. インストール完了

プラグインを有効化しました。と表示されると、インストールは完了です。次に使い方について解説しますので、記事を読み進めてください。

Game Users Share Buttons の使い方

1. 設定ページに移動する

ダッシュボードのメニューから 設定 > Game Users Share Buttons を選んでください。

 

2. テーマタブを選択する

Game Users Share Buttons の設定ページに移動しますので、そこでテーマタブを選んでください。

 

3. ブログで使いたいシェアボタンを選択する

シェアボタンがいくつか表示されます。これはシェアボタンのテーマになっており、好きなデザインを利用することができます。とりあえずどれか気に入ったものを選んで、編集タブに移動ボタンを押してみてください。

 

4. 編集タブに移動する

さきほど選んだテーマを利用するために、編集タブに移動します。上部メニューから編集を選んでください。

 

5. シェアボタンをブログに表示してみる

編集タブをスクロールしていくと、さきほど選んだシェアボタンのテーマが表示されています。そこの Top ボタンを押してみましょう。これはブログの記事の上にシェアボタンを表示するというボタンです。Bottom を押すと、記事の下にも表示されます。

 

6. ブログで表示を確認してみましょう!

ブログを確認してシェアボタンがどのように表示されているか、確認してみましょう。Top ボタンを押した場合、画像のように記事のすぐ上にシェアボタンが表示されているはずです。ただこのままだと、記事との間隔が狭すぎるので、もうちょっとスペースを空けたいところです。

 

7. 記事とシェアボタンの間隔を調整する

さきほどの編集タブ内で、Top 設定と書かれている部分を探してください。見つけたらその部分を押しましょう。

 

8. 余白を設定する

余白・個別投稿ページという欄に、と書かれたフォームがありますので、そこで余白を設定します。記事とシェアボタンの間隔を半角の数字で入力してください。使っている WordPress のテーマやデザインによって必要な間隔は変わりますので、いろいろ試しながら適切な値を見つけてください。

値を入力したら 保存ボタンを押しましょう。

 

9. 編集結果を確認、完成!

余白を設定したので、記事とシェアボタンの間にちょうどいいスペースができました。余白はよく設定する項目なので覚えておいてください。

その他にも設定できる項目はたくさんありますので、気になる部分が見つかったら、編集タブで設定を試してみてください。

最後に


自作自演で紹介記事を書いてみました。半年以上かけて頑張って作ったものなので、できるだけたくさんの人に使ってもらいたい!

使ってもらえばいいものだと感じてもらえると思うので、ぜひ一度試してみてください。もしわからないことがあれば、この記事のコメント欄で質問してもらえればいつでも答えるので、なんでも聞いてください。

リンク