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

2017/11/26

Luxeritasの記事一覧をSTORK風にカスタマイズアイキャッチ

 

無料のワードプレステーマ【Luxeritas】の記事一覧を【STORK】風にカスタマイズしました。あくまで”それっぽく”、STORKの雰囲気が味わえればよしというスタンスです。

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

 

前回からの続きなので、まだ読まれていない方はこちらの記事もチェックしてみてください。

カスタマイズする項目

前回はカテゴリーの表示を記事一覧の枠の右上に移動させました。今回は、記事一覧の全体をよりSTORK風のオシャレなイメージに近づけていきます。

今回のカスタマイズ一覧

  1. アイキャッチ周りの余白調整
  2. アイキャッチ画像のサイズ・マウスオーバー設定
  3. 不要な線を消去
  4. 更新日付けの位置・色・余白調整
  5. 記事タイトルの位置・色・余白・サイズを調整
  6. 抜粋文の余白調整

ストークへのカスタマイズ一覧

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

下記ソースをCSSの最下部へコピペしてください。

前回の分と合わせて一つのカスタマイズなので、コピぺする場合は前回紹介したソースも合わせて張り付けるようにお願いします。

子テーマCSSの置き場所と、追記場所についてはこちらの記事で詳しく書いていますので参考にしてください。


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


/*トップアイキャッチ余白*/
#list .term img {
    margin-bottom: 0px;
    border-radius: 0px;
    padding: 0px;
}
/*レスポンシブアイキャッチ余白*/
#list div[id^="tile-"] .term img, #list div[id^="card-"] .term img {
    max-width: 575px;
    width: 100%;
}
/*日付余白*/
div[id^=tile-] .meta {
    margin-bottom: 10px;
}
/*抜粋文45文字余白*/
#list div[id^="tile-"] .excerpt {
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
}
/*記事一覧ボックス形状とマウスオーバー*/
div[id^="tile-"] 
.toc:not(#bottom-area):not(.posts-list-middle-widget):not(#bottom-area):not(.posts-list-under-widget) {
    padding: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .13);
    border: none;
    transition: .3s;
    overflow: hidden;
}
div[id^="tile-"] .toc:not(#bottom-area):not(.posts-list-middle-widget):not(#bottom-area):not(.posts-list-under-widget):hover {
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
/*日付余白*/
.meta, .post .meta {
    border-top: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 10px;
    color: #505454;
    font-weight: bolder;
}
/*記事一覧タイトル*/
div[id^="tile-"] h2, div[id^="card-"] h2 {
    color: #505454;
    font-weight: bolder;
    margin-top: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-size: 18px;
}
@media only screen and (max-width:575px){
div[id^="tile-"] h2, div[id^="card-"] h2 {
    font-size: 17px;
}}
.entry-title a {
    display: block;
}

カスタマイザー設定

管理画面から、Luxeritasのカスタマイザーでの設定を確認しておきます。

場所：管理画面 ＞ 外観 ＞カスタマイズ ＞ アニメーション

こちらはマウスがアイキャッチ画像の上にきたときのアニメーション設定です。STORK風にいくなら【ズームイン】にしましょう。
カスタマイザー設定2

 

こちらは記事一覧設定です。今回は【タイル型】を選んでください。最大列数は1～4どれでも構いません。
カスタマイザー設定3

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

STORK風に記事一覧をカスタマイズアフター

なかなか上手くいったのではないでしょうか。マウスの矢印を枠の中に持って行くことでアニメーションする”マウスオーバー”の動きも近い仕上がりになりました。

ちなみに、本家と比べてみるとフォントサイズが若干違いますが、個人的には枠が小さく収まる方が好みなのでこのままにしています。

【本家】
STORK本家の記事一覧

STORK風のカスタマイズまとめ

2回に渡ってLuxeritasをSTORK風にするためカスタマイズしてきましたが、いかがでしたでしょうか。

STORKのデザインは素敵なのですが、人気がありすぎて人と被るのも嫌。だから、全部ではなくて、ちょっとだけSTORKっぽくしてみたかった、というところからスタートしたこの企画。

最初は『見出し』や『サイトカラー』をSTORK風にするだけで満足していたのですが、知識がついていくにしたがって「これも出来るんじゃないか」という風にどんどん貪欲になり、Luxeritasをカスタマイズしていく中で、STORKから色んなアイディアやヒントをたくさん得ることが出来ました。

0→1は知識がないと難しいですが、1→2はベースはあるので後は数値などを触るだけでOK。ここで紹介したソースをそのまま使うのもいいのですが、自分流にアレンジしてオリジナルデザインにも簡単に出来ますので、この機会に是非チャレンジしてみてはいかがでしょうか。

2017/11/26