長年使っていた無料テーマの「Cocoon」から有料テーマ「ZEEN」に変えて1ヶ月が経ちました。
その中で、Cocoonには備わっていて、ZEENにはない機能がそこそこあって、運用する中でやっぱり必要だなと感じるものについては追加CSSを書きまくって追加しています。
MoKuJi
内部リンクを美しく魅せる「ブログカード」
Cocoonだけにあらず、日本製の多くのテーマに実装されているのが「ブログカード」。横長のボックスでリンクを表示させる機能ですが、Cocoon時代にボクも愛用していて、以下のような記事も書きました。
リストで紹介する場合
これまで、上記のような”リスト表記用”の書き方で関連記事や参考記事を載せることもありましたが、このリストもCSSで整形して後から追加している機能です。
リストのように、複数のリンクを羅列したいときはこの方がまとまりも見え方も美しいと思いますが、1つの記事を紹介したいときはブログカードの方が向いています。
今回実装したブログカード
↑こちらが今回作ったブログカードです。
いくつかの記事を参考にさせていただきながら完成させました。
ZEENデフォルトのリンクカード（的なやつ）
ちなみに、ZEENではURLだけをぶち込むと以下のような大きめのボックスが出現します。
【Cocoon】ブログカードのカスタマイズ
サムネイルが巨大です（笑）。
こいつもCSSで調整すればそれなりにカッコ良くできる可能性はあるので暇だったら今度やってみようと思っています。
「ブログカード」の作り方
さて、今回の記事を読まれている人が気になるのはボクがどんな想いでブログカードを装備させたかとかそういう話じゃなくて、自分でも同じことをしたい場合の話なはずなので、参考にさせていただいたページを紹介しますね。
参考にしたページ
まず最初に上のページで色々なジェネレーターをチェックしました。
しかし、毎回ジェネレートしなければならないのがめんどくさそうで下の方のページを参考に「function.php」に追記と、「追加CSS」で100行くらい追加して実装完了です。
まずはコピペで記事内に出現させます
先にfunction.phpに参考記事から引っ張っってきたコードをぶち込むと、こんな感じで巨大なサムネが伴うカードが出現します。これじゃ美しくない。
なので、続いてCSSを打ち込んで整形します。
CSSの知識がそれなりにあれば、ちょっとずつ自分の好みに整形して、自分が納得いくデザインに変更します。
どん！
整形するとこんな感じになりました。
こまかーーーい話ですが、コーナーの丸みを2pxで指定していて、サムネイルの左下、見出しの左上”だけ”に指定することでちゃんと全4コーナーが2px丸まってる状況を作っています。
こだわったポイント
デザイン面でこだわったっぽいんとは、
- フワッと浮き上がるところ
- サムネイルが全面にびっしりなところ
- 記事の題名だけにしたところ
- 他のボックスとの調和
この辺りに注意しながら整形しました。
最近ではスマホからのアクセスも多いので１個目は微妙に関係ない（影響少ない）かも知れませんが最近多く取り入れているグラデーションカラーだったり、マテリアルデザイン化を意識しつつ、ZEENに変えてからデザイン調整（調和）を図っているボックス類との調和も意識しながら作りました。
また、ブログカードを美しく見せる上で、情報が多いこと（例えばタグやカテゴリー、投稿日）は捨てて、タイトルとサムネに絞ることでシンプルさを追求しました。
いかがでしょう？
当然ですが、function.phpをいじるのは危険です。
ボクも何度も経験がありますが、1文字間違うだけで真っ白が起きます。バックアップを取るのが一番ですが、面倒な場合は元の記述をメモパッドなどに一時的に記憶させて作業しましょう。
もちろん、子テーマをしっかり使っている人は子テーマの方にfunction.phpを移植してから作業です。
記事への挿入方法
CSSなどのカスタマイズが終わったら実際に記事にぶち込んでいくわけですが、今回の方法では、ショートコードを使います。
覚えやすい文字列にしてもいいし、AddQuickタグに入れる前提で作ってもいいんですが、とにかく表示させたい場所にショートコードを入れるのが挿入方法になります。
ショートコード
今回ボクが設定したショートコードはこんな感じです。
もちろん知識がある方ならコピペ後、bcardの部分を変更できます。
サンプル幾つか紹介
ということで、今回作ったブログカードをサンプル的に幾つか並べておきますね〜！
まとめ
有料テーマを買う上での目的の一つは、すでに完成度が高いことからくる、「カスタマイズにかける時間が不要になること」かもしれません。
しかし、ボクはCSSいじりが好きなことと、購入したテーマであっても「これで完璧！」と思えることがほぼあり得ないことから、結局いじってしまいます。
そんな中で、ブログの本質である「書くこと」に時間を割けないのは本末転倒なので、さっさと気分落ち着くデザインに行き着いて、サクサク記事を書きたいものです。
そういう意味で、今回実装したブログカードで一旦のカスタマイズが完成した気がしています。
