LuxeritasのブログカードをSANGO風にふわっと浮かせるカスタマイズ

2017/11/27

LuxeritasのブログカードをSANGO風にふわっと浮かせるカスタマイズ

Luxeritasに搭載されているブログカードの見た目をカスタマイズします。この記事で紹介しているCSSを追記すると、SANGOテーマのようなすっきりと優しいデザインのブログカードが仕上がります。

 

カスタマイズに使用したテーマ親テーマ：Luxeritas バージョン: 2.4.2
子テーマ：Luxeritas Child Theme バージョン: 2.00

 

投稿画面からボタン一つで呼び出せるとっても便利なLuxeritasのブログカード機能。標準で用意されているカスタマイザーからも見た目の調整は出来るのですが、少し突っ込んだ内容になるとやはりCSSでの設定は不可欠です。

ブログカードのデザインを考える上で参考にしたのは、【SANGO】という有料のテーマ。あの独特の優しい雰囲気に、今STORKなどから乗り換える人が続出しているという巷ではちょっと話題のニューテーマです。

実はブログカード以外にもちょこちょことSANGOからインスピレーションを受けてカスタマイズしているところがあるのですが、そこはおいおい紹介するとして、今回はブログカードにフォーカスを当ててカスタマイズしていくことにします。

いきなりビフォーアフター

早速ですが、まずはカスタマイズをする前の【ビフォー】と、完了後の【アフター】から見て違いを感じてもらえればと思います。

今回はマウスポインターを当てたときの動作も分かるように、GIFを使ってみ表現してみました。パソコン・スマートフォンそれぞれのビフォーアフターです。

【ビフォー】パソコンからの見た目
旧ブログカードGIF

【アフター】パソコンからの見た目
新ブログカードGIF

【ビフォー アフター】スマートフォンからの見た目
旧ブログカードスマホ表示新ブログカードスマホ表示

一番のこだわりは、スリムさです。

【ビフォー】の状態だと、特にスマートフォンのような小さな画面では、ブログカードが画面いっぱいに表示されてしまい他の情報が目に入りにくくなりますし、縦に長くなることでスクロールする動作も増えて、ユーザビリティ上も好ましくないのではないかと考えたからです。

その他のカスタマイズポイントについても、続いて紹介していきます。

カスタマイズする項目

今回のカスタマイズ一覧

  1. アイキャッチ周りの余白調整
  2. スマートフォンでの表示調整（URL表示削除）
  3. URL表示位置調整
  4. マウスのポインターを当てた時のアニメーション調整（マウスオーバー）
  5. 抜粋文を削除
  6. 記事タイトルの表示位置調整
  7. 【関連記事】の表記をブログカード右下へ表記

ブログカード変更項目一覧

スリム化のために、思い切って抜粋文を消してみました。記事の内容がある程度分かるようなタイトルをつけるようにしているので、記事冒頭の45文字が無くなってもさほど影響はないと思ったからです。

あと、URL表記はパソコン画面の場合はスペースに余裕があるので残していますが、スマートフォン画面ではごちゃごちゃとしてくるので消しています。

他のブログではURL表記のないブログカードもたくさん見かけるので、URLが有る無しでそれほどクリック率に影響はないでしょう。

カスタマイザーの設定

まず、Luxeritasに標準搭載のカスタマイザーで、ブログカードの設定をしていきます。

赤いラインが引いてあるところは画像の通りに設定します。

CHECK

ブログカード有効化

カードに影を付ける

画像の位置　左

画像を枠線で囲む

画像に影を付ける

※『画像に影を付ける』のチェックを外したのは、CSSで好みの影の形にしたかったためです。

場所：管理画面 ＞ 外観 ＞カスタマイズ ＞ ブログカード
ブログカードカスタマイザー設定

ブログカードの最大幅はお好みです。

画面幅いっぱいにすると横に間延びした印象になり個人的にはあまり好みではなかったので、ここでは『500』に設定しています。

Luxeritasの子テーマに追記するCSS

下記ソースをCSSの最下部へコピペして保存するとブログに反映されます。

場所：管理画面 ＞ Luxeritas ＞ 子テーマの編集


/* ブログカード */
a.blogcard-href {
    padding: 0px;
    min-height: 102px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .13);
    transition: .3s;
}
a.blogcard-href:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transform: translateY(-5px);
}
.blogcard-img {
    margin: 0px 10px 0 0;
    border:none
}
p.blog-card-title {
    margin: 5px 5px 5px 5px;
}
p.blog-card-desc {
    display: none;
}
p.blogcard-link {
    clear: none;
    margin: 5px 0 5px 5px;
}
@media only screen and (max-width: 430px){
p.blogcard-link {
    display: none;
}}

ブログカードの右下隅にピンクで囲われた【関連記事】という文言ですが、人によっては不要かと思いましたので分けることにしました。

このブログカードの【関連記事】部分が不要な場合は、下記CSSは追記不要です。


/* ブログカード【関連記事】 */
a.blogcard-href::before {
    content: "関連記事";
    position: absolute;
    color: white;
    font-size: 0.9em;
    background: #ff8a80;
    width: 80px;
    height: 22px;
    font-weight: bolder;
    text-align: center;
    line-height: 1.7em;
    letter-spacing: .09em;
    bottom: 0;
    right: 0;
}

この【関連記事】のCSSを追記すると、全部のブログカードに同じ文言が入ってしまうので、内部リンク用としては使えますが、外部リンクの場合は意味が通らなくなってきます。

私の場合は「関連記事はこちら」みたいな言葉を毎回書くのが面倒だったので、どうしてもブログカード内に記述したかったのでこのようになりました。

外部リンクの場合はその表記を消す、あるいは【外部リンク】という記述に変化させるような方法を探ってはみたのですが、今の私の知識では実現ができず断念しました。また方法が分かれば追記したいと思います。

ブログカードのカスタマイズまとめ

こちらがカスタマイズ後のブログカードです。関連記事としてカスタマイズ関係の内部リンクなので興味がある方はどうぞ。

コンテンツの邪魔をしないコンパクトさと、アニメーションがふわっと浮き上がるような自然な動きはあのSANGOを彷彿とさせるデザインです。

レスポンシブ対応で、スマートフォンから見た形もすっきりして、とてもいい感じのブログカードに仕上がったのではないでしょうか。

ブログカードのピンク色の部分については若干の問題が残るので、外部リンクにもブログカードを用いる人は該当部分のCSSは追記しないようにしてください。

2017/11/27