2019年12月26日TwitterFacebookB!HatenaPocketLINELINERSSCopyWordPressテーマ『Luxeritas(ルクセリタス)』には「ブログカード」という機能があります。今回は『Luxeritas(ルクセリタス)のブログカードの使い方とカスタマイズ』について描きたいと思います。最後にスポンサーリンクブログカードって?ブログカードとは、テキストリンクを画像(サムネイル)付きのカード型にしてくれるものです。テキストリンクより目立つよね~。これが「Luxeritas」では実装されてるんだね。プラグインを使わないから軽いしね!ありがたい機能です!以前紹介したサムネイル画像付きリンクにできるプラグインなどを使わなくてもリンクをカード型にしてくれるので読み込み速度も速いんです。ブログカードの使い方ではブログカードの使い方を紹介します。ブログカード管理画面から「Luxeritas」「カスタマイズ(外観)」と進み、表示された画面の左のメニューの下の方に「ブログカード」という項目があります。クリックするとブログカードの設定画面が表示されるので、一番上にある「ブログカードを有効化」にチェックを入れてください。その他、ブログカードの丸みや画像(アイキャッチ)の位置などの設定ができるのでお好みで設定してください。設定をしたら上にある「公開」ボタンをクリックしてください。設定で「ブログカードを有効化」にすると、投稿画面の上にブログカードボタンが表示されます。ブログカードボタンをクリックすると以下のような画面が表示されます。リンク先のURLを入力し、リンク追加をクリックすると記事にリンクが挿入されます。Point「リンク文字列」はブログカードのタイトルになるものですが、入力しなくても自動で取得されます。ご自分の言葉で入れたい場合のみ入力してください。HTML「リンク追加」ボタンをクリックすると記事内に以下のようなHTMLが挿入されます。data-blogcard="1′′>リンク先URL</a>※赤字の「リンク先URL」部分は表示されません。簡単だよね~(*^^*)スポンサーリンクカスタマイズデフォルトでは以下のように表示されます。デフォルトのままではちょっと大きくスペースをとってしまいます。スマホで表示すると尚更です。それに内部リンクか外部リンクかを見てすぐわかるようにしたいですよね。ブログカードの見た目をちょっとカスタマイズしてみました。ブログカードで使われているクラス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は以下のようにしています。background-color:#ff6893;}※「合わせて読みたい」という言葉を「関連記事」などほかの言葉に変えたい場合は、35行目contentの「合わせて読みたい」を変更してください。※抜粋分は画面の大きさが540px以下の場合「非表示」になるようにしています。{」と31行目の「}」を削除してください。/*抜粋文を非表示*/リンクの非表示ブログカードの下に表示されるリンクを非表示にする場合は以下のように記述すると非表示にできます。...https://kirari-yums.net/2019/09/29/post-9930/リンクの位置を画像下から画像の横に表示する場合は以下のようにしてください。0;}スポンサーリンク外部リンク上でブログカードの見た目を変更しましたが、これでは内部リンクと外部リンクが同じです。内部リンクか外部リンクかわかるようにしたいと想い、自分なりにいろいろ試してみたりしましたが上手く出来ません。調べてみたけど他の人も上手くできなかったみたい(^^;)とはいえ方法がないわけではありません。上で書いたHTMLをDIVタグで囲み、外部リンク用のスタイルをしイェイすれば内部リンクと外部リンクを分けることができます。</div>で囲みます。(クラス名はお好みで変更してください。)外部リンク用CSS外部用のスタイルは上で書いたCSSがベースになりますので、変更する部分のみスタイルを書きます。background-color:royalblue;}※外部リンク用では抜粋文を非表示にしています。※「参考(外部リンク)」はお好みで変更してください。結耶これで内部リンクと外部リンクを使い分けることができます。DIVのクラス名を変えてスタイルを変えれば他にも見た目を変えることができます。CSSを使ってソーシャルボタンを作ってみた!今回はソーシャルボタンを作ってみましたのでご紹介します。...https://kirari-yums.net/2019/09/23/post-9833/最後に今回はLuxeritasのブログカードの使い方やカスタマイズについて書いてみました。ブログカードはテキストリンクより目を引きますし、わかりやすいですよね。使い方も簡単なので、WordPressテーマ「Luxeritas」をお使いの方はぜひ使ってみてください。紹介したカスタマイズは一例です。当ブログに合わせて作っていますので、コピーして使う場合はご自分のサイトに合わせて変更してください。スポンサーリンク応援よろしくお願いします。結耶(ゆうや)2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!多発性硬化症(MS)という難病と闘っています。くん、今日はHTMLサイトマップを作ってみようか。PMこんにちは!ランキングから来ました。ブログガードって、初めて知りました。