【Luxeritas】ブログカードの使い方とカスタマイズ
WordPressテーマ『Luxeritas(ルクセリタス)』には「ブログカード」という機能があります。
今回は『Luxeritas(ルクセリタス)のブログカードの使い方とカスタマイズ』について描きたいと思います。
ブログカードって？
ブログカードとは、テキストリンクを画像(サムネイル)付きのカード型にしてくれるものです。
※これは画像です。
テキストリンクより目立つよね～。これが「Luxeritas」では実装されてるんだね。
そうそう。プラグインを使わないから軽いしね！ありがたい機能です！
以前紹介したサムネイル画像付きリンクにできるプラグインなどを使わなくてもリンクをカード型にしてくれるので読み込み速度も速いんです。
ブログカードの使い方
ではブログカードの使い方を紹介します。
設定
管理画面から「Luxeritas」「カスタマイズ(外観)」と進み、表示された画面の左のメニューの下の方に「ブログカード」という項目があります。
クリックするとブログカードの設定画面が表示されるので、一番上にある「ブログカードを有効化」にチェックを入れてください。
その他、ブログカードの丸みや画像(アイキャッチ)の位置などの設定ができるのでお好みで設定してください。
設定をしたら上にある「公開」ボタンをクリックしてください。
使い方
設定で「ブログカードを有効化」にすると、投稿画面の上にブログカードボタンが表示されます。
ブログカードボタンをクリックすると以下のような画面が表示されます。
リンク先のURLを入力し、リンク追加をクリックすると記事にリンクが挿入されます。
「リンク文字列」はブログカードのタイトルになるものですが、入力しなくても自動で取得されます。ご自分の言葉で入れたい場合のみ入力してください。
HTML
「リンク追加」ボタンをクリックすると記事内に以下のようなHTMLが挿入されます。
これでリンクがカード型になるんだね！
簡単だよね～(*^^*)
カスタマイズ
デフォルトでは以下のように表示されます。
デフォルトのままではちょっと大きくスペースをとってしまいます。スマホで表示すると尚更です。
それに内部リンクか外部リンクかを見てすぐわかるようにしたいですよね。
なのでブログカードの見た目をちょっとカスタマイズしてみました。
ブログカードで使われているクラス
- DIV.blogcard・・・入れ物
- A.blogcard-href・・・Aタグを装飾
- img.blogcard-img・・・画像(アイキャッチ)
- P.blog-card-title・・・タイトル
- P.blog-card-desc・・・抜粋文
- P.blogcard-link・・・リンク
Luxeritasのブログカードにはこのようにクラスが設定されています。これを使用し見た目をカスタマイズしていきます。
カスタマイズ
https://kirari-yums.net/2019/09/29/post-9930/当サイトのブログカードをこのようにしてみました。CSSは以下のようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/*-------------------- ブログカード --------------------*/ 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; 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行目の「}」を削除してください。
リンクの非表示
ブログカードの下に表示されるリンクを非表示にする場合は以下のように記述すると非表示にできます。
リンクの位置を変える
リンクの位置を画像下から画像の横に表示する場合は以下のようにしてください。
|
1 2 3 4 5 |
/*リンクの位置を変更*/ p.blogcard-link { clear:none; margin:8px 0 0; } |
外部リンク
上でブログカードの見た目を変更しましたが、これでは内部リンクと外部リンクが同じです。内部リンクか外部リンクかわかるようにしたいと想い、自分なりにいろいろ試してみたりしましたが上手く出来ません。
じゃあ、内部リンクと外部リンクの見た目をわかるように変えられないの？
調べてみたけど他の人も上手くできなかったみたい(^^;)
とはいえ方法がないわけではありません。上で書いたHTMLをDIVタグで囲み、外部リンク用のスタイルをしイェイすれば内部リンクと外部リンクを分けることができます。
https://www.google.co.jp/外部リンク用HTML
|
1 2 3 |
<div class="gaibu_link"> <a href=”リンク先URL” data-blogcard=”1″>リンク先URL</a> </div> |
ブログカードのリンクを<div class="gaibu_link"> ～ </div>で囲みます。(クラス名はお好みで変更してください。)
外部リンク用CSS
外部用のスタイルは上で書いたCSSがベースになりますので、変更する部分のみスタイルを書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/*-- 外部リンク --*/ .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のクラス名を変えてスタイルを変えれば他にも見た目を変えることができます。
最後に
今回はLuxeritasのブログカードの使い方やカスタマイズについて書いてみました。
ブログカードはテキストリンクより目を引きますし、わかりやすいですよね。
使い方も簡単なので、WordPressテーマ「Luxeritas」をお使いの方はぜひ使ってみてください。
また、紹介したカスタマイズは一例です。また当ブログに合わせて作っていますので、コピーして使う場合はご自分のサイトに合わせて変更してください。
結耶(ゆうや)
2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています！
多発性硬化症(MS)という難病と闘っています。