スポンサーリンク

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

2019年10月6日Luxeritas

UUPDATE
  • 2023年05月27日見直して一部書き換えと追記しました。
  • 2020年08月16日ブロックエディタでの使い方を追記sました。(この記事で紹介しているCSSはブロックエディタのブログカードにも適用されます。)

WordPressテーマ『Luxeritas(ルクセリタス)』には「ブログカード」という機能があります。

今回は『Luxeritas(ルクセリタス)のブログカードの使い方とカスタマイズ』について描きたいと思います。

スポンサーリンク

ブログカードって？

ブログカードとは、テキストリンクを画像(サムネイル)付きのカード型にしてくれるものです。

サンプル画像
きらり

テキストリンクより目立つよね～。これが「Luxeritas」では実装されてるんだね。

結耶

そうそう。プラグインを使わないから軽いしね！ありがたい機能です！

以前紹介したサムネイル画像付きリンクにできるプラグインなどを使わなくてもリンクをカード型にしてくれるので読み込み速度も速いんです。

ブログカードの設定

場所Luxeritas カスタマイズ(外観) ブログカード

管理画面から「Luxeritas」「カスタマイズ(外観)」と進み、表示された画面の左のメニューの下の方に「ブログカード」という項目があります。

クリックするとブログカードの設定画面が表示されるので、一番上にある「ブログカードを有効化」にチェックを入れてください。

その他、ブログカードの丸みや画像(アイキャッチ)の位置などの設定ができるのでお好みで設定してください。

結耶

設定をしたら上にある「公開」ボタンをクリックしてください。

使い方

クラシックエディタ

設定で「ブログカードを有効化」にすると、投稿画面の上にブログカードボタンが表示されます。

ブログカードボタンをクリックすると以下のような画面が表示されます。

リンク先のURLを入力し、リンク追加をクリックすると記事にリンクが挿入されます。

Point

「リンク文字列」はブログカードのタイトルになるものですが、入力しなくても自動で取得されます。ご自分の言葉で入れたい場合のみ入力してください。

HTML

「リンク追加」ボタンをクリックすると記事内に以下のようなHTMLが挿入されます。

<a href="リンク先URL" data-blogcard="1″>リンク先URL</a>

※赤字の「リンク先URL」部分は表示されません。

きらり

これでリンクがカード型になるんだね！

結耶

簡単だよね～(^^)文字だけのリンクより見やすいしね♪

ブロックエディタ

WordPressの新エディタ(Gutenberg)での使い方を紹介します。

まずは画面左上の「＋」をクリックしてブロックの一覧を表示します。
「Luxeritas Blocks」の中に『ブログカード』があるのでクリックしてください。

記事にブログカードブロックが挿入されます。
あとはURLを入力してください。

きらり

ブロックエディタでも使い方は簡単だね。

結耶

うんうん。簡単だよね！ちなみにブロックエディタのブログカードのデザインも今から紹介するスタイルが適用されます。

カスタマイズ

デフォルトでは以下のように表示されます。

デフォルトのままではちょっと大きくスペースをとってしまいます。スマホで表示すると尚更です。
またこれでは内部リンクと外部リンクの区別がつかないですよね。

なのでCSSを使って内部リンクと外部リンクがわかるようにしてみました。

ブログカードで使われているクラス

DIV.blogcard入れ物
A.blogcard-hrefAタグを装飾
img.blogcard-img画像(アイキャッチ)
P.blog-card-titleタイトル
P.blog-card-desc抜粋文
P.blogcard-linkリンク

Luxeritasのブログカードにはこのようにクラスが設定されています。これを使用し見た目をカスタマイズしていきます。

カスタマイズ(内部リンク)

結耶

当サイトではデフォルトのブログカードを内部リンク用にカスタマイズして以下のようにしました。

CSSは以下のようになります。

どこにCSSを書いていいか分からない方は上のリンクの記事に書いてありますので参考にしてください。

CSS
/*--------------------
  ブログカード
--------------------*/
a.blogcard-href {
    padding:10px 10px 5px;    /*内側の余白*/
    min-height:105px;
    background-color:#ffdbed; /*背景色*/
    box-shadow:0 2px 5px #ff93ac; !/*影の太さと色*/
    transition: .3s;
 }

/*マウスが乗ったとき*/
a.blogcard-href:hover {
    box-shadow: 0 4px 20px #ff6893; /*マウスが乗った時の影の太さと色*/
    transform: translateY(-5px);
}

/*画像(アイキャッチ)*/
img.blogcard-img {
    width:90px;      /*画像の横幅*/
    height:90px;    n/*画像の縦幅*/
    margin-bottom:5px;
}

/*タイトル*/
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:boler;   /*太字*/
    color:#fff;         !/*文字の色*/
    background-color:#ff6893;  /*背景色*/
}
ひこ

※「合わせて読みたい」という言葉を「関連記事」などほかの言葉に変えたい場合は、35行目contentの「合わせて読みたい」を変更してください。

※抜粋分は画面の大きさが540px以下の場合「非表示」になるようにしています。画面の大きさに関わらず「非表示」にする場合は29行目の「@media screen and (max-width:540px) {」から31行目の「}」を削除してください。

p.blog-card-desc { display:none; }   /*抜粋文を非表示*/

リンクの非表示

ブログカードの下に表示されるリンクを非表示にする場合は以下のように記述すると非表示にできます。

CSS
p.blogcard-link { display:none; }   /*リンク非表示*:/

リンクの位置を変える

リンクの位置を画像下から画像の横に表示する場合は以下のようにしてください。

CSS
/*リンクの位置を変更*/
p.blogcard-link {
    clear:none;
    margin:8px 0 0;
}

外部リンク

上でブログカードの見た目を変更しましたが、上だけでは内部リンクと外部リンクが同じです。内部リンクか外部リンクかわかるようにしたいと思い、自分なりにいろいろ試してみたりしましたが上手く出来ません。

きらり

じゃあ、内部リンクと外部リンクの見た目をわかるように変えられないの？

結耶

調べてみたけど他の人も上手くできなかったみたい(^^;)

とはいえ方法がないわけではありません。上で書いたHTMLをDIVタグで囲み、外部リンク用のスタイルを指定すれば内部リンクと外部リンクを分けることができます。

外部リンク用HTML

<div class="gaibu_link">
    <a href=”リンク先URL” data-blogcard=”1″>リンク先URL</a>
</div>

ブログカードのリンクを<div class="gaibu_link"> ～ </div>で囲みます。(クラス名はお好みで変更してください。)

このタグをQuicktagプラグインなどに登録しておけば簡単に呼び出して使うことができます。

ブロックエディタの場合

ブロックエディタの場合はブログカードブロックをグループ化(DIVタグで囲む)して、グループブロックに外部リンクのクラス名を入力してください。

「グループ化」についてはの以下記事を参考にしてください。

作成した外部リンク用のブロックを再利用ブロックやパターンに登録しておけば逐一作成する必要がなく、簡単に呼び出して使えます。

再利用ブロック、ブロックパターンの登録方法などは下記の記事を参考にしてください。

外部リンク用CSS

外部用のスタイルは上で書いたCSSがベースになりますので、変更する部分のみスタイルを書きます。

CSS
/*-- 外部リンク --*/
.gaibu_link a.blogcard-href {
    background-color:#d1e8ff;
    box-shadow:0 2px 5px #6785e0;
}

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

/*抜粋文を非表示*/
.gaibu_link p.blog-card-desc {
    display:none;
}

/*参考(外部リンク)の表示*/
.gaibu_link a.blogcard-href:before {
    content:"参考(外部リンク)";
    position:absolute;
    bottom:0;
    right:0;
    padding:1px 10px;
    font-size:12px;
    font-weight:boler;
    color:#fff;
    background-color:royalblue;
}
ひこ

※外部リンク用では抜粋文を非表示にしています。抜粋分を表示させたい場合は13行目から16行目を削除してください。

※「参考(外部リンク)」はお好みで変更してください。

結耶

これで内部リンクと外部リンクを使い分けることができます。

DIVのクラス名を変えて色や言葉を変えれを変えれば他にも見た目を変えることができます。

最後に

今回はLuxeritasのブログカードの使い方やカスタマイズについて書いてみました。

ブログカードはテキストリンクより目を引きますし、わかりやすいですよね。
使い方も簡単なので、WordPressテーマ「Luxeritas」をお使いの方はぜひ使ってみてください。

また、紹介したカスタマイズは一例です。また当ブログに合わせて作っていますので、コピーして使う場合はご自分のサイトに合わせて変更してください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶 フォロー
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM