Luxeritas ブログカードのカスタマイズ

Luxeritasでは、編集画面のツールバーに、ブログカードのアイコンが用意されている。

ブログカードのアイコンをクリックすると、リンク先のURLとリンク文字列の入力画面が表示される。それぞれに入力し、「挿入」をクリックする。

編集画面に戻ると、ブログカードのサイズイメージが挿入されている。尚、このテキストは下記のようになっている。

作成した固定ページを表示してみると、次のようなカードが表示される。

「Luxeritas」→「カスタマイズ（外観）」→「ブログカード」で、【カードの幅】と【画像の位置】を下記のように変更してみる。

カードの幅が広がり、画像の位置が左になった。

更に、子テーマのスタイルシートにCSSを追記する。

/*----------------------------------------------*/
/*   ブログカードのカスタマイズ                   */
/*----------------------------------------------*/
a.blogcard-href {
    padding:10px 10px 5px;
    min-height:105px;
    background-color:#f2ffcc;
    box-shadow:0 2px 5px #b0c4de;
    transition: .3s;
 }

/*マウスが乗ったとき*/
a.blogcard-href:hover {
    background-color:#fee;
    box-shadow: 0 4px 20px #b0c4de;
    transform: translateY(-5px);
}

/*画像(アイキャッチ)*/
img.blogcard-img {
    width:90px;
    height:90px;
    margin-bottom:5px;
    border: 1px #000000 solid;
}

/*タイトル*/
p.blog-card-title {
    padding:5px;
}

/*抜粋文の表示*/
@media screen and (max-width:540px) {
  p.blog-card-desc {display:none;}
}

/*合わせて読みたいの表示*/
a.blogcard-href:before {
    content:"こちらも参考にしてください。";
    position:absolute;
    bottom:0;
    right:0;
    padding:1px 10px;
    font-size:12px;
    font-weight:bolder;
    color:#fff;
    background-color:#005000;
}
/*----------------------------------------------*/

CSSを適用した後の、ブログカードのデザイン。

マウスオーバー時の表示。

AMPでページを表示すると、CSSが適用されていない。

子テーマの、AMP 用スタイルシートにもCSSを追記する。

AMP 用スタイルシートに、CSSを追記した結果。

<div id="gaibu">
<a href="http://www.shibazaidan.or.jp/" target="_blank" rel="noopener" data-blogcard="1">司馬遼太郎記念館</a>
</div>

/*----------------------------------------------*/
/* ブログカードの外部リンク用カスタマイズ       */
/*----------------------------------------------*/
#gaibu a.blogcard-href {
    padding:10px 10px 5px;
    min-height:105px;
    background-color:#ffffee;
    box-shadow:0 2px 5px #b0c4de;
    transition: .3s;
 }

#gaibu p.blogcard-link {
    background-color:#eee8aa;
}

#gaibu a.blogcard-href:before {
    content:"外部リンク";
    position:absolute;
    bottom:0;
    right:0;
    padding:1px 10px;
    font-size:12px;
    font-weight:bolder;
    color:#fff;
    background-color:#808000;
}

上：外部リンク、下：内部リンクでデザインを変えた例。

外部リンクのタイプ。

タイプB：同じドメイン名のメインディレクトリサイトへのリンクの場合のみ、サイトのページ情報が取得されない。

「OpenGraph.php」を使用した外部リンクの実装例。