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

2019年10月6日2023年5月27日Luxeritas

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

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

ブログカードって？

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

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

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

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

ブログカードの設定

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

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

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

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

使い方

クラシックエディタ

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

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

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

HTML

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

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

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

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

ブロックエディタ

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

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

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

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

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

カスタマイズ

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

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

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

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

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

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

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

CSSを書く場所と基本的な書き方

UUPDATE 2023年05月13日『WordPressでCSSを書く場所』を追記しました 2019年07月21日『CSSを書く場所』 ...

 https://kirari-yums.net/post-8221/

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;  /*背景色*/
}

リンクの非表示

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

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

リンクの位置を変える

投稿記事の順番を並び替えられる！プラグイン

以前「カテゴリーの順番を並び替えられるプラグイン Category Order and Taxonomy Terms Order」を紹介 ...

 https://kirari-yums.net/post-9930/

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

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

外部リンク

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

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

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

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

Google

Google Googleについて ストア Gmail 画像 ログイン もっと見る 削除 削除 不適切な検索候補の報告 日 ...

 https://www.google.co.jp/

外部リンク用HTML

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

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

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

ブロックエディタの場合

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

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

ブロックエディタ(Gutenberg) | ボックス(div)を作ってブロックを入れる方法

囲み枠など「div」タグはよく使いますよね。私も非常によく使うタグです。 「div」タグで囲ったボック ...

 https://kirari-yums.net/post-12536/

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

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

ブロックエディタ(Gutenberg) | 再利用ブロックの使い方

UUPDATE 2023年05月28日一部追記、書き換え、画像の差し替えをしました。 前回はブロックエディタ(Gute ...

 https://kirari-yums.net/post-12392/

【Luxeritas】ブロックパターン登録機能の使い方

Luxeritas(ルクセリタス) バージョン3.19.0からブロックパターン登録機能が追加されました！ ブロック ...

 https://kirari-yums.net/post-14730/

外部リンク用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;
}

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

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

CSSを使ってソーシャルボタンを作ってみた！

今回はソーシャルボタンを作ってみましたのでご紹介します。 以前プラグインやソーシャルボタンが設置 ...

 https://kirari-yums.net/post-9833/

最後に

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

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

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

応援よろしくお願いします。

     

お問い合わせはこちら

この記事を書いた人

フォロー

結耶(ゆうや)

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

登場キャラクター

きらり

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

楽天ROOM