SANGOオリジナル風のブログカード(プラグインなし)

 ワードプレスを使い始めて10年。正直、ブログ記事更新がかなり億劫になってきていた。それが最近、再び楽しいと思えるようになってきた。その理由は大きく二つ。

 その理由の詳細は、またいずれブログ記事にするとして、大きな理由の一つは有料テーマであるSANGOを使い始めたこと。困ったことがあったら「サルワカ」を確認すればいい。あるいはSANGOの解説ページの問い合わせで質問してもよい(実際質問してる)。タグやショートコードの使い方も一度覚えるとデザインの統一感などをだすのに非常に使い勝手がよいことが分かってきて益々使うのが楽しくなる。より一層記事作成に専念できる環境が整う。

 SANGOの使い勝手の良さには満足しつつあるのであるが、一つ改良したい点があった。

改良したいこと
 SANGOオリジナルのブログカード(リンクカード)を、外部リンクやサイト内検索結果やタグへのリンクにも使いたい。

 これを実現するためには、自分でブログカードを作成して出来るだけそのデザインをSANGOのオリジナルのブログカードに似せてつくるしかない。最初CSS、php, HTMLなんて全然分からない間もなく54歳の昭和世代の私には作れんだろうと思ったけど、どうしても作りたいと思い続けると、願いは叶うもの(笑)。実際にはCSSやHTMLの最低限の基礎は理解できないとイケないないけど、この点は態々解説書とか買わなくても、サルワカのサイトで十分に学習できた。

 ネット検索してみると、ブログカードを簡単かつ手軽に自作する手段として検索結果によく出てくるのが、Pz-LinkCard。しかしこれは、お手軽に作れる半面、表示が遅く重いとデメリットを上げているサイトがいくつか見られた。そこで、Pz-LinkCardのようなプラグインを使わずになんとかSANGOオリジナル風のブログカードを作れないかとさらにネット検索を続けた。

 その結果として、私はWEBトマトさんのmacoblogのブログ記事に紹介されているやり方が非常に分かりやすいと思った。…..で、早速ブログカードを作ってみた。

 やり方は簡単。WEBトマトさんの説明に従ってfunctions.phpとstyle.cssにコピペするだけ。

 ただ、SANGOのブログカードのデザインに似せるためにちょっとだけ工夫した。工夫したといってもこれも他力本願。サルワカのサイトにボックスに影をつけるCSSが紹介されています;

 このサルワカのbox-shadowの解説を参考に、WEBトマトさんの記事で紹介されているstyle.cssの記述に以下の赤字の部分を加えた。

CSS


.blog-card {
        background: white;
	border:1px solid #ddd;
	word-wrap:break-word;
	max-width:100%;
	border-radius:5px;
	margin: 0px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        
  /* sp用 ※4 */
}

.blog-card:hover {
        background: white;
        box-shadow: 5px 8px 16px rgba(0,0,0,0.25
}

実装事例

以下が実装事例となります;

 CSSの記述でBOX-SHADOWを使うことで、ボックスの下部と左右に影が出来て、かつhover時に影の幅がより大きくなるように設定することで、SANGOオリジナルのブログカードのデザインにより似せることが出来た。

 SANGOオリジナルのブログカードは、ブログ記事のIDかカテゴリーIDを指定してリンク作成。この「グレクロ」のブログカードは、タグにリンクされています。同じように、外部リンクやサイト内検索結果に対してこのブログカードを適用することも出来るようになった。