Luxeritas のブログカードの使い方&カスタマイズ

ルクセリタス

luxeritas-customize-blog-card

ブログカードの使い方とカスタマイズのためのクラス情報です。内部リンク用にシンプルにカスタマイズしたのですが、ブログカードにはexternalがつかず外部リンクまでまきこまれてしまいボツに。

ブログカードに記載されているのは5つの要素、画像、タイトル、抜粋、ファビコン、URLの5要素。

Luxeritasのブログカードの使い方

WordPressにはURLだけの行を自動でカード化する機能がありますが、Luxeritasのブログカード機能はビジュアルエディターの上に表示されているボタンから挿入します。

URLとタイトルを記入すると、 data-blogcard=”1″ という属性が加えられたリンクが作成されます。実際の表示ではこのリンクがブログカードに変換されます。

リンクしておいて、後で ”data-blogcard=”1″”をつけてもいい気も。

ブログカードの色やサイズといった外観は「外観カスタマイザー」の『ブログカード』から変更できます。画像の左右位置もここで変更します。

 

ブログカードの構造

ブログカードの要素はすべてリンクに挟まれています。

divはただの入れ物で、装飾は a で行われています。

luxeritas blog card ルクセリタスブログカード

.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;

画像では枠線とマージンだけを設定。画像の枠線は外観カスタマイザーで消すことができるので、設定次第では枠線はないかも。

カスタマイズ(外部リンクと内部で変えられないので使えなかった例)

外部リンクと内部で変えられないので使えなかったためにボツにしたものですが、参考になれば。

作りたかったのはアイキャッチとタイトルだけのシンプルなもの。

問題は次の3点

  • 外部リンクには影響を及ぼしたくない
  • 画像の大きさとボックスの高さが合わない
  • 真ん中にきてほしいタイトルがボックスの上に張り付いてる

外部リンクにはLuxeritasの設定で外部リンクには external をつけているので疑似否定クラス:not(.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>

luxeritas blog card ルクセリタスブログカード

できたのがこれ。けっこう気に入ったのですが、外部リンクにならないためにCSSでの切り替えがきかずボツです。

ルクセリタス