今回はWordPress（ワードプレス）を使っている初心者の方向けに、プラグイン無しでブログカードを設置する方法について紹介します。
内部リンクを貼るときには「テキストリンク」や「画像リンク」を使うのが一般的です。
ブログカードは画像・テキスト両方を使ってリンクを貼れるのでクリック率に効果的だったりします。分かりやすいですしね。
プラグイン無しでブログカードを設置するには「functions.php」と「style.css」をいじる必要があります。
ここで「難しそうだし怖いからやめておこう」と思ってしまう初心者の方は多いかなと。
そこでこの記事では安全に設置する方法とカスタマイズ方法をメインに書いていきます。
はてなブログならリンク挿入機能でブログカードが簡単に設置できますがワードプレスだとその機能がありません。
ぜひご参考ください。
スポンサーリンク
目次
ブログカードとは？
まずはブログカードを知らない方向けに簡単に説明を。
ブログカードとはブログ内にリンクを貼る方法のひとつです。一般的なテキストリンク・画像リンクと比べてみるとこんな感じになります。
同じページへのリンクで比較してみました。
テキストリンク
Photoshopのオンライン講座おすすめ３選！【初心者からWebデザイナーになるため】
一番多く使われているのがこのタイプ。文字をそのままリンクにするかたちです。
画像リンク
こちらは画像自体にリンクを貼るタイプですね。広告などでよく使われます。
ブログカード
こちらが今回紹介するブログカードです。画像と文字を使ってリンク先のページがイメージしやすいのがメリット。
クリックのハードルも下がる感じで実際クリック率は上がりやすいです。
また設置もショートコードを使っているので簡単に設置できます。
例に挙げたリンクの場合、設置したい場所に［nlink url=”https://toomolife.com/howto20/”］と記述するだけ。※［］はここでは全角にしています。
全部のリンクをブログカードにしたほうが良いというわけではないんですが、文字の強調と一緒でここぞというリンクに使うと効果的です。
プラグイン「Pz-LinkCard」を使うのが一般的だけどそれをしなかった理由
ワードプレスでブログカードを実装する場合、プラグインの「Pz-LinkCard」を使うのが一般的です。
僕も最初の頃少し使っていたのですが、以下の理由で使うのをやめてしまいました。
■カスタマイズしても表示がイマイチ気に入らなかった
■ページが重くなるのが嫌だった
Pz-LinkCardはカスタマイズすれば表示デザインを変えられるんですが、結局あれこれいじってみてもイマイチ気に入らなかったんですよね。
まあそこは自分が妥協すればいいのかもしれませんが。
ただもう一つの理由が大きくて、ページが重くなるというのは読者さんのストレスになるのでこれは妥協できないかなと。
絶対重くなるのかは分かりませんが、他のブロガーさんたちもけっこう重いと書いている記事が多いです。
プラグインなしでのブログカード設置とカスタマイズ方法
ここから本題です。
プラグインなしでブログカードを設置するには子テーマの次のファイルを使います。（必ず子テーマを更新しましょう）
functions.php
style.css
「functions.phpいじるのか～」と尻込みしてしまうかもですがコピペするだけなので簡単です。style.cssも同様。
functions.phpをいじる際の注意点
まずはfunctions.phpをいじる際の注意点について。ここで紹介するポイントを押さえておけば安全に作業することができます。
functions.phpは記述の際にミスをしたりするとブログのページやワードプレスの管理画面が真っ白になっちゃう場合があるんです。
けっこう初心者の方にはあるあるかなと。
万一そうなってしまった場合でも元に戻せるように次の２点を確認してください。
１、元の状態をバックアップしておく
２、FTPもしくはサーバーから編集できるようにしておく
まずバックアップを必ずとっておきましょう。記述してバグってしまった際に記述前に戻せるようにするためです。
次にFTPもしくはサーバーからfunctions.phpを編集できるようにしておきます。
「なんだか難しそう・・」って思うかもですが今回に限らずこれ知っておくの重要です。
初心者の方でもやり易いのはサーバーから直接編集する方法です。
こちらの記事が簡単なので実際にサーバーから編集できる状態まで進めてみて確認してみてください。
この２点だけ押さえておけば大丈夫です。
プラグイン無しでブログカードを設置する方法
設置方法についてはこちらの記事がめちゃめちゃ分かりやすいのでまずはこちらを読んでやってみてください。
紹介した記事で設置はできても恐らく初心者の方はカスタマイズ方法が分かりにくいと思いますので、僕の記事ではつまずきそうなポイントを補足していきますね。
ブログカードのカスタマイズ方法
どうでしょう？設置できましたか？
コピペした状態で設置してプレビューをみてみるとまだイメージ通りではないと思います。それではイメージ通りにカスタマイズする方法をみていきましょう。
リンクカードを横幅いっぱいに拡げる
コピペした状態だとリンクカードの左右に隙間が出ています。style.cssの下の部分で上下左右に30ピクセルのマージン（余白）が指定されているためです。
オレンジ枠の部分を削除すれば左右の余白がなくなり幅いっぱいにブログカードが拡がります。
境界線の色と太さを変更する
ブログカードの境界線（囲んでいる線）の色と太さを変更する方法です。
style.cssの下の部分がそれぞれ色と太さを指定している箇所になります。ここを希望する色・太さの数値に変更しましょう。
タイトル部分のテキスト装飾を変更する
タイトル部分のテキスト装飾の変更方法です。タイトル部分とは下の画像のオレンジ枠の文字のことですね。
まずはテキストの色の変更方法です。style.cssの下の部分を希望する色の数値に変更して下さい。
テキストのサイズや太さはstyle.cssの下の部分から変更できます。
サイズは「120％」の数値を変更するか、「small」、「medium」、「large」などのキーワードでも指定できます。
太さは「bold」になっているところを「normal」にしたり、数値でも指定できます。
説明部分のテキスト装飾を変更する
説明部分のテキストとは下記の部分のことです。
ここのテキストはstyle.cssの下の部分で変更できます。
文字のサイズや太さを変更した場合は、「font-size:small;」や「font-weight: normal;」など追記しましょう。
【説明部分のテキストが表示されていない場合・・】
この部分はワードプレスの「抜粋」に入力した文字が表示されるようになっています。抜粋部分の入力がないと表示されません。
抜粋への入力・表示は下記のようにおこなうことができます。
１、日本語版WordPressに最初から含まれているプラグイン「WP Multibyte Patch」を有効化します。（すでに有効化ならOK）
２、ワードプレス管理画面の最上部にある「表示オプション」を開き「抜粋」にチェックを入れる。
３、記事作成ページの下部に「抜粋」の入力項目が出るのでそこに表示したい文章を入力
ブログカードの背景色を変更する
背景色とはブログカード内の余白部分の色のことです。
ここの色を変更するにはstyle.cssの下の部分に希望する色の数値を入力します。
マウスを乗せた時（マウスオーバー）の色を変更したい場合
ブログカード部分にマウスを乗せた時に変わる色の変更方法です。
style.cssの下の部分に希望する色の数値を入力します。
画像のサイズを変更する
ブログカードに表示される画像のサイズを変更する方法です。これはstyle.cssではなくfunctions.phpの該当箇所を変更します。
ソースにも説明が書いていますが、ここの「90」・「90」の数値で幅と高さを指定しています。（＝幅90ピクセル×高さ90ピクセル）
この数値を変更することで画像サイズが変えられます。
以上のポイントを変更することでイメージに合ったデザインに変更可能です。
まとめ
プラグインなしでブログカードを設置する方法を初心者の方でも分かるようにカスタマイズを中心に紹介しました。
functions.phpをいじるので初心者の方は敷居が高く感じるかもですが、ブログカードは内部リンクのクリック率にも有効なのでぜひご参考ください。
注意点でも書きましたが、きちんとバックアップをとって万一ワードプレスから編集できなくなってもFTPまたはサーバーから直せるようにしておけば大丈夫です。
今日はこのへんで。
それではまた！
