>【WordPress】自ブログの過去記事を紹介する軽量ブログカードを簡単に作るハック【WordPress】自ブログの過去記事を紹介する軽量ブログカードを簡単に作るハック2017/10/06ブログのことご覧いただきありがとうございます!てんび〜(@_tenbi)です。ブログの過去記事へのリンクをサムネイル付きで簡単に表示したいと思ったことはありませんか?最近の有料WordPressテーマだとショートコード1つでリンクを作ってくれたりするんですが、自前でもブログカードを作りたい!そしてどうせならサムネイルも貼り付けたい!というわけで今回はブックマークレットを使いつつ、過去記事をサムネイル付きで紹介するブログカードを作成する方法を紹介します!サムネイルを取得する方法については【WordPress】ショートコードで好きな過去記事のサムネイルを取得するハックを参考にしてみてください。ブログカードってなんぞやそもそもブログカードとは本来何かというと、はてなブログで提供されている、URLを貼るだけでタイトルサムネイル概要を良い感じに表示してくれる機能。ヘルプそこから転じて、自分や他人のブログ記事を紹介する際に使われるカード形式のリンクがブログカードと呼ばれています。ガジェットTouch!でも、このように記事を紹介する際にブログカード形式を使っています。埋め込みリンクはあまり使いたくないこのブログカード形式のリンクを作りたい場合、大抵ははてなブログAPIを使って表示する自作したHTMLを貼り付けるの2パターンが考えられます。はてなブログAPIはあんまり使いたくない...(本音)。いうと、はてなブログのブログカードはiframe形式を採用していて、ページを開くたびに内容を読み込み直すんです。表示速度の低下に繋がってしまう。加えてiframe形式の場合、FeedlyなどのRSSで読み込んだ時に表示が崩れてしまう場合があるんですよね...(経験談)。その点自作HTMLであればいちいち読み込む必要もないし、RSSで表示されないこともない。保守もしやすいので万が一の時も対策がしやすいんです。ことで自作HTMLでブログカードを作ることにしましょう。記事に登録済みのサムネイルを使おう自作HTMLでブログカードを作ることにしたものの、ただのページキャプチャをサムネイルにしてしまうのは味気ないですよね。記事に登録済みのサムネイルを活用したい。ここで活きてくるのが以前にショートコードで好きな過去記事のサムネイルを取得するハックという記事で紹介した方法。上記の記事では、記事URLをショートコードで囲むだけでサムネイルURLを返してくれる方法を紹介しているんですが、これを使わない手はないですよね!!実際のコードと作り方ここまで色々と話してきましたが、ここから実装編です。ジェネレータという、簡単にリンクを取得できるブックマークレットを使ってブログカードを作っていきます。コピペでいけるので頑張りましょう。これがブログカードのHTML。imgタグの中身がよくわからない人は上のリンク先を見てください。参考までに、このブログで使ってるブログカードのCSSも置いておきます。ジェネレータにアクセスして、先ほどのHTMLをコピペ。画像の通り操作して、ブックマークレットを登録したら完了です。使ってみよう使い方は超簡単。紹介したい過去記事を開いて、先ほど登録したブックマークレットをクリック。するとページの上部にHTMLが出力されます。あとはこれをWordPressのエディタに貼り付ければ完了。ガジェットTouch!こんな感じで貼り付けられます。おめでとうございます。最後に今回は、ブックマークレットを活用して過去記事を綺麗に表示させる方法を紹介しました。手軽に作れて保守性も高いので、ブログの記事を手軽かつ綺麗に紹介したい時に積極的に活用するといいかもしれません。日々の生活で感じる楽しさを大切にしています。小学6年生からこのブログを書いていて、現在は「楽しい」を「好き」へと変えるワークユニット・TNBの代表。Perfumeと写真、甘いものが大好き。立教大学に在学中の21歳。日々の生活で感じる「楽しさ」を大切にしています。このブログではモノや旅、音楽、タスク管理などのライフスタイル記事を通じて、あなたの「楽しい」を「好き」へと変えるお手伝いをしています。プロフィールを見るこのブログについて人気記事iPhoneのホーム画面をシンプルに!1画面運用で快適ライフを実現しよう「使われる」から「使いこなす」へ。大学生にパソコンは必要。