Luxeritas のブログカードの使い方＆カスタマイズ
ブログカードの使い方とカスタマイズのためのクラス情報です。
ブログカードは内部リンクと外部リンクで全く同じ要領で使えるのですが、通常だと内部リンクにもURLが表示されてしまいます。
内部リンクにはURLはなくてもいいので、タイトルとアイキャッチだけのシンプルなカードにしたい。そこで外部リンクに付与される .external で内部リンクと外部リンクの表示項目を変えようとしたたのですが…
ブログカードには外部リンクであっても .external がつかないため、内部と外部で振り分けができないことが発覚。というわけで、内部と外部は同じデザインにするしかなさそうです。
ブログカードに含まれる要素
ブログカードに記載されている要素は５つ。
画像、タイトル、抜粋、ファビコン、URL。構造自体は単純なので、それぞれのクラス名さえ分かれば、要素を非表示にしたりカスタマイズをすることができます。
Luxeritasのブログカードの使い方
WordPress には URL だけの行を自動でカード化する機能がありますが、Luxeritas ではそれは避け、ビジュアルエディターの上に表示されているブログカードボタンを使って挿入します。
ポップアップしたウインドウにURLとタイトルを記入すると、 data-blogcard="1″ という属性が加えられたリンクが作成されます。実際の表示ではこのリンクがブログカードに変換されます。
先にリンクを作っておいて、ブログカード化したいものだけ後から ”data-blogcard="1″”をつけてもいい気も。
ブログカードの色やサイズといったデザインは「外観カスタマイザー」の『ブログカード』から変更できます。画像の左右位置もここで設定します。
ブログカードの構造
ブログカードの要素はすべて a タグ（リンクタグ）に挟まれています。divはただの入れ物で、装飾は a タグで行われています。
| .blogcard | div ただの箱 |
| .blogcard-href | a 要素を装飾。ボックスを作っている |
| .blogcard-img | img アイキャッチ画像。100pxx100px |
| .blog-card-title | p 記事タイトル |
| .blog-card-desc | p 抜粋 |
| .blogcard-link | p リンクURLとサイトアイコン？favicon? |
favicon は .blogcard-link に挟まれています。
装飾に使われている .blogcard-href では、枠線を書いたりサイズ設定などを行っています。
display: block; position: relative; padding: 20px; border: 1px solid #ddd; background: #fff; color: #111; text-decoration: none; max-width: 540px; min-height: 140px;
画像 img は .blogcard-img
border: 1px solid #ddd; float: left; margin: 0 20px 15px 0;
画像に関しては .blogcard-img 枠線とマージンだけを設定。画像の枠線は外観カスタマイザーで消すことができるので、設定次第では枠線はないかも。
カスタマイズ（外部リンクと内部で変えられないので使えなかった例）
上のブログカードは外部リンクと内部リンクで振り分けができずボツにしたものですが、参考になればということで掲載しておきます。アイキャッチとタイトルだけのシンプルになっています。
このデザインの問題は次の3点
- 外部リンクには影響を及ぼしたくない
- 画像の大きさとボックスの高さが合わない
- 真ん中にきてほしいタイトルがボックスの上に張り付いてる
外部リンクには Luxeritas の設定で external をつけているので、疑似否定クラス:not(.external)を使うことができます。しかしブログカードでは external がつかないため疑似否定クラスでの振り分けができません。
画像の大きさとボックスの高さは画像サイズの100pxにボックスの高さを合わせることで解消。
タイトルがボックスの上に張り付いているのはちょっと厄介。上下の位置を指定する vertical-align:middle はインライン要素（span とか b みたいな文中に置く要素）にしか効かないんですね。
ブロック要素の p には使えません。p をinlineにすると横に置きたい画像とのバッティングが発生するのでこれもだめ。
ブロック要素を真ん中に配置する方法は table-cell か flex-box の2択となります。table-cell は画面サイズの変化と相性がわるいので、flex-box を使っています。
<style>
.blog-card-desc:not(.external),.blogcard-link:not(.external){display: none;}
.blogcard-href:not(.external){
margin: 0;padding: 0;
/*min-heightは元のを消すため。102にしているのは諸事情による*/
height: 102px;min-height: 102px;
/*flexboxの対応*/
display: -webkit-flex;display:flex;-webkit-align-items: center;align-items: center;
}
.blogcard-img:not(.external){
margin: 0 10px 0 0;border-style: dashed;border-color: #ccc;
border-width: 0 1px 0 0;width: 100px;height: 100px;
}
.blog-card-title:not(.external){margin:0 5px 0 0;padding:0;}
</style>
できたのがこれ。結構気に入ったのに、使えなくて残念無念。