どうも、KENSUKEです。
ぼくと同じようなブログ初心者の方、下に他のブログへのリンクがありますが、そこにはブログタイトル、ブログの説明、写真、そしてはてなブックマーク数なんかが表示されています。
これの名前知ってましたか？
よそ様のブログをみると、こんなのがいっぱいあり、かっこいいからやりたいなと思っていたんですが、どういう単語でググっていいかすらわかりませんでした。
色々調べてようやくこれがブログカードということを知りました。
目次
外部リンクと内部リンク
ブログカードには外部リンクと内部リンクがあります。
言葉通りですが、外部リンクが他のブログ・サイトへのリンク、内部リンクが自分のブログの記事へのリンクになります。
こちらが外部リンクの例です。ちなみにこれは、Simplicity本家でブログカードの使い方を解説している記事へのリンクです。
そして、こちらが内部リンクを表示した例です。前の記事へのリンクをはってみました。
こんな感じで表示されます。リンク先の写真やブログタイトルなど自動で表示されるので、文字だけの表現よりも見た目が華やかになるのがいいですね。
ブログカードを使うメリット
Simplicity本家でも、ブログカードのメリットを紹介されていますので引用しておきます。
- URLを入力するだけで手軽に作成できるので記事作成時間の短縮になる
- 通常のリンクよりはリッチな表示になる（リンクが画像付きなので映える）
- もしブログカードリンク先のタイトルがなどが変わっても、勝手に変更が反映される（直す必要がない）
- スタイルシートで見た目もカスタマイズ出来る
ぼくがおすすめする点は、見た目のかっこよさと、設定・使用の簡単さの2点ですね。これだけでも十分導入するメリットがあると思います。
ブログカード使い方
ブログカードが使えるように設定する
ブログカードを使うためには設定が必要です。
次のようにダッシュボードから『外観』→『カスタマイズ』と進みます。
『ブログカード（外部リンク）』をクリックします。
『ブログカード有効』をにチェックを入れ、『保存して公開』をクリックします。
『＜』をクリックし戻ります。
これで外部リンクの設定は終了です。ブログカードのカスタマイズもここでできますので、いろいろ試してみてください。
また、内部リンクも『ブログカード（内部リンク）』から同じように設定できます。
記事内でのブログカードの使い方
外部リンクも内部リンクもやり方同じです。そして、使い方は2種類用意されています。
一つはURLをそのまま記入する方法と、もう一つは<a>タグを使ったHTMLのリンクを記入する方法です。
一つ目の方法 そのままURLを記入する
https://wp-simplicity.com/how-to-use-blogcard/
もう一つの方法 <a>タグを使ったHTMLのリンク
<a href="https://wp-simplicity.com/how-to-use-blogcard/" target="_blank" rel="noopener">https://wp-simplicity.com/how-to-use-blogcard/</a>
1つ目の方法：そのままURLを記入する
1つ目の方法は、そのままURLを記入します。
WordPressでは、ビジュアルエディタで記事を書いていると思います。そこへ、外部リンクにしろ内部リンクにしろURLをコピーしてそのまま記事の中に貼るだけです。
外部リンクの場合、URLはブログやサイトを訪問してブラウザの下の図の部分を選択し、キーボードのCtl+Cとかでコピーできます。
内部リンクの場合も同じようにURLをコピーして記事内に貼り付けます。
ビジュアルエディタで貼り付けてもうまくいかない場合は、テキストエディタで試してみてください。
2つ目の方法：<a>タグを使ったHTMLのリンク
<a>タグを使ったHTMLリンクは、WordPressのビジュアルエディタのツールバーにある『リンクの挿入/編集』を使った方法が簡単です。
外部リンクの場合
『リンクの挿入/編集』から『リンクの設定』とクリックします。
『リンク先URL』に事前にコピーしておいたURLを張り付け、『リンクを新しいタブで開く』にチェックを入れます。最後に『リンク追加』をクリックします。
以上で、外部リンクのブログカードができました。プレビューで確認してみてください。
内部リンクの場合
内部リンクの場合も同じように、WordPressのビジュアルエディタのツールバーにある『リンクの挿入/編集』から『リンク設定』をクリックして『リンクの挿入/編集』ダイアログを表示します。
ダイアログの下に自分の過去記事がありますので、そこからリンクをはりたい記事をクリックすると、『リンク先URL』にURLが入ります。
探している記事がなければ、『検索』にキーワードを入れて検索できます。
『リンクを新しいタブで開く』にチェックを入れます。最後に『リンク追加』をクリックします。
以上で、外部リンクのブログカードができました。プレビューで確認してみてください。
詳しい使い方は本家Simplicityのサイトで紹介されていますので、一度目を通しておいてください。
ブログカードは簡単に設置できますので、初心者でまだ使ってない方は是非どうぞ。ブログがちょっとカッコよくなりますよ。
おすすめは<a>タグを使ったHTMLのリンク
記事内でのブログカードの使い方には2種類ありましたが、おすすめは<a>タグを使ったHTMLのリンクです。
URLをそのまま記事に記入する方法は、ブログカードの使用をやめるとリンクとして機能しません。ただのURLの文字列になります。
<a>タグを使った方法ならば、普通のリンクとして機能してくれます。ぼくはテーマによらずに機能するこの方法をおすすめします。
これは本家のSimplicityでも『ブログカードの難点』としてあげられていますので確認してみてください。
まとめ
ブログは内容が一番大事だと思いますが、それでもやっぱり見た目も重要だと思います。それにできることの幅が広がれば、より多くの表現ができるようになるので、皆さんもいろいろと試してみてください。