>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

簡単!Luxeritasルクセリタス・ブログカードの使い方とプチカスタマイズ

ルクセリタス・使い方
この記事は約5分で読めます。

ルクセリタスでブログカード機能を使う方法の解説です。

ブログカードって?

ブログカードとは以下のように、自サイト内のリンクをアイキャッチ画像とタイトル、記事抜粋やアドレスをカード型で見やすく表示するものです。

3296_15

ちなみに上図はルクセリタスのブログカードデフォルトデザインです。

※記事抜粋やアドレスは、CSS対応で表示・非表示設定可能です。

 

外部リンクにも使える?

外部リンクにもブログカードを使う場合は自サイト内の記事同様に、ブログカード挿入からURLを入れれば可能です。

外部リンクの場合は「リンクを新しいタブで開く」にチェックをすると良いです。

 

結果サンプル

※画像です

※カードデザインはカスタマイズしています。

外部リンクと内部リンクを区別してデザインを変更する機能はありませんので、外部リンクのデザインを変えたい場合は、CSSで対応する必要があります。

外部リンクは、ブログカード以外にも、リンクアドレスを入れるとアイコンを表示する事が出来ます。

外観→カスタマイズ→外部リンクで設定

以下のようにアイコンが表示される

 

nofollow について

 

「rel=”nofollow”を付ける」にはチェックしない方がいいです。SEO的にどうしても必要がある特殊な場合のみ、手動で付与する事が望ましいですが、ほぼほぼ不要。

 

ブログカード機能を有効にする

 「外観」→「カスタマイズ」

4544_03

 

 「ブログカード」で有効化にチェックを入れます。

6160_01

 

以上で、使える状態になります。

 

あとは好みに応じてデザインを編集します。

  • カードの最大幅
  • カードの角の丸み
  • カードに影を付ける
  • 画像の位置 右 or 左
  • 画像の角の丸み

 

ブログカードの挿入

以前のエディタ「TinyMCE」の場合

 ビジュアルエディタの画面から「ブログカード」ボタンを押します。

 

6160_03

 

以下のようなポップアップが出ますので、

 URLに記事アドレスを入力(コピペ)します。

6160_04

外部サイトへのリンクであれば、「リンクを新しいタブで開く」にチェックを入れると良いです。

「挿入」ボタンを押せば完了です。

 

ブログカードボタンがない場合

 

 「Luxelitas」→「管理機能」でエディタ設定を確認して下さい。

 

 ビジュアルエディタの表示ボタンに追加します。

 

非表示エリアから表示エリアへドラッグ&ドロップで追加できます。

6160_02

 

 

ブロックエディタ「Gutenberg」の場合

※Luxeritas Ver.3.6.0以降

Luxeritas Blocks からブログカードを選択し、

URLとリンク文字列(省略可)を入力します。

 

リンク文字列の入力について

 

リンク文字列に何も入れなくても、タイトルが自動で画像のaltタグに入ります

公式サイトには以下のように記載されていました。

※ 「リンク文字列」は無くともブログカードは表示されますが、ブログカードを無効化したり、他のテーマに移行した時に、通常のリンクとして表示させる場合に、あった方が良いです。

 

ブログカードを無効化した際、またはテーマ自体を変えた場合に通常のリンクとして表示すると、アドレスのみより、タイトルが表示される方が良いので、入れておくのがベスト。

 

 

何も入れない場合

<a href="https://ayaito.net/wordpress/customize/3743/" data-blogcard="1">https://ayaito.net/wordpress/customize/3743/</a>

 

タイトルを入れた場合

<a href="https://ayaito.net/wordpress/customize/3743/" data-blogcard="1">ルクセリタスのブログカードをカスタマイズ</a>

 

ビジュアルエディタでの見え方

 

何も入れない場合は、ビジュアルエディタで見た際、アドレスが見えています。

6160_05

 

記事タイトルを入れた場合、以下のようにタイトルが見えます。

6160_06

 

 

カスタマイズ

 

デザイン及び、記事抜粋やアドレスの表示・非表示はCSS対応で設定可能です。

プチカスタマイズは以下です。

 

記事アドレスを非表示にする

p.blogcard-link {
display: none;
}

 

記事抜粋を非表示にする

p.blog-card-desc {
display: none;
}

 

デザインカスタマイズについては以下をご覧ください。

↓ 見えているカードのようなデザインへのカスタマイズです。

ルクセリタスのブログカードをデザインカスタマイズ
初期デザイン ルクセリタスのブログカード初期デザインは以下のような感じです。 ルクセリタスのブログカード機能自体の使い方は以下をご覧ください。 サンプルの設定とCSS サンプル 外観のカスタマイズで行う設定 「外観」→「カスタマイズ」→「ブ...

 

コメント

タイトルとURLをコピーしました