記事数が増えてきたら「記事リンク」を付けてサイトの滞在時間を長くすることが重要になってきます。
また、Googleアドセンスの審査を通るにもリンクは必要と言われています。
当サイトでも、たまたまタイミングがあっただけかも知れませんが、審査でなかなか判定が出ない時に「記事リンク」を増やしたらすぐに承認の通知が来ました。
「記事リンク」を意識して、記事の関連を構築していくのもなかなか楽しいものですし、その結果PVや滞在時間が増える、それによって収益が増えるとなると喜びも倍増です。
Cocoonでは「ブログカード」を使って簡単に記事のリンクをすることができますので、その手順とどのように見えるかをご説明します。
ちなみに、「ブログカード」は編集画面ではURLが表示されているだけで、「プレビュー」または「公開」をしないとどのように見えるかわかりません。
いちいち「プレビュー」を見れば良いことですが、ここでは「スタイル」の選択で見え方の違いを紹介して記事のレイアウト設計の役に立てればと思います。
ブログカードの貼り方
わかっている方も多いと思いますが、ブログカードの貼り方から説明します。
書いている本人も以前はもっと面倒なやり方をしていましたので、わかっている方にも何かヒントになればと思います。
①メニューから「ブログカード」を選択する。
②URLを検索する。
リンクする記事のURLがわかっていればここは不要ですぐにURLを入力しますが、わからない場合はここで検索ができます。
キーワードを入力すると候補が表示されます。
ここでは【やさしく図解】のまとめページを選択するため「もくじ」と入力しました。
③URLを入力する
表示したいページのタイトルを選択してクリックするとURLが入力されます。
検索しなくてもURLがわかっている場合は②の手順は飛ばして直接URLを入力します。
ブログカードの設定はこれで終わりで、前に書いたように「プレビュー」などをしないと自分が貼ったカードがどのように見えているかわかりません。
画面の右の方のメニュー、出ていなければ
をクリックして出してもらうと、「ブロック」の中にこのような項目が出てきます。
ここの選択で見え方を操作することができます。
スタイルによる見え方
ここではスタイルの選択によってどう見え方が変わるかを説明します。
※現在このサイトは「SILK」スキンを使用しています。
使用しているスキンによって見え方が違うかもしれませんので一応確認はするようにお願いします。
こんな感じで見えるようですが、スキンの選択の問題なのか、デフォルトとカラムの違いがわかりませんでした。
もう少し勉強してみてわかったら更新します。
またスキンの選択で違いが出るのかも追って調べてみようと思います。
サムネイルの見え方を調整する
せっかく良いモノとか記事を紹介しても、アイキャッチ画像がわかりにくかったり肝心なところが切れていては台無しです。
このサイトでも初期のころの記事で修正できていないものもたくさんありますが、記事が増えていけば修正の手間も相当になります。
ということでこの記事のテーマのブログカードですが、「書籍の表紙」などの縦長の画像をそのままアイキャッチに使用した場合はこうなります。
これでは全くなんだかわかりません。
ここに出てくる画像は横：縦＝３：２くらいです。
本の表紙が表示されるようにする
おそらく本のサイズがサムネイルにしにくいと思いますので、ここでは本の表紙を例にしてサムネイルのサイズ調整を行っていきます。
①この記事のアイキャッチ画像を調整します。
左メニューを出して「アイキャッチ画像」
「画像を置換え」をクリックします。
②画像の大きさを調整するので「画像編集」をクリックします。
表紙全体を表示させたい
本の表紙全体を表示させる場合は画像が縦長になります。
①画像サイズの欄に（横）×（縦）で数字が表示されていますので
（縦）に「200」を入力します。
横の数字は追従して変更されます。
数字を入れたら「縮尺変更」をクリック。
※わかりにくいですが画像では「横：300」で設定をしています。設定自体はできるのですが表示結果がうまくいかなかったので「縦：200」を固定にしてやり直しました。
続いて下にスクロールして「サムネイル」にチェックをします。
全ての画像に適用して良ければこの操作は不要です。
設定が確定したら「戻る」をクリックします。
②画面サイズを確認します。
変更されていたら下にスクロール
「サムネイル再生成」をクリック。
画面が変わって「サムネイルを生成する」
をクリック。
終了したら「戻るか」を聞いてくるので指示に従ってクリックをして戻ります。
上の画面に戻るので「アイキャッチ画像を設定」をクリックして終了です。
このように表示が変わります。
カードの画像サイズに合わせて一部を表示させる
表紙全体が表示されている方が「本の紹介」ぽくて良いのですが、縦だけ合わせて「サムネイル再生成」をすると、全体が表示されるために画像が大きくなることがあります。
取り込んだ画像の全体を使いたいわけではない場合は画像をトリミングする方がそろって見えます。
編集画面の呼び出しまでは今までの操作と同じです。
①「切り抜き」を選択します。
②「選択範囲」に数字を入れると範囲がわかるように表示されます。
選択範囲は矢印カーソルで移動できます。
③表示するエリアが切り出せたらもう一度「切り抜き」をクリックします。
切り取られた画像が表示され、下に「保存」のボタンが現れるのでクリックします。
保存できたら「戻る」をクリックします。
サムネイルの再生成は、上と同じです。
サムネイルの生成が終わるとこのように表示が変わっています。
せっかくの本の表紙が切れてしまっているのがもったいないし申し訳ないと思いますが、何もしないと無条件で上と下がカットされて何もわからない状態なので、それよりは許されるかなと勝手に思っています。
まとめ
ブログカードを貼ること自体はいたって単純な作業です。
「キーワード」から対象のブログを見つけることができれば「カードを貼る」まではそれほどわかりにくいことは無いと思いますがいかがでしょう？
アイキャッチやイラストは、テーマやスキンが変わるだけで見え方も変わってしまうのでなかなか悩みの種です。
この記事のやり方が本当に正しいのか（表示はできているので間違ってはいないと思いますが）、もっと良い方法はあるのか？いろいろありまし、「見た目」は好みや想いもありますので、「方法の一つ」として参考にしていただきいろいろ試してもらえればと思います。
他の解説はこちらから
