このブログは、ブログ初心者が日々の出来事をこぼしていくブログです。初心者ブロガー、初心者キャンパーの方々と一緒に少しでも成長できればと思っています。
他の記事も読んでほしいな〜・・・ということない？
ブログを作成していくと、「この記事をよんだら、こっちも読んでほしいな」ということがあると思います。そんなときは、ページの中にリンクを貼ると思います。
そんなリンクを内部リンクと言います。内部リンクはSEO的にも有利だという話もありますし、何より読んでいる方に、関連情報を効率的に提供できるので、とても有用だと思います。
リンクをどうやって表示しよう？
記事中のリンクの貼り方は、ページのURLをそのまま記載しもいいですし、「こちら」などと書いてそれをリンクとすることもあると思います。
ただ、味気ないですし、リンク先の情報がありませんよね。そんなときに使える技が「ブログカード」です。
ブログカードとは？
ブログカードはブックマークレットとも言うようで、
より美しいHTMLをシェアしよう｜ShareHtmlを、もっと綺麗にしたメーカー
ブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。
↑ これです！
アイキャッチ画像と、簡単なページの説明とリンクが箱に囲まれた、このリンク素敵じゃないですか？これが簡単に作れますので、ぜひやってみましょう！
バックアップを忘れずに！
これから、コードを編集しますので、下記を参考にバックアップをとりましょう。手遅れになる前にね！
【Blogger】バックアップ！編集前の必須事項！後悔しないために！
バックアップは編集前に絶対にとりましょう！後悔しないために！
ブログカードの作り方１
Bloggerでのブログカードの作り方は、検索してもらえると何種類か出てきます。
その中で、ワタシが一番簡単だと思う方法を紹介していきます。
① 「より美しいHTMLをシェアしよう」を利用させていただきます
より美しいHTMLをシェアしよう｜ShareHtmlを、もっと綺麗にしたメーカー
ブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。
再びですが、上のページを利用させていただきます。
個人で作成されたページのようで、とても使いやすいです。なくならないといいな〜。
ぜひブックマークしておきましょう。
URLを入力
すると
コードを見てちょっと不安を感じた方も大丈夫。コピペしかしません！
CSSはテーマのカスタマイズから貼り付けます。それが元となって、各記事にHTMLを貼り付けたときにカードを作成してくれる、というイメージでしょうか。
CSSを貼り付けるのは一度だけで、カードを貼り付けたくなったら、HTMLコードを記事のいい場所に貼り付けてください。
② CSSをコピー＆ペースト
先程の「より美しいHTMLをシェアしよう」で作成されたCSSコードをコピーしておきましょう。
テーマ編集画面に進んで、カスタマイズを選びましょう。
その中の「詳細設定」にある▼を押して
「CSSの追加」
を選んでください。
ここにCSSを貼り付けてください。
終わりましたら、右下のフロッピーディスクボタンを押して保存しましょう。
CSSの操作は以上です。
以降は、CSSコードは操作しません。ブログカードをを入れたい場所にHTMLコードを埋め込むだけです。
③ HTMLのコピー＆ペースト
次に、「より美しいHTMLをシェアしよう」に戻ってHTMLコードをコピーしましょう。
記事作成画面の左上のペンマークをクリックして、「HTMLビュー」を選択すると、編集中の記事のHTMLコードがズラ〜〜〜〜〜〜っとでてきます。
大丈夫です。
先程コピーしたHTMLコードを貼り付けましょう。
貼り付ける際は、慣れない内は一番下に貼り付けるのが楽です。
コードが少しわかれば、改行をいくつか入れておいて
<div><br /></div><div><br /><・・・・
↑
ここ（</div>と<div>間）に入れればいいとわかってきます。
/が付いているものは終わり側の印で、divは塊を示すコードのようです。(詳細は聞かないでください！)
コードには改行しても影響はないので、ここに３つほど改行をいれて、ペーストするのもありだと思います。
「作成ビュー」に戻ると、青い文字で示されているところが、カードになりますので、触れないようにしましょう。
いかがでしたでしょうか？簡単だったのでは？
今後カードを作成したくなったら、「より美しいHTMLをシェアしよう」で作成していただいたHTMLコードをお好みの場所に貼り付けるだけです。
④ 更に追加の技もあるようです
例えば、ブログをスマホで見るのとPCで見る、縦画面か横画面かなど、画面サイズは様々です。このような際によりきれいに表示されるように、カスタマイズをしている方もいます。
【Blogger】リンクのサムネイルをブログカードで埋め込む方法
Bloggerのリンクをサムネイル画像付きで貼り付ける方法って？おしゃれかつ簡単に埋め込めるブログカードってあるの？というお悩みにお答えした記事です。モバイル版対応のブログカードCSSも配布しています！
こちらの「JapaNEO」さんはとても参考にさせていただいてます。みなさんもぜひ見てください。勉強になると思います。
ブログカードの作り方２
続いてはこちら。
vanillaice (Akira)さんの「the other way round」
というかっこいいページ。↓です。
ブログカード作成ブックマークレットをアップデートしました
FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...
↑のブログカードはvanillaice (Akira)さんのページを参考に、少し色とかをカスタマイズさせていただきました。もちろん白くもできます。
① ブックマークをしよう。
上記のページを訪れていただくと、中断に↓の画面のように「ブログカード」という文字が出てきます。
この「ブログカード」という文字をクリックではなく、ドラッグ＆ドロップでブックマークバーに落とします。
画面的にはブックマークバーに「ブログカード」が入ります。
② CSSを追加しよう
もう少しサイト下に移動すると、CSSがありますので、コピーしてCSSを追加しましょう。
CSSの追加の仕方はブログカードの作り方１と同様です。
③ ブログカード用のHTMLを作ろう
ブログカードを作りたいページに移動して、先程作り方①でブックマークした「ブログカード」を選択してください。
今回は日々ブロのホームを例に作成します。日々ブロホームに移動して、ブックマークの「ブログカード」を選択します。
すると、「作成されたHTMLをコピーしてください」とでますのでコピーしましょう。
④ コピーしたHTMLを貼り付け！
最後は、作り方１のときと同じようにHTMLビューからブログカードを置きたいところに、こぴーしたHTMLを貼り付けるだけです。
作成ビューで貼り付けてしまうと↓のようになってしまうので、HTMLビューに貼り付けてください。
<figure class="blogcard blogcard-hasnoimage"><a href="https://hibi-blo.blogspot.com/" target="_blank" rel="noopener noreferrer" aria-label="記事詳細へ(別窓で開く)"><div class="blogcard-content"><div class="blogcard-text"><p class="blogcard-title">日々ブロ！</p><p class="blogcard-description"></p></div></div><div class="blogcard-footer"><img src="https://www.google.com/s2/favicons?domain=https://hibi-blo.blogspot.com/" alt="" width="16" height="16">hibi-blo.blogspot.com</div></a></figure>
日々ブロ！
hibi-blo.blogspot.com↑こんな感じです！
お好みで使いましょう
今回紹介させていただいた２つは、初心者でも簡単で、しかもかっこいいのではないでしょうか。カスタマイズも容易で扱いやすいです。
検索すればもっと沢山の種類が出てくると思います。
お好みに合わせて使用できるように、何種類かCSSを入れておいて場合によって使い分けてもいいでしょうし、サイトの統一感を重視してもいいと思います。
皆さんのお好みはいかがでしょうか？
では、ひびでした。
