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

2017/11/28

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

Luxeritasの記事一覧デザインを、今話題のSANGOテーマ風にカスタマイズしていきます。

MEMO記事一覧のデザインで参考にしたのは、今年リリースされたばかりの【SANGO】という有料のテーマ。ゆるふわっとしたあの特徴的なデザインに、今テーマを乗り換える人が続出しているという巷ではちょっと話題のテーマです。

 

同じように、SANGOのイメージでブログカードのカスタマイズもやってますので参考にどうぞ。

カスタマイズのビフォーアフター

まず、カスタマイズをする前の【ビフォー】と、完了後の【アフター】から見てみましょう。

【ビフォー】
SANGO風記事一覧カスタマイズ後

カスタマイズ後
.

【アフター】
SANGO風記事一覧カスタマイズ後

マウスオーバーのアニメーションについても、ふわっと浮き上がるような動きを付けています。

では本家のデザインと見比べてみましょう。

【SANGO本家のデザイン】
SANGOの記事一覧

さすがSANGOテーマはコンテンツの間隔が広めになっており、余白も上手くデザインに取り込まれていますね。

細かな点で違うところはありますが、おおむね似たデザインになっているのではないでしょうか。

カスタマイズする項目

カスタマイズ前から、次の部分を調整・変更しました。

今回のカスタマイズ一覧

  1. ボックス内の余白調整
  2. カレンダーアイコンを時計アイコンへ変更
  3. 日付のカラー変更
  4. 抜粋文削除
  5. カテゴリーのデザイン、位置変更
  6. 記事タイトルの位置とサイズ変更
  7. ふわっと浮き上がるようなアニメーション、マウスオーバー設定
  8. 不要になった罫線削除

記事一覧カスタマイズ内容

 

カスタマイザー設定

Luxeritasの管理画面から、カスタマイズできる項目を設定をしていきます。

なお、CSSでデザインを調整する前に、管理画面から設定できるカスタマイザーの項目を一通り目を通して、調整する予定の項目が見つかればカスタマイザーの方をを優先して設定しています。

下記画像の赤線部分は画像の通りに設定するようにしてください。

メタ情報の表示位置

CHECK

赤い囲いの設定を合わせてください。その他は表示が崩れなければ任意でOKです。

  • 記事タイトル下のメタ情報のカテゴリー表示

場所：管理画面 ＞ 外観 ＞カスタマイズ ＞メタ情報の表示位置

メタ情報の表示位置チェック

コンテンツ領域とサイドバー

CHECK

  • 角の丸み：2

場所：管理画面 ＞ 外観 ＞カスタマイズ ＞コンテンツ領域とサイドバー

Luxeritasコンテンツ領域SANGO用

グリッドレイアウト

CHECK

  • リスト型トップページ：タイル型
  • カテゴリー：タイル型
  • アーカイブ：タイル型
  • タイルの並び順：サムネイル/メタ情報/タイトル
  • 記事一覧の抜粋の文字数と色濃度：0 タイル型
  • ”記事を読む”（タイル型）：空白

場所：管理画面 ＞ 外観 ＞カスタマイズ ＞グリッドレイアウト

LuxeritasグリッドレイアウトSANGO用

Luxeritas設定

CHECK

  • アイコンのフォントのCSS：Font Awesome オリジナルの CSS

場所：管理画面 ＞ Luxeritas ＞CSS

LuxeritasアイコンSANGO用

【Font Awesome】はカレンダーアイコン（投稿日付の横にあるアイコン）を変更するのに必要なのですが、そのままでいいという方はここは触らなくてOKです。

 

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

追記場所についてはこちらの記事で詳しく書いていますので参考にしてください。

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

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


/*記事一覧タイトル*/
div[id^="tile-"] h2, div[id^="card-"] h2 {
    color: #555;
    font-weight: bolder;
    padding-top: 3px;
    padding-right: 13px;
    padding-bottom: 25px;
    padding-left: 13px;
    margin: 0px;
    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;
}
/*記事一覧の日付*/
.meta, .post .meta {
    border-top: 0px;
    padding-top: 13px;
    padding-right: 13px;
    padding-bottom: 0px;
    padding-left: 13px;
    color: #b5b5b5;
    font-weight: bolder;
}
/*記事一覧のカテゴリー*/
span.tags a {
 color: #b5b5b5;
 font-weight: bold;
 text-decoration: none;
}
span.tags a:hover {
 color: #dc143c;
}
#list span.category {
 text-align: center;
 position: absolute;
 top: 13px;
 left: 13px;
 height: 22px;
 border-radius: 14px;
 background: #1bb4d3;
 font-size: 11px;
 padding: 0 10px;
 line-height: 22px;
 vertical-align: middle;
 transition: .3s;
 color: #fff;
}
#list span.category a{
 color: #fff;
 font-weight: bold;
 text-decoration: none;
}
#list .fa-folder:before {
 content: none;
}
#list span.category:hover {
 background-color:silver;
}
/*記事一覧アイキャッチサイズ*/
#list .term img {
    margin-bottom: 0px;
    border-radius: 2px 2px 0px 0px;
    padding: 0px;
}
#list div[id^="tile-"] .term img, #list div[id^="card-"] .term img {
    max-width: 575px;
    width: 100%;
}
/*記事一覧ボックス形状*/
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;
}
div[id^="tile-"] .toc:not(#bottom-area):not(.posts-list-middle-widget):not(#bottom-area):not(.posts-list-under-widget):hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transform: translateY(-5px);
}
/*記事一覧の日付余白*/
div[id^=tile-] .meta {
    margin-bottom: 5px;
}
/*カレンダーアイコン*/
.fa-calendar:before {
    content: "\f017";
    font-size: 115%;
}
/* コンテンツ間余白 */
@media only screen and (min-width:576px){
.container {
    padding: 0 0px;
}}
@media only screen and (max-width:575px){
.container {
    padding: 0 10px;
}}
@media print, (max-width: 991px){
.grid {
    margin: 0px -10px 20px -10px;
}}

サイトのベースカラーに合わせて、カテゴリー枠の色を変えるとより一体感が出るのでおすすめです。

【/*記事一覧のカテゴリー*/】の中に【background: #1bb4d3;】＃の部分からが色の記号ですので、希望の色に数値を変更してください。

SANGOテーマ風カスタマイズまとめ

これまでの内容を実践すれば見た目はこのようになるはずです。SANGOテーマ風記事一覧

右側にマウスのポインターを近づけると、ふわっと浮き上がるような動きになります。
SANGOテーマ風記事一覧マウスオーバー

また、今回はSANGOテーマ風にしましたが、過去記事にはSTORKテーマ風にしたものもありますので参考にしてみてください。

私もCSSは勉強し始めでまだまだ未熟なところもありますが、これからもカスタマイズに取り組んでいく予定なので、興味がある方は今後ともよろしくお願いします。

2017/11/28