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のアイキャッチ画像とは?おすすめのサイズも紹介

アイキャッチ画像とは各記事の看板画像のことです。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 でバズる(拡散される)ことを目指してシェアボタンの設置も忘れずに!

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

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

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

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

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


通常は日付を編集するには、子テーマを作成して 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 が使えるようになります。

最後に


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

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

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