ＳＡＮＧＯオリジナル風のブログカード（プラグインなし）

TABLE 非表示

サルワカのサポートを大いに利用

サルワカのサポートを大いに利用

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

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

ブログカードのデザイン統一

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

改良したいこと

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

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

サルワカの参考記事1

HTML&CSS入門: Webデザインをイチから学ぼう

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

プラグインに頼らないブログカード

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

macoblogの参考記事

【WordPress】コピペで実装ブログカードの作り方【プラグインなし】

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

サルワカサポートで更にSANGO風に

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

サルワカの参考記事2

【CSS】box-shadowで影をつける方法とサンプル集

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

　更に、カードにカーソルを合わせた時にフワッと浮かぶようなあのSANGOのカード独特の雰囲気を再現するために以下の青字の部分を加えた。

CSS



.blog-card {
        background: #fff;
	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);
        transition:box-shadow 0.3s, transform 0.3s;

}

.blog-card:hover {
        background: #fff;
        box-shadow: 5px 40px 40px -35px rgba(0,0,0,0.25);
        transform:translate(0, -2px);
}