HOME → 6 Luxeritas → 03 カスタマイズ → 

Luxeritas ブログカードのカスタマイズ

Luxeritas(ルクセリタス)
ブログカードのカスタマイズ
 
Luxeritas には、内部リンクや外部リンクのための「ブログカード」が標準で装備されており、ビジュアルエディターのアイコンから呼び出せる。このブログカードのデザインを、サイトの色調に合わせるカスタマイズを施した。
 
CSSでのカスタマイズ結果
 
以下、Luxeritas のブログカードをカスタマイズした記録。
 
 

 

スポンサー リンク

 

 
 
 
 
 
1. オリジナルのブログカードを使ってみる
 
ブログカードを試してみるために、固定ページを作成して、内部リンクを表示してみる。
 
Luxeritasでは、編集画面のツールバーに、ブログカードのアイコンが用意されている。
Luxeritasでは、編集画面のツールバーに、ブログカードのアイコンが用意されている
 
ブログカードのアイコンをクリックすると、リンク先のURLとリンク文字列の入力画面が表示される。それぞれに入力し、「挿入」をクリックする。
ブログカードのアイコンをクリックすると、リンク先のURLとリンク文字列の入力画面が表示されるので、それぞれに入力し「挿入」をクリックする
 
編集画面に戻ると、ブログカードのサイズイメージが挿入されている。尚、このテキストは下記のようになっている。
編集画面に戻ると、ブログカードが挿入されている。テキストは下図のようになっている
 
作成した固定ページを表示してみると、次のようなカードが表示される。
作成した固定ページを表示すると、下図のようなブログカードが表示される
 
これで十分使えるが、サイトのイメージに合わせたカスタマイズを行う。
 
 
 
2. 外観カスタマイズでのブログカード
 
「Luxeritas」→「カスタマイズ(外観)」→「ブログカード」で、【カードの幅】と【画像の位置】を下記のように変更してみる。
「外観」→「カスタマイズ」→「ブログカード」で、下記のように【カードの幅】と【画像の位置】を変更してみる
 
カードの幅が広がり、画像の位置が左になった。
変更結果。カードの幅が広がり、画像の位置が左になった。
 
 
 
3. CSS適用によるカスタマイズ
 
更に、子テーマのスタイルシートにCSSを追記する。
更に、子テーマのスタイルシートにCSSを追記する
 
ブログカードにおける部位のクラス。
 
ブログカードにおける部位のクラス
 
追記したCSS。
/*----------------------------------------------*/
/*   ブログカードのカスタマイズ                   */
/*----------------------------------------------*/
a.blogcard-href {
    padding:10px 10px 5px;
    min-height:105px;
    background-color:#f2ffcc;
    box-shadow:0 2px 5px #b0c4de;
    transition: .3s;
 }

/*マウスが乗ったとき*/
a.blogcard-href:hover {
    background-color:#fee;
    box-shadow: 0 4px 20px #b0c4de;
    transform: translateY(-5px);
}

/*画像(アイキャッチ)*/
img.blogcard-img {
    width:90px;
    height:90px;
    margin-bottom:5px;
    border: 1px #000000 solid;
}

/*タイトル*/
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:bolder;
    color:#fff;
    background-color:#005000;
}
/*----------------------------------------------*/
 
CSSを適用した後の、ブログカードのデザイン。
CSSでのカスタマイズ結果
 
マウスオーバー時の表示。
マウスオーバー時の表示
 
 
 
4. AMPページ用のCSSを設定
 
AMPでページを表示すると、CSSが適用されていない。
AMPページでの表示には、CSSが適用されていない
 
子テーマの、AMP 用スタイルシートにもCSSを追記する。
子テーマの、AMP 用スタイルシートにもCSSを追記する
 
AMP 用スタイルシートに、CSSを追記した結果。
AMP 用スタイルシートにも、CSSを追記した結果
 
 
 
5. 内部リンクと外部リンクでデザインを変える
 
Luxeritasのブログカードは、外部リンクにも使える。そこで、内部リンクと外部リンクを区別するために、【 CSS 】で外部リンクのデザインを変える。
 
【 div 】タグでIDを付け、外部リンクを区別する。
<div id=“gaibu”>
<a href="http://www.shibazaidan.or.jp/" target="_blank" rel="noopener" data-blogcard="1">司馬遼太郎記念館</a>
</div>
 
タグIDを付けた【 CSS 】で、デザインを変える
/*----------------------------------------------*/
/* ブログカードの外部リンク用カスタマイズ       */
/*----------------------------------------------*/
#gaibu a.blogcard-href {
    padding:10px 10px 5px;
    min-height:105px;
    background-color:#ffffee;
    box-shadow:0 2px 5px #b0c4de;
    transition: .3s;
 }

#gaibu p.blogcard-link {
    background-color:#eee8aa;
}

#gaibu a.blogcard-href:before {
    content:"外部リンク";
    position:absolute;
    bottom:0;
    right:0;
    padding:1px 10px;
    font-size:12px;
    font-weight:bolder;
    color:#fff;
    background-color:#808000;
}
 
上:外部リンク、下:内部リンクでデザインを変えた例。
上:外部リンク、下:内部リンクでデザインを変えた例
 
 
以上。
(2020.04.12)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください