ルクセリタスのブログカードからアドレスと記事抜粋を削除する方法。

ルクセリタスにはブログカードを簡単に作成する機能があります。

他のテーマだとプラグインを使って作らないといけないので、少しお得ですね!

 

ただ、ルクセリタスのブログカードをそのまま使うとこんな感じに表示されます。

  • タイトルを見るだけでも内容がある程度予想できるようにしているので、記事の抜粋は少しくどい。
  • しかも、ブログを周回している人にとってはアドレスも不要。

なのでこの2つを表示しないようにCSSで変更を加えていきたいと思います。

 

ルクセリタスのブログカードをCSSで編集する方法

ルクセリタスのブログカードを編集する際はCSSを使っていきます。

 

追記するCSSはこれです。

これを「Luxeritas」→「子テーマの編集」をクリック。

 

「スタイルシート」のタブを選択して貼り付けましょう。

 

これでブログカードがシンプルで見やすいものに変わりました!

変更前

変更後

記事の抜粋とアドレスが削除されてシンプルなデザインになりました!

その分、アイキャッチ画像を大きく表示することでしっかりと目立つようになってます。

 

CSSの内容を説明してみた

今回コピペしたCSSは僕の好みに合わせてあります。

色を変えたいとか、もうちょっとこうしたいとか出てくると思うので、どこをいじったらどうなるかを説明しておきます。

 

どこをいじったらどこが変わるかを理解するためには「クラス名」を確認しないといけません。

そこでまずはクラス名を確認する方法です。

「テーマ」の中にある「テーマエディター」をクリック。
注意書きが出てきますが、無視して進みます。

 

右側にあるドロップダウンリストで「Luxeritas」を選択。
※最初は子テーマが選ばれています。

 

右側の「styles」の中にある「blogcard.css」をクリック。

 

内容を見てみると、こんな感じのクラス名が使われていることが分かります。

  • blogcard-href
  • blog-card-title
  • blog-card-desc
  • blogcard-img
  • blogcard-link

 

blogcard-href

これはブログカードをクリックした時に移動するリンク先のアドレスを指定するクラス名です。

 

blog-card-title

見てわかる通りブログカードのタイトルのクラス名です。

ここで文字の大きさや色を指定できます。

 

blog-card-desc

記事抜粋のクラス名です。

 

blogcard-img

ブログカードの画像のクラス名です。

大きさを変えたいときはここを修正しましょう。

 

blogcard-link

ブログカードに表示されるリンク先のアドレスのクラス名です。

 

ルクセリタスのブログカードをシンプルにしてみて

ブログカードは周回してもらうのに効果的ですが、あまりにもくどいと僕はクリックする気になりません。

これくらいシンプルなら周回してあげてもいいかなという気分にもなりそうです。

僕のブログカードもクリックしてみてね!

 

こんな感じ!

カッパ