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: ” の中身を書き換えるくらいなので、一度やってみれば簡単だと思えるはずです。

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

WordPressの記事の一部を折りたたんで表示する方法 – ネタバレ防止

WordPress の記事を書いていて、ここの説明長くなっちゃうから折りたたんで必要な人だけに表示したいな、と思うことありませんか?

このブログは解説系のブログなので、慣れている人には必要ないけど、初心者の人に向けた情報などを掲載したいときに、記事の一部を折りたたんで表示しています。

初心者用の情報を掲載。

 

みなさんどこかで一度は見たことがあると思いますが、「もっと読む」「続きを読む」と書かれたリンクが同じタイプの機能になります。今回はそれを記事のどこにでも好きなように設置できるようになる方法を解説していきます。

続きを読むボタンなんていらない!という方もおられると思いますが、これはいろんなことに使えるテクニックなので、ぜひ自分なりに使用方法を考えてみてください。

例えばこんなふうにも使えますよ。なにかネタバレを含む記事を書いた時にネタバレを読みたくない人のために、クリックしないと見られない記事を載せておくと、読者に対して親切なブログだと感じてもらえるのではないでしょうか。

なんとラスボスは●●だった!こんな感じで、本・映画・ゲームなどのネタバレ防止に使えます。

最初の準備


スタイルシートと JavaScript を利用してこの機能を実現します。コードをコピペするだけで簡単に利用できるように解説していますので、まずは Simple Custom CSS and JS というプラグインをインストールしてください。インストールしたことがない方は、以下のページを参考にインストールしてみてください。

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

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


ダッシュボード > Custom CSS & JS > Add Custom CSS を選んでください。スタイルシートを追加するページに移動します。

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


タイトルのフォームに Slide Contents CSS と入力し、下のコードを入力するフォームの /* */ 赤文字で囲まれた英文をすべて削除してから、以下のコードを貼り付けて 公開 ボタンを押してください。

これは隠されている部分のデザインを決めるスタイルシートです。デザインが気に入らない方はこのスタイルシートを編集してください。編集する場合は display: none; この記述だけは消さないようにしてください。これは最初に非表示にしておくという指定です。

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


続いて ダッシュボード > Custom CSS & JS > Add Custom JS を選んで、JavaScript を追加するページに移動します。

4. JavaScriptを貼り付ける


さきほどのスタイルシートと同じ手順で、タイトルを Slide Contents JS にして、以下のコードを貼り付けて 公開 ボタンを押してください。

slideToggle(400); と書かれている部分を見てください。これは隠されている部分を表示する(非表示にする)速度を表しています。もっと速く表示したい場合は数字を 400 未満に設定してください。例えば 100 を設定すると、0.1 秒で表示が行われます。逆に大きな数字を設定すると、ゆっくりと表示が行われます。1000 を設定した場合は 1 秒かけて表示が行われます。半角数字で好みの速度を設定してください。

5. 記事にHTMLのタグを追加する


記事の新規追加ページ、または編集ページを開いて、以下の HTMLタグをテキストエディタで貼り付けてください。ビジュアルエディタでは機能しませんので、必ずテキストエディタを開いてください。

貼り付け終わったら プレビュー ボタンを押してチェックしてみましょう。

6. プレビュー


スライドリンク

テストコメント

記事をプレビューすると、このような表示になっています。ボタンとリンクのそれぞれで表示・非表示の切り替えが行えます。

7. 重要なポイント


HTMLタグは、折りたたむ部分ごとに文字を変えなければならないところがあります。以下のコードの赤文字部分を見てください。

<button data-slide-contents="slide-contents-1">スライドボタン</button>
<div id="slide-contents-1" class="slide-contents">
テストコメント
</div>

ボタンを利用する場合は、<button>タグの赤文字部分と、<div>タグの赤文字部分を同じ文字列にしてください。

 

<a href="#" data-slide-contents="slide-contents-1">スライドリンク</a>
<div id="slide-contents-1" class="slide-contents">
テストコメント
</div>

リンクを利用する場合は、<a>タグの赤文字部分と、<div>タグの赤文字部分を同じ文字列にしてください。

この文字は半角英数字で折りたたむ場所ごとに違う文字列を指定する必要があります。記事が変わったからといって、同じ文字列を使わないようにしてください。同じ文字列がブログ内に存在する場合は、正常に動作しなくなりますので、必ず折りたたむ場所ごとに、被らない唯一の文字列を設定するようにしてください。

後は スライドボタン / スライドリンクテストコメント と書かれている部分をそれぞれ好きな文字に書き換えてみてください。扱い方がわかると思います。

最後に


「おっ!このブログ、ギミックがあって面白いな」と思わせられるテクニックなので使ってみて損はないですよ。

長い解説を折りたたむ時や、ネタバレ防止以外でも使えると思うので、ぜひいろいろなシーンで活用してみてください。

WordPressのパーマリンクおすすめ設定

WordPress を設置したらまず最初にやっておきたい、パーマリンクの設定について説明していきます。これだけやっておけば間違いない!というおすすめ設定を紹介しますので、ぜひ参考にしてください。

パーマリンクってなに?


パーマリンク、あまり聞き慣れないワードだと思いますが、WordPress 上では各記事の URL を表します。

ブログトップのURL
https://gameusers.org/dev/blog/

パーマリンク:各記事のURL
https://gameusers.org/dev/blog/game-users-share-buttons/
https://gameusers.org/dev/blog/three-rules/

WordPress のダッシュボード > 設定 > パーマリンク設定で、記事の URL の設定を行うことが可能です。

パーマリンクおすすめ設定


長々と記事を読みたくない方のために、結論からお伝えすると以下の設定を選んでおけば間違いありません。

投稿名  https://gameusers.org/dev/blog/sample-post/

そして記事の投稿時にパーマリンクを半角英数字で設定してください。各単語の区切りは – (半角ハイフン)で行いましょう。

これが SEO(検索サイト) 的にも、将来的な記事管理の上でも、無難で扱いやすい選択です。

 実はこのブログ、過去にパーマリンクの設定に失敗して後悔しました


WordPress を導入してこのブログを始めたときに、あるブログの記事を参考にして、パーマリンクの設定を行いました。そのブログの記事にはパーマリンクにカテゴリー名を含めようと書かれていたので、それをそのまま参考にさせてもらって WordPress を運営していました。

過去のパーマリンク設定

しかしブログの記事が増えていくに従って「あれ、この設定失敗したかな…。」と後悔するようになりました。

記事のカテゴリーを変えたい!

ある時からそう思うようになったのです。WordPress ではカテゴリーを設定でき、記事を分類することができます。当初、このブログはプログラム関係の話題しかなかったのですが、WordPress のプラグインを開発してから、WordPress についての記事も掲載したくなりました。

そこで「ブログ」という新たなカテゴリーを追加し、その中に「WordPress」「WordPressプラグイン」などのサブカテゴリーを作りました。そしてこれまでに書いた記事をその中に仕分けしていくことになったのです。

でもパーマリンクの設定でカテゴリー名を URL に含めてしまっていたので、それを行うと、各記事の URL も変わってしまうことになりました。

パーマリンクの設定を変えると何が起こるのか?


  1. 記事の URL が変わる
  2. SNS のシェア数がリセットされる
  3. 検索サイトからの評価が下がる

1. 記事の URL が変わると、URL を貼ってくれていた他のサイトのリンクがリンク切れになってしまいます。せっかく記事を面白いと思ってリンクを貼ってくれていたのに貼り直しをしてもらうことになり、ご迷惑をかけることになってしまいます。

2. これもダメージが大きいのですが、SNSのシェア数が 0 に戻ります。SNS のシェアは URL ごとに行われているので、その URL が変わってしまうと、新たなページとして認識され、これまでカウントされていたシェア数は無効化されます。

3. 検索サイトはブログのクロールを行って各記事の URL を保持していますが、それも再度やりなおしになります。SEO 的にもマイナスに働くことはあってもプラスに働くことはありません。

WordPress は過去の URL から新しい URL へ自動で飛ばしてくれる(リダイレクトされる)ので、ブラウザでアクセスした人がページを見つけられなくなることはありません。しかしこれだけのマイナス要素がサイトに降りかかるので、パーマリンクの設定だけはしっかり行っていた方がいいです。

WordPress を導入してすぐの方は、今後のことも考えながら間違いのない設定を行いましょう。またすでに WordPress でブログを運営されている方で、パーマリンクの設定が気に入っていない方は、できるだけ早く手を打った方がいいと思います。傷が浅いうちに設定を見直しましょう!

 どんなURLがベストなのか


  1. できるだけ短いURL
  2. 人間が内容を予測しやすいURL
  3. 日本語ではなく、英数字を使ったURL
  4. 単語の区切りを _ ではなく – で行っているURL

パーマリンクを設定する上で意識した方がいい、4つの項目を挙げてみます。

1. できるだけ短いURL


一般的なウェブサイトの構成を考えてみてください。トップページがあって、その下に各ページがあってという構成になりますよね。

トップページ
https://www.example.com/

記事のページ
https://www.example.com/page1
https://www.example.com/page2
https://www.example.com/page3

通常はこういう構成でウェブサイトが成り立っていると思います。ここで考えてみて欲しいのですが、基本的に URL が短い方が重要なページである確率が高いと思いませんか?トップページは URL が一番短く、重要なページはその次くらいの短さになっています。

この法則に従うと、URL は無駄に長くないほうが重要なページであると認識されやすくなります。また単純に URL が長いと、リンクを貼った時に見栄えもよくなかったりします。ですので、パーマリンクを設定するときは、あまり階層が深くならないようにした方がいいのです。

◎ 投稿名  https://gameusers.org/dev/blog/sample-post/

パーマリンクの設定で、投稿名を選択することをおすすめしているのは、階層が深くならず、記事の URL が短くなるからです。

2. 人間が内容を予測しやすいURL


以下の URL が表示されているとした場合、どちらをクリックをしたくなりますか?

  1. https://www.example.com/page1
  2. https://www.example.com/wordpress-setting

ただの URL ですが、2はなんの内容について書かれているのか予測しやすいので、WordPress を利用されている方はこちらに興味を持ちやすいのではないでしょうか。

サイトの URL 構造はできる限りシンプルにします。論理的かつ人間が理解できる方法で(可能な場合は ID ではなく意味のある単語を使用して)URL を構成できるよう、コンテンツを分類します。たとえば、航空機(aviation)に関する情報を探している場合、http://en.wikipedia.org/wiki/Aviation のような URL であれば、見ただけで必要な情報であるかどうかを判断できます。http://www.example.com/index.php?id_sezione=360&sid=3a5ebc944f41daa6f849f730f1 のような URL 自体は、ユーザーの関心を引くことはほとんどありません。

引用: シンプルな URL 構造を維持する – Search Console ヘルプ

Google も推奨していますので、それにならった形でパーマリンクを設定するように心がけましょう。

3. 日本語ではなく、英数字を使ったURL


画像は記事を新規投稿する際のフォームです。赤線の場所で各記事のパーマリンクを設定できますが、日本語のタイトルを入力すると、タイトルがそのままパーマリンクの URL として利用されます。

この設定で投稿した場合の記事のURL
https://gameusers.org/dev/blog/wordpress%E3%81%AE%E3%83%91%E3%83%BC%E3%83%9E%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E8%A8%AD%E5%AE%9A/

日本語は URL として使用できないので、URL エンコードという処理がかけられて URL に変換されます。そのため意味不明な文字列に変換されて、こんなに長い URL になってしまうのです。

ちょっと長すぎますよね。例えば掲示板で記事の URL を紹介してくれた方がいたとして、これだとなんだか怪しいサイトに見えてしまいます。

URL は短い方がいいのでパーマリンクの設定は、短めの英数字で表現するようにしましょう。

ちなみにこの記事の URL はこうなっています。WordPress のパーマリンク設定ページの URL を参考にさせてもらいました。シンプルな英単語で記事の内容が予測しやすい URL になっています。

パーマリンク設定ページ

https://gameusers.org/dev/blog/wp-admin/options-permalink.php

この記事のURL

https://gameusers.org/dev/blog/wordpress-options-permalink/

4. 単語の区切りを _ ではなく – で行っているURL


みなさん URL の単語の区切り記号はなにを使っていますか?_(アンダーバーまたはアンダースコア)  -(ハイフン)このどちらからを使っている方が多いのではないでしょうか。

なぜ -(ハイフン)を勧めているのか。これは単純に Google がハイフンの使用を推奨しているからです。

URL では区切り記号を使うと効果的です。http://www.example.com/green-dress.html という URL の方が、http://www.example.com/greendress.html という URL よりずっとわかりやすくなります。URL にはアンダースコア(_)ではなくハイフン(-)を使用することをおすすめします。

引用: シンプルな URL 構造を維持する – Search Console ヘルプ

さきほどと同じページからの引用になりますが、Google がこう言っていますので、検索サイトのおすすめに従ってパーマリンクを設定していきましょう。

最後に


パーマリンクの設定は本当に重要です!

URL はコロコロと変えるものではないので、しっかりと考えて設定を行ってください。いい加減に設定すると、このブログのように後で泣きを見ることになります。

このブログがかつてパーマリンクにカテゴリー名を含めていた件ですが、最初は後で変えることなんてないと思っていました。しかし人間の考えや気持ちは変わるものです。違ったジャンルの記事を書きたくなったり、記事が増えるとサブカテゴリーを用意したくなったりするのは、仕方のない成り行きなのかもしれません。

今、分類しているカテゴリーも時間が経つと、きっと違うものになっていると思いますので、みなさんも気まぐれに影響されるようなパーマリンクを設定するのはやめておきましょう。自分のように失敗する人が増えないように、下から目線のアドバイスをさせてください。

WordPress – Webフォントの使い方

綺麗なフォント、おしゃれなフォント、面白いフォントを使いたい!でも OS に備え付けられているフォントにはいいものがない。そういった方におすすめしたいのが Webフォントです。Webフォントは日々、世界中で新しいものがデザインされており、有名なフォントサイトのものを軽く数えるだけでも、数百、数千に達します。

この記事では、外国製の英数字 Webフォントから日本製の日本語 Webフォントまで、WordPress での使い方を詳しく解説していきますので、ぜひ参考にしてください。

実はこのブログでも Webフォントを使わせてもらっています。サイドバーに今週の人気記事ランキングという欄がありますが、そこの No.1 と書かれているランキングの数字部分を Webフォントで表示しています。カッコイイフォントなので、ブログのイメージアップに大きく貢献してくれているのではないでしょうか。

今週の人気記事ランキング

こんな感じでちょっとしたポイントに使う方法や、WordPress の記事に使われているフォントを Webフォントに置き換える方法なども解説していきます。

WordPress で Webフォントを使うために


WordPress で Webフォントを使うには、HTML タグを挿入しなければなりません。そのために Simple Custom CSS and JS というプラグインを利用します。インストールしたことがない方は、以下のページを参考にインストールしてみてください。

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

Webフォントの使い方


1. Google Fonts を使ってみよう!

Webフォントで最も有名な Google Fonts を試しに利用してみましょう。800 を超えるフォントがあり、さまざまなデザインのものが揃っています。

Google Fonts

上記サイトにアクセスしてみてください。画像のページが表示されると思います。

 

2. 使用するフォントを選択する

今回は例として Bangers というフォントを使用してみます。なんでもいいので、気に入ったフォントを選択して右上の + ボタンを押してみてください。

 

3. <link> タグをコピーする

+ ボタンを押すと、ページの下の方に 1 Family Selected と書かれた黒い帯が表示されますので、そこを押してみましょう。そして赤線部分のコードを選択してコピーしてください。

 

4. <link> タグを貼り付ける

WordPress のダッシュボード > Custom CSS & JS > Add Custom HTML を選択して、画像のページに移動してください。タイトルに Web Fonts と入力し、下のフォームの <!– –> で囲まれた赤文字の英文をすべて削除してから、さきほどの <link> タグを貼り付けます。そして右側にある 公開 ボタンを押しましょう。

これで選択した Webフォントが WordPress 内に読み込まれます。

 

5. 記事内で Webフォントを利用してみる

新しく記事を作成する、既存の記事を編集する、どちらでもいいので記事投稿ページに移動してください。そしてそこでテキストエディタを開きましょう。開いたら以下のコードを入力してください。

<p style="">Yeahhhh!!</p>

 

次に Google Fonts のページに戻って、画像赤線のタグをコピーしてから style=”” の中に貼り付けてください。

 

<p style="font-family: 'Bangers', cursive;">Yeahhhh!!</p>

上記のようなコードになったら記事を公開して Webフォントが適用されているかチェックしてみましょう。プレビューでも構いません。

 

6. Webフォントが適用されました

記事をチェックすると Webフォントが適用されているのがわかると思います。フォント:Bangers は漫画の擬音文字みたいでなかなかカッコイイですね!

※ 画像ではわかりやすくするために、フォントのサイズを大きくしています。

こんな感じで、style=”” の中に、font-family:~; をコピーすると、その部分だけ Webフォントが適用されて表示されます。

Google Fonts の場合は英数字だけになってしまいますが、強調したい部分に Webフォントを適用してみると、記事のアクセントになって面白いと思いますよ。

WordPress で日本語 Webフォントを使う方法


Google Fonts では日本語の Webフォントも試験的に提供してくれています。日本語はアルファベットと違い、ひらがな、カタカナ、漢字に対応しなければならないため、まだまだフォント数は少ないのですが、面白いフォントが揃っています。

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access

上記サイトにアクセスしてみてください。個性のあるフォントが用意されていると思いませんか?

 

1. <link> タグをコピーする

今回は例として、ニクキュウという変わったフォントを WordPress で使ってみます。HTML と書かれた部分にある <link> タグをコピーしましょう。画像赤線の部分です。

<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />

このタグをさきほど追加した HTMLタグの Web Fonts に貼り付けてみましょう。

 

2. Web Fonts を編集する

ダッシュボード > Custom CSS & JS > All Custom Code を押して、このページに移動したら、Web Fonts 欄にある 編集 ボタンを押しましょう。

 

3. <link> タグを貼り付ける

通常の Google Fonts のコードの下に、日本語 Webフォントの <link> タグを貼り付けてください。そして右側にある 更新 ボタンを押しましょう。

これで 日本語 Webフォントが WordPress に読み込まれます。

 

4. スタイルシートを追加して Webフォントを適用する

ダッシュボード > Custom CSS & JS > Add Custom CSS から画像のページに移動してください。このページでスタイルシートを追加します。

タイトルに Font と入力し、下のフォームで /* */ に囲われた赤文字の英文をすべて削除してから、以下のコードを貼り付けてください。

body {
  font-family: , sans-serif !important;
}

 

そして Google Fonts のページに戻り、画像赤線の部分に書かれている、””に囲まれたフォント名を選択してコピーしてください。

今回の例の場合は “Nikukyu” になります。

次はそのフォント名をこのように貼り付けます。フォント名の後には , (半角のコンマ)が必要です。

body {
  font-family: "Nikukyu", sans-serif !important;
}

貼り付けられたらフォーム右側にある 公開 ボタンを押してください。これで Webフォントが WordPress に適用されます。

 

5. 記事で確認してみましょう!

完成!ニクキュウはカタカナだけのフォントなので漢字と混じり合って、なにが書いてあるのかパッと見ではわからない暗号のような文章になりました。

ここまで個性的にする必要はないと思いますが、Webフォントを使えば、他とはちょっと違った雰囲気のブログにすることも可能です。日本語の Google Fonts にはいくつかフォントが用意されていますので、いろいろ試してみてください。

Webフォントを使う際の注意点


Webフォントを利用する場合、大量にフォントを読み込むのはやめましょう。1~3つくらいが限度だと思います。それ以上読み込むと、ブログ全体が重たくなってしまうので、必要なフォントを絞って利用するように心がけてください。

フォントの変更についてはこちらの記事でも解説しています。フォント変更時に利用するスタイルシートについてもっと詳しく知りたい方は、以下のページを参考にしてください。

WordPressのフォントを変更して印象をガラッと変えてみよう

WordPressのフォントを変更して印象をガラッと変えてみよう

WordPress の見た目を変えるときに、まず思いつくのはテーマの変更ですが、その次にはなにが思い浮かびますか?

特にこれといったものは思い浮かばないですよね。

そこでおすすめしたいのがフォントの変更です。フォントを変えるとブログの印象もガラッと変わります。WordPress のフォントについて詳しく書かれている記事はあまり見たことがないと思いますので、今回は WordPress のフォントについての情報を集めてみました。

フォントを変更するために


通常は ダッシュボード > 外観 > テーマの編集 で、style.css を編集することでフォントを変えることができますが、この方法はテーマに依存してしまう上に、間違った部分を変更してしまうとブログのデザインに影響を与えてしまうことがあります。

子テーマを用意して編集を行うと安全ですが、どうにもめんどくさい!というわけでこの記事ではテーマに依存せず、独自の CSS を追加する形で、簡単にフォントの変更が行える方法を紹介します。

Simple Custom CSS and JS というプラグインを利用しますので、インストールしたことがない方は、以下のページを参考にインストールしてみてください。

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

フォントを変更する


1. フォントを変更してみよう

Simple Custom CSS and JS をインストールしたら、ダッシュボード > Custom CSS & JS > Add Custom CSS を選んでください。

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

そして右側にある 公開 ボタンを押すと、ブログのフォントが変更されます。これは WordPress のフォントを 游ゴシック というフォントに変更して、文章の行間を広げるスタイルシートです。

 

デフォルトのフォント

遊ゴシック

他のフォントに変更してみよう!


1. さきほど入力した CSS を編集する

ダッシュボード > Custom CSS & JS > All Custom Code で、Font 欄の 編集 を押してください。

 

2. フォントを変更する

フォームが再度表示されますので、’游ゴシック’, ‘Yu Gothic’, を削除して、’MS UI Gothic’ を代わりに入力してみましょう。

 

MS UI Gothic

また違ったフォントになりましたね。こんな感じで変更したいフォントに変えることが出来ます。フォントは以下のサイトからピックアップしてください。

font-familyで指定できるフォント名一覧

フォントを指定するときのコツ


フォントはどの環境でも同じものが表示されるというわけではありません。Windows と Mac それぞれでしか表示できないフォント、iOS と Android のスマホでも違いがあるので、アクセスする人によってブログのフォント表示が変わることはよくあります。

Windows と Mac の両方に対応しているフォントもあるのですが、同じフォントなのに名前が変わっていたりするので、それぞれの名前を指定しなければならなかったりします。

例えばメイリオというフォントですが、’メイリオ’, Meiryo, この2つを記述しなければなりません。片方だけだと、どちらか片方の環境でしか表示されなくなります。

フォントはそれぞれの環境で独自に発展しているので、すべての環境で文字を綺麗に表示したい場合はちょっとした知識が必要になります。

font-family というワードで検索サイトを調べてみてください。詳しい方がおすすめのフォント指定法を掲載してくれています。

このブログのフォント指定


このブログでは現在、以下のようなフォント指定になっています。

body {
  font-family: -apple-system, BlinkMacSystemFont, 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif !important;
}
.entry-content p {
  line-height: 1.8em;
}

-apple-system, BlinkMacSystemFont, は Apple の純正フォント San Francisco が表示される設定で Mac や iOS 環境でアクセスした場合は、優先的にそれを表示してくださいと指定しています。font-family は先に記述したフォントが優先で表示されます。

そして ‘メイリオ’, Meiryo, ‘ヒラギノ角ゴ ProN W3’, ‘Hiragino Kaku Gothic ProN’, これらは Windows と Mac の環境で人気のあるフォントで、とりあえず綺麗に表示するための無難なフォント指定といえます。

sans-serif これは最後の砦のようなフォントで、先に指定したどのフォントもない場合は sans-serif (ゴシック体)をとりあえず表示してくださいという表記です。必ず最後に載せておきましょう。

!important WordPress でフォントを指定するときに重要になるのが、この表記です。他のスタイルシートよりも、このスタイルシートのフォント指定を優先してくださいという指定になります。強引にこれを使って!と勧めているような感じですね。

.entry-content これは WordPress の記事に使われているスタイルシートのクラス名です。その後に p と書かれていますが、これは <p> タグを表しています。WordPress では文字を表示するときに <p> タグで囲んで表示します。よってこの表記は、記事内の <p> タグだけにスタイルシートを当ててくださいという意味になります。

line-height: 1.8em; これは文章の行間を設定する記述で、この数字が大きいほど行間が広くなります。16px こんな風にピクセルでも指定できます。数字を変えながら適切な行間を見つけてください。

とりあえず上のコードをコピペして、他に気に入ったフォントが見つかったら、font-family の前の方に追加していく方法が簡単だと思います。

最後に


フォントはもちろん行間を調整するだけでも、ガラッと印象が変わりますので、ぜひ試してみてくださいね。

どの環境でも同じフォントを表示したい場合は、Webフォントを使うという選択肢もあります。こちらのページで詳しく解説していますので参考にしてください。

WordPress – Webフォントの使い方

WordPressのリスト(箇条書き)をCSSで綺麗に表示しよう!

WordPress で記事を書いていると箇条書きで表現したい項目が出てきます。この時に利用できるのがリストです。投稿ページのビジュアルエディタで、番号なしリスト番号付きリストを選ぶと画像のようなリストを入力することができるようになります。

ビジュアルエディタ

テーマによって若干表示は変わりますが、なんかオシャレじゃないですよね。記事の中で強調したい部分なのにすごく地味というか。

この記事では CSS を利用して WordPress のリストを綺麗にする方法を紹介しますので、ぜひみなさんのブログでも試してみてください。

ちなみにこのブログではこんな感じになっています。爽やかなデザインでなかなかいいと思いませんか?

スタイルシートを追加するために


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

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

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

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

CSS で綺麗にする方法


1. スタイルシートを入力するフォームを開く

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

 

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

画像赤線のフォームにスタイルシートのタイトルを入力します。この例では Stylish List というタイトルにします。これは自分が管理するためのタイトルなのでなんでも構いません。覚えやすいタイトルを入力しましょう。

 

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

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

 

すごく長いですが、これはこのブログで使っているリストのスタイルシートです。スタイルシートを貼り付けた後、右側にある 公開 ボタンを押すと、あなたのブログで使っているリストのデザインが変更されます。

 

4. とりあえず完成!

ブログの記事内にリストを入力してみてください。このような表示になっていたらデザインの変更は成功です。

もっと他のデザインはないの?


すごくたくさんのリスト用スタイルシートを提供してくれているサイトがあるので、それを使わせてもらいましょう!実はこのブログで使っている青いデザインのリストも、以下のサイトのスタイルシートを使わせてもらっています。

上記のサイトにアクセスしてみてください。綺麗なリストが画像付きで紹介されています。自分のブログで使ってみたいと思うデザインがあったら、さきほど作成したスタイルシートを編集して貼り付けてみましょう。

 

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

画像のページに移動したらさきほど作成したスタイルシートの欄にある 編集 と書かれた部分を押してください。入力フォームが出てきますので、現在入力されているコードをすべて削除して、気に入ったリストの CSS を代わりに貼り付けてください。

 

WordPress でリストのスタイルシートを利用するコツ

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
  border: solid 1px #F6A38B;
}

ol.sample1 li{
  position:relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  font-weight: bold;
  font-size:14px;
}

ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

例えばこのスタイルシートを WordPress で利用する場合、そのまま貼っても使えません。以下のように編集する必要があります。

 

.entry-content ol{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
  border: solid 1px #F6A38B;
}

.entry-content ol li{
  position:relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  font-weight: bold;
  font-size:14px;
}

.entry-content ol li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

一番最初に .entry-content を追加して、ol.sample1.sample1 を削除しました。.entry-content というのは、WordPress の記事に使われるスタイルシートのクラス名で、その内部にある <ol> タグのデザインを変更するという意味になります。

.entry-content を追加しないと、テーマに使われているリストのデザインも一緒に変更されてしまうので、ブログのデザインが崩れてしまうことがあります。

また .sample1 を削除したのは、これがついているとスタイルシートを適用するときに、毎回 <ol class=”sample1″> という書き方をしなければならないためです。リストを表示する度にテキストエディタでそのコードを入力するのは大変なので、スタイルシートのクラス名は削除しています。

この説明はスタイルシートの知識がないと、ちょっと難しいかもしれませんね。とりあえず最初に .entry-content を追加して、.sample1 と書かれている部分を削除すると覚えていてください。これを行うだけで、WordPress で 上記サイトの CSS が使えるようになります。

最後に


リストのデザインはうまく変更できましたか?

リストのデザインを変更しておくと、リストがアクセントになって記事が華やかに見えるので、これはできるだけやっておきたいテクニックです。

もしどうしてもわからないことがあったらコメント欄で聞いてください。自分にわかることならお答えします!