WordPressの画像をモーダルウィンドウで表示しよう!

WordPress 画像をモーダルウィンドウで開く

WordPress の記事に追加した画像をクリック(タップ)すると、ブラウザに画像が読み込まれて大きく表示されますよね?

その際、画像をクリックする → ブラウザに画像が読み込まれる → 元のページに戻るという経緯をたどりますが、元のページに戻った時に、再度ページの読み込みが発生するので、ページの表示に時間がかかってしまいます。

パソコンからのアクセスの場合は回線が速いので、あまり気になりませんが、スマートフォンからアクセスしたときに、再度ページを読み込むと、時間がかかるので読者にストレスを与えることになってしまいます。

そこでおすすめしたいのが、モーダルウィンドウでの画像表示です。

モーダルウィンドウってなに?


触ってもらうとわかりやすいと思います。以下の画像をクリック(タップ)してみてください。

黒い背景になって中央に画像が表示されましたね。これがモーダルウィンドウです。モーダルウィンドウを使って画像を表示するメリットは、ブラウザの URL が変わらず、同じページ内に画像を拡大して表示するので、ブラウザの戻るボタンを押す必要がなく、ページの再読み込みも発生しないことです。

ブログ記事の画像をすべてモーダルウィンドウで表示すると、拡大したい画像だけを読み込んでページ内に表示できるようになるので、とても快適になります。

この記事では、画像をモーダルウィンドウで表示する方法を解説しています。これまでに投稿した記事のタグを変更することなく、モーダルウィンドウで表示できるようになりますので、興味のある方はぜひ試してみてください。

HTML と JavaScript を追加できる環境を作る


まずは HTML と JavaScript を追加できる環境を作ります。このブログでは Simple Custom CSS and JS というプラグインの利用を推奨しています。HTML や JavaScript の知識のない方でも、コピペするだけで簡単にできるように解説していますので、怖がらずにチャレンジしてみてください。

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

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

HTML を追加する


モーダルウィンドウは jQuery( WordPress でも使われている JavaScript のライブラリ ) の Magnific Popup というプラグインを利用して実装します。HTML のタグを利用してプラグインを読み込みましょう。

ちょっと難しい単語が出てきていますが、わからない方は気にせず解説にそってコピペするだけで OK です。

 

1. HTML を追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom HTML を選んでください。

 

2. HTML のコードを追加する

画像のページに移動したら、タイトルに Magnific Popup CDN と入力して、その下の <!– –> に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

 

そしてページ右側の Where on page と書かれている部分で、Footer を選択してください。それが終わったら公開ボタンを押しましょう。これでブログにプラグインの読み込みが行われます。

JavaScript を追加する


さきほどの設定で読み込まれるようになったプラグインを動作させるために、JavaScript を追加する必要があります。

 

1. JavaScript を追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom JS を選んでください。

 

2. JavaScript のコードを追加する

画像のページに移動したら、タイトルに Magnific Popup JS と入力して、その下の /* */ に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

 

そしてページ右側の Where on page と書かれている部分で、Footer を選択してください。それが終わったら公開ボタンを押しましょう。これでモーダルウィンドウの設定は完了です。

画像をチェックする


ブログの記事の画像をクリック(タップ)して、モーダルウィンドウが正常に表示されるかチェックしてみてください。

こんな感じに表示されると成功です。

対応画像を増やす


デフォルトでは記事内の GIF・PNG・JPEG 画像がモーダルウィンドウに表示されます。その他の画像もモーダルウィンドウに表示したい場合は、JavaScript のコードを編集して、以下の設定を追記してください。

jQuery('.entry-content a[href$=".png"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"]')
     ↓↓↓
jQuery('.entry-content a[href$=".png"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".svg"],a[href$=".svgz"]')

上記では拡張子が .svg と .svgz の画像を追加しました。他にもモーダルウィンドウで表示したい画像の種類がある場合は、赤文字のように、,a[href$=”.ファイルの拡張子”] を追加することで表示されるようになります。

最後に


画像をモーダルウィンドウで表示するようにすると、ブログの使い勝手がすごく良くなります。無駄な読み込みも減らせますので、より快適に記事を読んで貰えるようになります。

ぜひこの記事を参考に設定してみてください。

WordPress カテゴリー別に新着記事を表示するプラグイン – WPP Plus Widget

WordPress カテゴリー別・新着記事

検索サイトからのユーザーが目的の記事を読んだ後、他の記事も読んでくれたら嬉しいですよね。そういう考えで「最近の投稿」をサイドバーに掲載している方は多いと思います。

ですが、ここで自分のブログについて考えてみてください。検索サイトから来てくれた方が必要としている記事が「最近の投稿」にしっかりと並んでいると思いますか?テーマをひとつに絞って書かれてるブログの場合は問題ないと思います。ただ雑多な内容になってしまっているブログの場合は、アクセスしてくれた方が求める記事へのリンクを的確に提供できているとは言えないのではないでしょうか。

実はこのブログもそうなんです。Game Users というサイトの開発情報を掲載するために始めたブログなのですが、WordPress のプラグインを開発してから、WordPress についての記事も書くようになりました。そのため記事の内容に幅ができてしまったのです。

WordPress の情報を求めてブログを訪ねて来てくれた方が、まったく関係のない開発情報の記事を読んでも面白くないと思いますので、新着記事の表示もカテゴリー別に分けることにしました。

そこで使わせてもらったのが、WordPress Popular PostsWPP Plus Widget というプラグインです。この記事では、コードをコピーして貼り付けるだけで、当ブログと同じ新着記事を表示できる方法を解説しています。

この記事の解説に従って設定すると、トップページではブログ全体の新着記事が表示され、個別の記事ページではその記事が所属しているカテゴリーの新着記事が表示されるようになります。

HTML や CSS の知識がある方は、自分でデザインをカスタマイズすることも可能です。この記事では、カスタマイズ方法についても解説していきますので、ぜひ参考にしながらチャレンジしてみてください。

この記事は以下の記事の続きになります。必要なプラグインのインストールなどを済ませてから、こちらの記事を読んで下さい。

WordPress カテゴリー別に人気記事ランキングを表示するプラグイン – WPP Plus Widget

新着記事を表示する


新着記事は ダッシュボード > 外観 > ウィジェット で表示の設定を行います。WPP Plus Widget のインストールが済んでいると、新着記事というウィジェットが追加されています。

新着記事をサイドバーに表示する

左側に新着記事と書かれた部分がありますので、それをドラッグ&ドロップで、右側のブログサイドバーに移動させてみましょう。

ブログサイドバーに表示されたら、新着記事の欄をクリック(タップ)して開いてください。

 

新着記事の設定

設定 解説
タイトル 最新記事と入力してください。ブログトップページに表示される新着記事のタイトルです。なんでも構いませんので、好きなタイトルをご自分で考えてください。
タイトル(下層) 「{category}」の最新記事と入力してください。個別の記事ページや、カテゴリーページなど、トップページ以外で表示される新着記事のタイトルです。こちらも好きなタイトルを考えてください。{category} を入れると、表示している新着記事のカテゴリー名がタイトル部分に表示されます。
カテゴリの深さ 任意の数字 を半角で入力してください。カテゴリーの設定によって適切な値が変わってきます。いろいろ入力して納得の行く表示になる数字を見つけてください。カテゴリーの深さについて開発者の方が解説してくれていますので、こちらの記事を参考にしてください。
記事数 10 を選択してください。新着記事の表示件数を設定します。10 を選択すると記事が 10 件表示されます。

 

フォーマット設定

記事一覧の前後:最初のフォーム(左側)に以下のコードをコピーして貼り付けてください。

記事フォーマット:以下のコードをコピーして貼り付けてください。

 

サムネイル 解説
noimageのURL 200px × 200px の画像をメディアにアップロードして、その画像の URL を指定してください。新着記事の一覧にはサムネイル画像が表示されますが、各記事にアイキャッチ画像が設定されていない場合、ここで設定した画像が代わりに表示されます。
画像サイズ(横幅/高さ) 100 / 100 を入力してください。新着記事に表示されるサムネイル画像のサイズを指定します。

 

オプション 解説
表示記事を除外する チェックしてください。ブラウザに表示しているページは新着記事の一覧に表示されなくなります。
トップページで表示しない チェックを外してください。新着記事の一覧をトップページに表示したくない場合はチェックしてください。
カテゴリページで表示しない チェックを外してください。新着記事の一覧をカテゴリーページに表示したくない場合はチェックしてください

 

1. noimage の設定方法: 画像をアップロードする

ダッシュボード > メディア > ライブラリ新規追加ボタンを押して、画像をアップロードしましょう。200px × 200px のサイズの画像を推奨します。スマートフォンやタブレットでは倍のサイズをアップロードして、半分のサイズで表示すると綺麗に表示されます。

 

2. noimage の設定方法: 画像の URL を取得する

アップロードした画像をクリック(タップ)すると、画像の表示になると思います。ここで URL と書かれたフォームの中身をコピーしましょう。

 

3. noimage の設定方法: 画像の URL を貼り付ける

サムネイルの noimageのURL 欄にコピーした画像の URL を貼り付けてください。

 

ウィジェットの設定を保存する

すべての設定が終わりましたら、右下にある保存ボタンを押してください。これで新着記事のウィジェットの設定は終わりです。

スタイルシートを適用する


このままでも新着記事は表示されますが、まだスタイルシートが適用されていませんのでデザインは整っていません。

この段階ではこんな表示になります

 

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

ダッシュボード > Custom CSS & JS > Add Custom CSS をクリック(タップ)してください。スタイルシートを追加するページに移動します。

 

2. スタイルシートを入力して保存する

タイトルを入力するフォームに WPP Category New List と入力しましょう。そしてその下の /* */ に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。新着記事にスタイルシートが適用されます。

新着記事の完成!


解説どおりに設定を行い、アイキャッチ画像が各記事に設定されていると、新着記事はこのように表示されます。

ただしこれはテーマ Twenty Seventeen を使っている場合の表示です。他のテーマではサイドバーの横幅が狭かったりしますので、このままの設定では表示がおかしくなることがあります。

 

テーマ Twenty Fifteen の場合

サイドバーのサイズが狭いため、サムネイル画像と文字のバランスが悪くなってしまっています。

この場合はさきほど編集した ダッシュボード > 外観 > ウィジェット > 新着記事 に戻り、サムネイルのサイズを調整します。

サムネイル欄の画像サイズを 100 → 60 に変更して保存してください。

そしてスタイルシートも編集します。ダッシュボード > Custom CSS & JS > All Custom Code にアクセスし、さきほど入力したスタイルシートを編集します。

width: 100px;
  ↓↓↓
width: 60px;

この 100px と書かれている部分を 60px に編集して更新してください。これで新着記事に表示されるアイキャッチ画像のサイズが小さくなります。

 

完成!

アイキャッチ画像が小さくなり、文字とのバランスが良くなりました。上記で解説した部分を編集して、使用しているテーマに合ったデザインに変更してください。

HTML やスタイルシートの知識がある方は、ウィジェットの HTML コードや、追加したスタイルシートをまるごと置き換えることで、完全にオリジナルのデザインに変更することも可能です。

最後に


カテゴリー別に新着記事を表示することで、関連の深い記事を読者に紹介することができますので、より魅力的なブログに感じてもらえるのではないでしょうか。

ぜひ人気記事ランキングと一緒に設定してみてください。

WordPress カテゴリー別に人気記事ランキングを表示するプラグイン – WPP Plus Widget

WordPress カテゴリー別人気記事ランキング

当ブログでサイドバー(スマホの場合はページ下部)に表示しているアイキャッチ画像(サムネイル)付きの人気記事ランキングと新着記事を表示する方法を紹介していきます。

この記事の解説に従って設定すると、トップページではブログ全体の人気記事ランキングが表示され、個別の記事ページではその記事が所属しているカテゴリーの人気記事ランキングが表示されるようになります。

プラグインをインストールして、コードをコピペするだけで、このブログと同じランキングを利用することができます。

HTML や CSS の知識がある方は、自分でデザインをカスタマイズすることも可能です。この記事では、カスタマイズ方法についても解説していきますので、ぜひ参考にしながらチャレンジしてみてください。

必要なプラグインをインストールしよう


人気記事ランキングを表示するには、WordPress Popular Posts、WPP Plus Widget、Simple Custom CSS and JS という3つのプラグインが必要になります。

 

人気記事のアクセス数をカウントしてランキングにして表示します。ベースになるプラグインなので必須です。

WordPress Popular Posts の機能を利用して、カテゴリー別に人気記事ランキングを表示します。WPP Plus Widget 単独では動作しませんので、WordPress Popular Posts とセットになります。

人気記事ランキングと新着記事のスタイルシートを設定し、 No.1、No.2、No.3 と書かれた文字を Web フォントで表示するために必要になります。子テーマなどを利用して自分でデザインをカスタマイズする方は必須ではありません。

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

 

WordPress Popular Posts と Simple Custom CSS and JS は、ダッシュボード > プラグイン > 新規追加 ページでそれぞれの名前を検索してインストール&有効化してください。

WPP Plus Widget はプラグインをダウンロードしてから、ダッシュボード > プラグイン > 新規追加 ページでプラグインのアップロードを行って、インストール&有効化する必要があります。

http://8wired.jp/wpp-plus-widget

上記ページから、最新版(記事を書いてる時点では Ver. 0.4.4)をダウンロードしてインストールしてください。

プラグインのインストール方法について詳しく知りたい方は、こちらの記事を参考にしてください。

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

WordPress Popular Posts の設定


最初に WordPress Popular Posts の設定を行う必要があります。ダッシュボード > 設定 > WordPress Popular Posts > ツール を選んで、画像のページを表示させてください。

そして以下の設定を行いましょう。

設定 解説
デフォルトのアイキャッチ画像 画像をアップロードしてください。人気記事ランキングには記事ごとに設定しているアイキャッチ画像が表示されます。アイキャッチ画像が記事に設定されていない場合に表示されるデフォルト画像を設定します。
画像の取得元 アイキャッチ画像を選択してください。
閲覧を記録する対象者 訪問者のみを選択してください。これを選ばない場合、自分のアクセスも人気記事ランキングに反映されてしまいます。表示のテストをする場合は、全員を選んで自分でアクセスを行ってランキングを表示させるのもありです。アクセス数がゼロの場合はランキングが表示されません。
プラグインのスタイルシートを使う 無効を選択してください。今回はオリジナルのスタイルシートで人気記事ランキングのデザインを行いますので、プラグインに付属しているスタイルシートは利用しません。

それぞれ設定を行ったら、その場所にある適用ボタンを押すのを忘れないようにしてください。

アイキャッチ画像については以下の記事で解説しています。

WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

人気記事ランキングを表示する


人気記事ランキングは ダッシュボード > 外観 > ウィジェット で表示の設定を行います。

WPP Plus Widget をサイドバーに表示する

左側に WPP Plus Widget と書かれた部分がありますので、それをドラッグ&ドロップで、右側のブログサイドバーに移動させてみましょう。

ブログサイドバーに表示されたら、WPP Plus Widget の欄をクリック(タップ)して開いてください。

 

WPP Plus Widget の設定

設定 解説
タイトル 今週の人気記事ランキングと入力してください。ブログトップページに表示されるランキングのタイトルです。なんでも構いませんので、好きなタイトルをご自分で考えてください。
タイトル(下層) 「{category}」今週の人気記事ランキングと入力してください。個別の記事ページや、カテゴリーページなど、トップページ以外で表示されるランキングのタイトルです。こちらも好きなタイトルを考えてください。{category} を入れると、表示しているランキングのカテゴリー名がタイトル部分に表示されます。
カテゴリの深さ を入力してください。開発者の方が解説してくれていますので、こちらの記事を参考にしてください。
パラメータ limit=10
range=last7days
order_by=views
thumbnail_width=200
thumbnail_height=105
excerpt_length=50
stats_comments=0
pid=
上記を入力してください。

 

パラメータ 解説
limit 人気記事ランキングに表示される記事の数です。10 を入力すると 1 位~10 位まで表示されます。
range ランキングを計測する期間です。指定した期間内で人気ランキングの順位が決まります。以下の値を入力することができます。
last24hours: 1日
last7days
: 1週間
last30days
: 1ヶ月
all
: 全期間
order_by ランキングを並び替える基準です。以下の値を入力することができます。
comments: コメント数が多いと上位
views
: 訪問者数(アクセス数)が多いと上位
avg
: 1日あたりの平均ビューが多いと上位
thumbnail_width サムネイルの横幅です。半角数字を入力してください。解説では 200 の入力を推奨していますが、サイドバーの横幅が狭いテーマの場合は小さくしてください。
thumbnail_height サムネイルの縦幅です。半角数字を入力してください。解説では 105 の入力を推奨していますが、上記で設定したサムネイルの横幅に合わせて適切な値を入力してください。
excerpt_length 人気記事ランキングに記事の抜粋文を表示させる場合、表示させる抜粋文の文字数を指定します。
stats_comments 1 / 0
1 を入力するとランキングにコメント数を表示します。0 の場合は表示しません。
pid 1,2,3,4,5
人気記事ランキングに表示しない記事を指定します。ページ ID を入力してください。例えば同じタイプの記事が上位に並んでいる場合に内容のかぶっている記事を除外することで、ランキングに多彩さが生まれます。ページ ID の取得方法

 

フォーマット設定

記事一覧の前後:最初のフォーム(左側)に以下のコードをコピーして貼り付けてください。

記事フォーマット:以下のコードをコピーして貼り付けてください。

 

オプション

表示記事を除外するをチェックしてください。現在、ブラウザに表示されている記事はランキング内に表示されなくなります。

 

保存する

すべて設定しおわったら保存ボタンを押しましょう。これで人気記事ランキングのウィジェットの設定は終わりです。

スタイルシートを適用する


このままでもランキングは表示されますが、まだスタイルシートが適用されていませんのでデザインは整っていません。

この段階ではこんな表示になります

 

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

ダッシュボード > Custom CSS & JS > Add Custom CSS をクリック(タップ)してください。スタイルシートを追加するページに移動します。

 

2. スタイルシートを入力して保存する

タイトルを入力するフォームに WPP Category Popular List と入力しましょう。そしてその下の /* */ に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。人気記事ランキングにスタイルシートが適用されます。

Web フォントを適用する


人気記事ランキングのランキングの数字に Web フォントを適用します。絶対に必要な設定ではないのですが、普通のフォントよりもずっと見た目が良くなるので、設定することをおすすめします。

 

1. HTML を追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom HTML をクリック(タップ)してください。HTML を追加するページに移動します。

 

2. Web フォントを読み込むコードを入力して保存する

タイトルを入力するフォームに Web Fonts と入力しましょう。そしてその下の <!– –> に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。人気記事ランキングに Web フォントが適用されます。

WordPress での Web フォントの利用について詳しく知りたい方はこちらの記事を参考にしてください。

WordPress – Webフォントの使い方

人気記事ランキングの完成!


解説どおりに設定を行い、アイキャッチ画像が各記事に設定されていると、人気記事ランキングはこのように表示されます。

ただしこれはテーマ Twenty Seventeen を使っている場合の表示です。他のテーマではサイドバーの横幅が狭かったりしますので、このままの設定では表示がおかしくなることがあります。

 

テーマ Twenty Sixteen の場合

サイドバーの横幅が狭いので、ランキングの数字が重なって表示されてしまっています。

この場合はさきほど編集した ダッシュボード > 外観 > ウィジェット > WPP Plus Widget に戻り、サムネイルのサイズを調整します。

パラメータの欄の thumbnail_width を 200 → 150 に変更、thumbnail_height を 105 → 79 に変更して保存してください。これで人気記事ランキングに表示されるアイキャッチ画像のサイズが小さくなります。

そしてスタイルシートも編集します。ダッシュボード > Custom CSS & JS > All Custom Code にアクセスし、さきほど入力したスタイルシートを編集します。

content: 'No. ' counter(wpp-count);
        ↓↓↓
content: '' counter(wpp-count);

この No. と書かれている部分を削除して更新してください。これで人気記事ランキングのランキングの数字部分から、No. という表示が消えます。

 

完成!

アイキャッチ画像のサイズが調整され、No. の表示が消えたことで、ランキングのデザインが綺麗に整いました。

 

それ以外にデザインに影響を与える主な変更ポイントは、スタイルシートのフォントの欄です。

赤枠部分のフォントサイズを変更すると、ランキングの数字の大きさが変わります。また ‘Limelight’ と書かれている部分のフォント名を変更すると、ランキングの数字のフォントが変わります。フォントを変更する場合は、Web フォントを読み込む HTML コードも同時に変えてください。

上記の解説部分を編集しながら、お使いのテーマに合ったデザインを完成させてください。

HTML やスタイルシートの知識がある方は、ウィジェットの HTML コードや、追加したスタイルシートをまるごと置き換えることで、完全にオリジナルのデザインに変更することも可能です。

最後に


人気記事ランキングを表示しておくと、読者が他の記事も読んでくれるようになりますので、ブログのアクセスアップに繋がることは間違いありません。頑張って設置してみましょう!

記事が長くなりましたので、現在表示しているページと同じカテゴリーの新着記事を表示する方法は、他の記事に分けて解説させていただきます。

WordPress カテゴリー別に新着記事を表示するプラグイン – WPP Plus Widget

WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

アイキャッチ画像とは各記事の看板画像のことです。WordPress では、個別の記事ページだけでなく、記事が一覧で表示されるときにも利用されています。

テーマ Twenty Seventeen の個別記事

 

人気記事ランキング

 

テーマ Wallstreet の記事一覧

画像は一例ですが、さまざまな場面で記事を強調する画像として利用されているのがわかると思います。文字だけの記事よりもずっと魅力的に感じますよね。

アイキャッチ画像は特別です


当初、このブログはアイキャッチ画像を使っていませんでした。記事の一番上に大きな画像を載せるのと大して変わらないだろうと思っていたのですが、WordPress の利用経験が長くなってくると、やはり特別な画像なんだなと感じることが多くなりました。

世の中には数多くのテーマがありますが、アイキャッチ画像を上手に利用しているテーマもたくさんあります。ブログトップページでアイキャッチ画像と一緒に記事を一覧表示したり、サイドバーに新着記事を並べるときにも利用していたり、ブログを華やかに見せてくれる要素としてうまく活用しています。

また各種プラグインでも利用されていることが多く、このブログのサイドバーに置いている人気記事ランキングでもアイキャッチ画像を使っています。

WordPress でブログを運営しているけど、アイキャッチ画像は設定していないという方も多くおられると思いますので、ぜひこの機会に使い方を覚えて利用してみてください。

この記事では、アイキャッチ画像の設定方法、おすすめの画像サイズ、SNS での利用方法まで詳しく解説していきます。

アイキャッチ画像の使い方


画像は記事の投稿ページです。アイキャッチ画像は記事の投稿ページで追加・編集することが可能です。これまでに投稿した記事に、後からアイキャッチ画像を追加することもできます。

記事の投稿ページにアイキャッチ画像の欄が表示されていない場合は、上の画像と下の解説を参考にして表示してください。

  1. ページ上部の表示オプションをクリック(タップ)
  2. アイキャッチ画像をチェック
  3. ページ右下にアイキャッチ画像の欄が表示されます

 

アイキャッチ画像を設定する

アイキャッチ画像を設定と書かれたリンクをクリック(タップ)すると、画像をアップロードする画面が表示されますので、作成したアイキャッチ画像をアップロードしましょう。そして右下のアイキャッチ画像を設定ボタンを押すと、記事にアイキャッチ画像が追加されます。

 

アイキャッチ画像が設定される

アイキャッチ画像が設定されると、ページ右下のアイキャッチ画像欄にこのように表示されます。表示されたら記事を保存しましょう。

 

表示されました!

個別の記事ページを確認してみると、さきほど設定したアイキャッチ画像が表示されています。ページトップに大きく表示されていてインパクトは絶大ですね!

アイキャッチ画像のサイズは?


ずばり 1200px × 630px がおすすめです!

WordPress で使用しているテーマによって、アイキャッチ画像の表示サイズは変わってきます。このブログで現在使用しているテーマ Twenty Seventeen では、個別の記事ページでとても大きく表示されますので、このサイズでも大きすぎることはありません。しかし他のテーマではアイキャッチ画像が、それほど大きく表示されないこともあります。

サイズが 1200px × 630px の画像は非常に大きいです。使用しているテーマによっては無駄なサイズに感じるかもしれませんが、このサイズをおすすめしているのには理由があります。

それは Facebook でシェアしたときに画像が綺麗に表示されるサイズが 1200px × 630px だからです。実はアイキャッチ画像は、記事の看板画像としてだけでなく、SNS のシェア用画像としても利用することができます。このサイズにしておくと、それぞれを別に作成する手間がなくなりますので、一石二鳥にも三鳥にもなります。

SNSのシェア用画像とは?


Facebook

Twitter

適切に設定を行った上で Facebook、Twitter それぞれでシェアされると画像のような形で WordPress の記事が紹介されます。サイズが 1200px × 630px の場合、Facebook と Twitter の両方に対応でき、横長の大きな画像が表示されるため、見た目の印象も非常に強くなります。

 

SNSでシェアされたときにどんな表示になるか

現在、あなたのブログがシェアされたときにどんな表示になっているのかチェックする場合は、これらのサイトを利用してください。各記事の URL を入力すると、上記画像のようにシェアされたときの画面が表示されます。

※ それぞれ Facebook と Twitter のアカウントが必要です。

作成した画像をシミュレートしたい方は以下のサイトを利用してください。

SNSのシェア用設定を行う


SNS で画像付きでシェアされるためには OGP という設定を行わなければなりません。

上記のようなタグがブログのソースコードにないと、シェアされたときに画像が表示されません。

WordPress の場合は、OGP の設定が簡単に行えるようになるプラグインが用意されていますので、そちらを利用させてもらいましょう。

All in One SEO Pack

今回は All in One SEO Pack についての設定を解説します。その他の SEO プラグインでも同じ設定が行えますので、他のプラグインを利用されている方はそちらで画像を設定してください。

 

1. アイキャッチ画像の URL を取得する

記事投稿ページのアイキャッチ画像の欄を表示し、画像の上で右クリックを行って画像アドレスをコピーしましょう。

 

2. All in One SEO Pack のソーシャル設定を開く

記事投稿ページの下の方に、All in One SEO Pack の欄があるので、そこのソーシャル設定のタブを開きましょう。

 

3. 画像の URL を貼り付けてサイズを指定する

カスタム画像の欄にさきほどコピーした、アイキャッチ画像の URL を貼り付けましょう。そしてその下の画像の幅を指定画像の高さを指定に、アップロードしたアイキャッチ画像のサイズを入力してください。

今回は 1200px × 630px で画像を作成しましたので、1200 と 630 を入力します。

そして記事を保存しましょう。

これで SNS でシェアされたときに、アイキャッチ画像付きでシェアされるようになります。

 

4. シェアされたときの表示をチェックしましょう

上記で紹介したサイトでシェアされたときの表示をチェックしてみて、以下の画像のように表示されていると設定は正常にできています。

今後は記事を投稿する際に、アイキャッチ画像を設定してから SNS のシェア画像に指定することを忘れないようにしてください。

大変かもしれませんが、この作業を毎回やっていると、シェア数の増加やアクセスアップに繋がる可能性は高いです。ぜひ頑張ってください!

 

Facebook シェアデバッガー

 

Twitter Card validator

最後に


アイキャッチ画像が用意されている記事と用意されていない記事では、読者が受ける印象は大きく変わります。

時間をかけて書いた記事や、みんなに読んでもらいたい記事には、アイキャッチ画像を頑張って用意してみましょう。手間はかかりますが、その分きっといいことがあるはずです。

SNS でバズる(拡散される)ことを目指してシェアボタンの設置も忘れずに!

Game Users Share Buttons v1.2.1 更新情報

WordPress のプラグインで利用した際に、Top(記事の上) と Bottom(記事の下)に指定したシェアボタンの詳細設定を行えるようにしました。

Top & Bottom 詳細設定


シェアボタンを表示するページを指定できます。トップページ、個別投稿ページ、固定ページ、アーカイブページ、それぞれ表示したい場所をチェックして保存してください。

トップページやアーカイブページは通常、記事が一覧で表示されます。そしてそれぞれの記事部分にシェアボタンが表示されるのですが、各記事のシェア数を個別に取得しているわけではないので、実質トップページならトップページのシェア数が表示されているだけです(複数のシェアボタンに同じシェア数が表示されています)

そのため、一覧ページでは記事ごとにシェアボタンを表示する意味はないのではないかと考え、トップページやアーカイブページなどでは、シェアボタンを表示しない設定を行えるようにしました。

またこれまでは、シェアボタン編集 → 余白設定で記事とシェアボタンの間隔を調整していましたが、画像の余白欄で、Top と Bottom の間隔を個別に設定できるようにしました。今後はこちらで余白を設定していただけるとありがたいです。

簡単に貼り付けられる Code を表示


編集タブに表示されているシェアボタンを簡単に貼り付けられるコードを表示するようにしました。

Code 1: 1ページにつきひとつだけ貼ってください。

<script type="text/javascript" src="https://example.com/blog/wp-content/plugins/game-users-share-buttons/js/share-bundle.min.js"></script>

Code 2: シェアボタンを表示したい場所に貼ってください。

<div data-game-users-share-buttons="gameusers1-m2a4oi43"></div>

Code ボタンを押すとテキストエリアが開いて上記のようなコードが表示されます。記事の上部・下部以外に貼り付けたい場合は、テキストエリアに表示されているコードを利用してください。

貼り付けコードを変更しました


これは大きな変更なのですが、シェアボタンを貼り付けるためのコードを変更しました。

変更前

<div id="game-users-share-buttons" data-theme="gameusers1-olxdmwzh"></div>

変更後

<div data-game-users-share-buttons="gameusers1-olxdmwzh"></div>

HTML の仕様では、同じ id が複数存在しているのは間違いということを知り、修正を行いました。今後は id ではなく、data 属性を利用して、Game Users Share Buttons の表示を行います。

コードを貼り付けて利用している方がおられましたら、お手数ですがシェアボタンを再ダウンロードし、貼り付けコードの変更を行ってください。

Feedly のシェアが行えなくなっていた問題を修正


Feedly の仕様が変更されたようで、シェアが正常に行えなくなっていましたが、v.1.2.1 で修正を行いました。

リンク


WordPress 記事にソースコードを埋め込むテクニック&プラグイン紹介

WordPress 記事にコードを埋め込む

解説系の記事を書いていると、HTML のタグや、JavaScript、スタイルシートなどのソースコードを埋め込んで紹介したくなるときがあります。

この記事ではそんな時に使える、簡単にコードを貼れるタグ、ウェブサービス、おすすめのプラグインを紹介していきます。

簡単にコードを貼れるタグ


まずは簡単にコードを貼れるタグを紹介します。

HTML ではコードを貼る時に、<pre> タグを利用するのが一般的です。<pre></pre> に囲まれたコードは、スペースや改行などがそのまま表示されますので、コードを貼るときに便利です。

プラグインなどを使うまでもない、ちょっとしたコードを貼るときに利用してみてください。

<pre></pre>

<p>シンプルな状態</p>

なにも変更せずにシンプルな状態で <pre> タグを利用すると、上記のような表示になります。

 

<pre style=”color: #ffffff; background-color: #000000;”></pre>

<p>黒色の背景に白文字</p>

背景を黒くして白文字で内部を表示する <pre> タグです。強調されて文字も見やすくなります。プログラマーの方が運営されているブログの場合は、コマンドプロンプトのコマンドを紹介する際などに利用すると、わかりやすいのではないかと思います。

ただし長いコードを入力すると…

<p>abcdefghijklmnopqrstuvwxyz 0123456789 abcdefghijklmnopqrstuvwxyz 0123456789abcdefghijklmnopqrstuvwxyz 0123456789</p>

横向きのスクロールバーが表示され、スクロールしないと全文が見えなくなってしまいます。見にくい上に、コピーしてコードを利用してもらう場合に選択しづらいため、読者に余計な手間をかけることになってしまいます。

 

<pre style=”color: #ffffff; background-color: #000000; overflow: auto; white-space: pre-wrap; word-wrap: break-word;”></pre>

<p>abcdefghijklmnopqrstuvwxyz 0123456789 abcdefghijklmnopqrstuvwxyz 0123456789abcdefghijklmnopqrstuvwxyz 0123456789</p>

そこでおすすめしたいのが、この <pre> タグです。適当なところで自動で折り返すようになっていますので、選択がしやすくコピーも簡単です。このブログでもよく使っているタグなので、よければ使ってみてください。

黒背景が気に入らない場合は color: #ffffff; background-color: #000000; を削除して利用してください。

Gist – ウェブサービスを使う


コードを埋め込んで貼り付ける場合、これが一番おすすめの方法です。

ちょっとしたものだと、<pre> タグで十分なのですが、長いコードを貼りたいときは専用のサービスを利用すると、埋め込んだコードに色がついて綺麗に表示され、とても読みやすくなります。

プラグインに比べると少し手間はかかるのですが、プラグインをインストールしなくて済むので、WordPress が無駄に重たくならないというメリットもあります。

ここで紹介している Gist は GitHub が運営している、手軽に各種コードを管理できるウェブサービスです。

 

Gist でコードを貼り付けるとこんな感じになります

バージョン管理もできるので、過去のコードをチェックすることも可能です。コードを編集した後に、あれ、前のコードどんなだっけ?ということがなくなります。

Gist を利用するには、GitHub のアカウントが必要になります。アカウントの作り方から解説しますので、Gist を利用してみたい方は記事を参考にしながら試してみてください。

Gistの使い方


1. Gist のページに移動する

Gist: https://gist.github.com/

上記のサイトにアクセスして、Sign in と書かれているボタンを押してください。

 

2. 新規アカウント作成ページに移動する

Create an account. と書かれた部分を押して、アカウント作成ページに移動しましょう。GitHub のアカウントをすでに持っている方は、このページでログインしてください。

 

3. アカウントを作成する

Username: ユーザーネーム
This will be your username. You can add the name of your organization later.
翻訳:これはあなたのユーザー名になります。後で組織の名前を追加できます。

Email address: メールアドレス
We’ll occasionally send updates about your account to this inbox. We’ll never share your email address with anyone.
翻訳:この受信トレイにアカウントの更新情報を送信することがあります。あなたのメールアドレスは決して誰とも共有しません。

Password: パスワード
Use at least one lowercase letter, one numeral, and seven characters.
翻訳:少なくとも1つの小文字、1つの数字、および7つの文字を使用します。

入力したら Create an account ボタンを押しましょう。

 

4. Gist を利用する

アカウントを作成したらログインして、さきほどの Gist トップページに移動しましょう。画像のページが表示されたら、コードの説明文・ファイルネーム・埋め込みたいコードを入力しましょう。

ファイルネームは拡張子も一緒に入力してください。html の場合は .html、スタイルシートの場合は .css、JavaScript の場合は .js、こんな感じです。

入力し終わったら、Create public gist ボタンを押しましょう。これは公開用のコードを作成するボタンです。今回は WordPress で公開しますので、secret ではなく public を利用します。

 

5. 埋め込み用コードを取得する

コードが作成されると、このような画面になります。画像赤線の Embed と書かれた場所に、埋め込み用のコードがありますので、コピーして WordPress の投稿ページに貼り付けましょう。貼り付けるときは、テキストエディタで行ってください。ビジュアルエディタを利用すると正常に表示されません。

 

6. 完成!

スタイルシートのサンプルコードを埋め込んでみました。

 

7. 編集するときは?

コードが間違っていて編集したいときは、画像のページに移動して、Edit ボタンを押しましょう。編集用のフォームが表示されます。

Gist のページに移動するときは、埋め込みコードのファイル名のリンク(今回の場合は sample.css と書かれた部分)「sample.css hosted with ❤ by GitHub」を開いてください。

これまでに投稿したコードの一覧を見れたりもしますので、管理もしやすくなっておすすめです。英語のサイトでアカウントを作成するのは、若干ハードルが高く感じてしまうかもしれませんが、慣れてしまえば簡単なので、ぜひ試してみてください。

コード埋め込みプラグインの紹介


WordPress には、コードを埋め込むためのプラグインがたくさんあります。これらのプラグインを利用すると、最も簡単にコードを埋め込むことができるようになります。それぞれ見た目や使い勝手が違いますので、いろいろ試してみて気に入るものを見つけてください。

高機能なものから、シンプルで軽量なプラグインまで、さまざまなものが揃っています。コードを貼り付けたときのサンプル画像付きで、各プラグインを紹介しています。

最後に


それぞれの方法にメリット・デメリットがありますので、自分の使い方に合った方法を採用してください。

<pre> タグ
メリット:簡単に貼れる。
デメリット:色がつかないのでコードが長いと読みづらい。

Gist(ウェブサービス)
メリット:バージョン管理ができる。これまでに投稿したコードを一覧でチェックできる。
デメリット:アカウントを作らなければならない。<pre> タグやプラグインに比べると手間がかかる。

プラグイン
メリット:最も簡単にコードを貼れる。
デメリット:プラグインをインストールするので WordPress が重たくなる可能性がある。

WordPress ページID・記事ID・pidの取得方法

WordPress のプラグインを設定していると、pid という設定項目が出てくることがあります。これは ページ ID という各記事ごとに割り振られている固有の ID を入力する項目です。ページ ID は記事や固有ページを作成した際に自動で設定されます。

この記事ではページ ID の取得方法をスクリーンショット付きで解説していますので、必要な方は参考にしてください。

記事のページIDを取得する方法


1. 投稿一覧を表示する

ダッシュボード > 投稿 > 投稿一覧 に移動してください。そしてページ ID を取得したい記事のタイトルをクリック(タップ)しましょう。

 

2. ブラウザのアドレス欄をチェックする

ページを移動してからブラウザ上部のアドレス欄を確認すると、以下のような URL が表示されていると思います。

https://gameusers.org/dev/blog/wp-admin/post.php?post=1555&action=edit

赤文字の数字が記事のページ ID です。post= の後に数字が表示されていますので、それを取得して利用してください。

固定ページのページIDを取得する方法


1. 固定ページ一覧を表示する

ダッシュボード > 固定ページ > 固定ページ一覧 に移動してください。そしてページ ID を取得したい固定ページのタイトルをクリック(タップ)しましょう。

 

2. ブラウザのアドレス欄をチェックする

ページを移動してからブラウザ上部のアドレス欄を確認すると、以下のような URL が表示されていると思います。

https://gameusers.org/dev/blog/wp-admin/post.php?post=1108&action=edit

赤文字の数字が記事のページ ID です。post= の後に数字が表示されていますので、それを取得して利用してください。

ページID・記事ID・pid


読み方はそれぞれ違いますが、これらの設定項目が出てきたときは、上記の方法で ページID を取得して入力すれば OK です。

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 – 投稿日の代わりに更新日を表示する方法(日付操作)

なんてこった!昔の記事を編集して新しい情報を追加したのに、日付が古いまま。せっかく中身を更新したのに読者に新しい情報だと認識してもらえない。日付を見ただけでブログから人が離れていってしまうかも?

というわけで、投稿日の代わりに更新日を表示させましょう!

この記事では投稿日や更新日を表示したり非表示にしたりする方法を解説していきます。スタイルシートを用いて、とても簡単に表示・非表示を切り替えることができますので、更新日を表示させたい方は、ぜひ参考にしてみてください。

この方法が使えるテーマかどうかをチェックする


通常は日付を編集するには、子テーマを作成して PHP のファイルを編集するという難しい作業を行わなければなりませんが、スタイルシートを利用する場合は、とても簡単に更新日を表示させることができます。

ただし、どのテーマでもこの方法を使えるわけではありませんので、最初にこの方法が利用できるテーマなのかをチェックする必要があります。

 

1. ページのソースを表示する

まずあなたが運営しているブログをブラウザで開いてください。そして右クリックから ページのソースを表示 を選んでください。画像は Windows の Chrome でソースを表示する例です。違う環境の場合でも、ブラウザでソースを表示できますのでソースを表示する項目を探してみてください。

 

2. ページ内検索を行う

ずらっと文字が並んだページが表示されます。これがブログのソースです。ここでページ内検索を行います。

キーボードの Ctrl + F を押して、検索ウィンドウを出してください。違う環境では、ブラウザで ページ内検索 という項目を探すと同じことができます。

そして半角英字で time class と入力してみてください。画像のように、<time>タグがソース内に存在していると、このページで解説している方法で更新日を表示することができます。

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


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

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

WordPressに自作のCSS・JavaScript・HTMLを追加するには?

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

投稿日を更新日に入れ替える


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

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

 

2. スタイルシートを追加する

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

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

 

3. 更新日が表示されているかチェック

やりました!投稿日が消えて、代わりに更新日が表示されています。これで古い記事だと思われなくなりましたね。

投稿日には投稿日: 更新日には更新日: と表示する


上記の方法でもぜんぜん問題ないのですが、投稿日が表示されているのか、更新日が表示されているのかわからないため、なんの日付なのかを表示するようにします。

ダッシュボード > Custom CSS & JS > All Custom Code

さきほど追加したスタイルシートを編集します。画像のページに移動して、編集 と書かれた部分を押してください。そしてコードをすべて削除して、以下のコードを貼り付けてください。

貼り付け終わったら右側の 更新 ボタンを押しましょう。

 

投稿日

更新日&投稿者

投稿後、一度も更新されていない記事は 投稿日: が追加されて表示されます。更新されたことのある記事は、更新日: が追加されて表示され、投稿者との間に半角スラッシュ / が入ります。

投稿日と更新日を同時に表示する


上記ではどちらか一方だけ表示していましたが、両方表示したい場合は、以下のコードをさきほどのスタイルシートの代わりに貼り付けてください。

同時に表示

投稿日と更新日が同時に表示され、区切り文字として半角スラッシュ / が表示されています。

詳しく解説


解説したとおりに行っても、テーマによっては正常に表示されないことがあります。その場合、自分でスタイルシートを編集する必要があります。詳しく解説しますので、表示に問題のある部分が出てきた場合は、該当する部分を編集してみてください。

 

日付と投稿者を表すタグ

投稿日
<time class="entry-date published" datetime="2017-12-09T18:50:19+09:00">2017年12月9日</time>

更新日
<time class="updated" datetime="2017-12-30T19:07:21+09:00">2017年12月30日</time>

投稿者
<span class="byline"> 投稿者: <span class="author vcard"><a class="url fn n" href="https://gameusers.org/dev/blog/author/az1979/">あづみ</a></span>

デフォルトで存在しているテーマの Twenty Fifteen、Twenty Sixteen、Twenty Seventeen などは、投稿日・更新日の表示を<time>タグを利用して行っています。

通常は投稿日の日付だけが表示される設定になっており、更新日のタグも存在しているのですが、表示されない設定になっています。このページではその隠されているタグをスタイルシートで表示しています。

 

スタイルシートの解説

/* 投稿日の日付の前に文字列を追加する
   content: '' の中に文字を入れる */
article time.published:before {
  content: '';
}

/* 投稿日の日付の後に文字列を追加する
   content: '' の中に文字を入れる */
article time.published:after {
  content: '';
}

/* 更新日が存在する場合は、投稿日を非表示にする
   投稿日を常に表示したい場合は必要ありません */
article time.published:not(.updated) {
  display: none;
}

/* 隠されている更新日を表示する */
article time.updated:not(.published) {
  display: inline;
}

/* 更新日の日付の前に文字列を追加する
   content: '' の中に文字を入れる */
article time.updated:not(.published):before {
  content: '';
}

/* 更新日の日付の後に文字列を追加する
   content: '' の中に文字を入れる */
article time.updated:not(.published):after {
  content: '';
}

/* 投稿者の前に文字列を追加する
   content: '' の中に文字を入れる */
article .byline:before {
  content: '';
}

/* 投稿者の後に文字列を追加する
   content: '' の中に文字を入れる */
article .byline:after {
  content: '';
}

上記のスタイルシートを参考にしながら編集してみてください。更新日: という文字や、区切り文字の半角スラッシュ / は content: ” の中に文字を入れることによって実現しています。

例えば英語表記にしたい場合は、更新日: と書かれている部分を、Updated: などに変更すると英語表記になります。いろいろ文字を入力して、ブログに合う文字を探してみてください。

最後に


検索サイトは昔の記事もこまめにチェックして更新していると、評価が高くなるようなので、記事の内容が古くなっている場合は定期的に見直してみましょう。

更新した日付が表示されていると、検索サイトに対してだけでなく、ブログにアクセスしてくれた読者に対しても、新しい情報であることを示せるのでメリットが非常に大きいです。

スタイルシートの解説を見ると難しそうに感じてしまうかもしれませんが、やることはコピペして、content: ” の中身を書き換えるくらいなので、一度やってみれば簡単だと思えるはずです。

更新日の表示はブログにとって結構重要な要素なので、記事を参考にしながら、頑張って設定してみてください。