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;
}
 
上:外部リンク、下:内部リンクでデザインを変えた例。
上:外部リンク、下:内部リンクでデザインを変えた例
 
 
 
6. 外部リンクにおける問題点
 
外部リンクのタイプ。

外部リンクのタイプ
 
A:同一サーバ内 → 他ドメイン名のサブディレクトリサイトへのリンク。
B:他サーバ → 同じドメイン名のメインディレクトリサイトへのリンク。
C:他サーバ → 異なるドメイン名のメインディレクトリサイトへのリンク。
D:他サーバ → 同じドメイン名のサブディレクトリーサイトへのリンク。
 
タイプB:同じドメイン名のメインディレクトリサイトへのリンクの場合のみ、サイトのページ情報が取得されない
タイプB:同じドメイン名のメインディレクトリサイトへのリンクの場合のみ、サイトのページ情報が取得されない
 
やむなく、外部サイトのOGPタグから各種情報を取得できるようにするためのPHPファイル「OpenGraph.php」を使用して対応する。
 
「OpenGraph.php」を使用した外部リンクの実装例。
「OpenGraph.php」を使用した外部リンクの実装例
 
 
以上。
(2020.04.12)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

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

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