Luxeritasの記事一覧カテゴリーをSTORK風にカスタマイズ

2017/11/24

ルクセリタスのカテゴリーをストーク風にカスタマイズ

 

無料のワードプレステーマ【Luxeritas】の記事一覧のカテゴリー表示位置を【STORK】風にカスタマイズしました。CSSにソースをコピペすることで簡単に再現できます。

MEMO記事一覧のデザインで参考にしたのは、WordPressテーマ「ストーク」
という有料のテーマ。色使いからスマホ表示まで全てが美しくデザインされていて、何でもない記事でもアイキャッチさえあればそれなりに見えてしまうという、ブロガー界のオシャレブログ鉄板テーマです。

 

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

 

ストークに限らず、私が気になっているいくつかの有料のテーマでは、アイキャッチ画像の中にカテゴリーが表示されているデザインをよく見かけます。

もしかしたら、その見せ方の方がユーザビリティが高いのかなぁと考えたのが一つと、単純にデザイン的にキレイで好みだったので、Luxeritasのデザインにも取り入れてみることにしました。

親テーマをいじらず、子テーマCSSのみの追加ですので、新しいバージョンへの更新もそのまま上書きできて楽ちんです。

CSSのコードの見つけ方

ブラウザの右クリック→『検証』で大体の当たりをつけ、そのまま追記・変更して上手くブログに反映されればよしとする、あくまで素人レベルのカスタマイズ方法です。

私の環境ではこれから紹介するコードで問題なく動いてくれているので、致命的なエラーになることは無いとは思いますが、CSSを変更される際はあらかじめバックアップを取ることをおすすめします。

スタイルシート（CSS）の置場所

先にCSSを追記する場所を確認しておきます。

管理ページ左の項目から『Luxeritas』＞『子テーマの編集』をクリック。たくさんのコードが書いてあるページが開かれるので、そのコードの最下部に追記すればOKです。

追記や変更をしたら、忘れずに保存しましょう。

なお、『外観』＞『テーマの編集』にあるスタイルシートも同じ子テーマのCSSです。どちらに書いても保存すれば両方に反映されますので、お好みの方をお選びください。

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

Luxeritas標準のカスタマイザーでは今回の変更はできないので、子テーマのCSSに追記する形で進めていきます。

ちなみに、記事一覧のスタイルは、タイル型に設定しています（カスタマイザーのグリッドレイアウトで変更可能）。

 

【最初のデザイン】通常設定では赤丸で示したカテゴリー表示となります。ルクセリタスのカテゴリーカスタマイズ前

↓

【希望デザイン】それを次の赤丸のような位置とデザインにかえていきます。ストークのカテゴリー参考例

以下のコードを子テーマの『style.CSS』最下部へ追記するとSTORKのような位置とデザインになります。

MEMO
CSSの設定では便宜上色も指定していますが、お使いのサイトカラーに適時合わせて設定してください。

 


/*記事一覧のカテゴリーデザイン*/
#list .meta a {
    color: #444; /*←文字の色変更できます*/
    font-weight: bold;
    text-decoration: none;
}
#list span.category {
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    background: #fcee21; /*←背景色変更できます*/
    font-size: 0.9em;
    padding: 0.1em 0.5em;
    min-width: 8em;
    opacity: .9;
    transition: .3s;
}
#list .fa-folder:before {
    content: none;
}
#list span.category:hover {
    background-color:#62cadf; /*←マウスを近づけた時の色変更できます*/
    opacity:1;
}

今回の設定では黄色い枠に白文字が入るような設定になっていますが、黄色い枠は【background-color:#fcee21;】の項目を、文字は【color: #444;】の項目を変更することで、自分の好きな色に自由に変更できます。

他にも、黄色い枠の角を丸くしたり、大きさや位置などを変えたりもできますので、上記コードをベースに数字などをいじって好みの見た目に変えてみるのもいいでしょう。

今回はとりあえずSTORKのイメージに近くなるようなカスタマイズのみで行きたいと思います。

カスタマイザー設定

カテゴリー表記を設定で消している場合があるので、Luxeritasに標準でついているカスタマイザーからチェックしておきます。

 

【メタ情報の表示位置】をクリックメタ情報の表示位置の写真

 

赤い囲いの設定は合わすようにしてください。
他の設定もキャプチャ画像が推奨設定ですが、表示が崩れなければ任意で入れてもOKです。
メタ情報の表示位置チェック

－2月6日追記－
タグ表示や個別ページのカテゴリー表示崩れに対応しました。

カスタマイズ後のイメージ

カテゴリー表示が次のキャプチャ画面の位置になっていれば成功です。
カテゴリーカスタマイズ後

 

スマホ表示も、レスポンシブ対応テーマなので問題ありません。

ただ、今回のカスタマイズでカテゴリーを右上角に寄せたのはいいのですが、現状のままではアイキャッチ画像の周りに白い余白があるため、いまいち納まりがよくありません。

STORKのように、アイキャッチ画像とボックス枠のサイズが同じでキレイなデザインになるよう、次回はボックスのカスタマイズをしていきますのでチェックしてみてください。

2017/11/24