WordPressのプラグイン、Content Viewsはブログや固定ページを、カスタマイズして表示する、評価も高く便利なツールです。ここでは、本サイトで使った時のカスタマイズについて記録しました。
カスタマイズで追加CSSに追加した内容
続きを見るのボタンの色を変更する場合
.pt-cv-readmore {color: #235 !important; background-color: #fff !important;width: 90px !important;border:2px solid #235 !important;}
続きを見るのボタンを表示しない場合
.pt-cv-readmore {display:none!important;}
タイトルフォントの色とフォントサイズ、説明文との間の調整
.pt-cv-title {font-size:18px!important;color:#777!important;margin-bottom:-4px!important;}
リンク色を、この部分に限り変更
.pt-cv-view a,.pt-cv-view a:hover {color:#444!important;}
説明文のフォントサイズ、色をカスタマイズ
.pt-cv-content {font-size:14px;color:#333!important;}
以下は、投稿のアイキャッチ画像が、投稿で設定されたサイズがCVにないため、表示サイズがまちまちになるのを固定するのに必要です
.pt-cv-ifield img {width:250px!important;}
その後、上記の設定ではスマホでの表示に問題が有る事が判明し、デバイスのサイズで切り替える様に、変更しました
@media screen and (min-width :1110px) { .pt-cv-ifield img {width:260px!important;}}
上記のカスタマイズは、このサイトで利用しているCocoonとの相性調整で変更しました。トップの内容自体はContent Viewsのサイトにヒントがあり、他の部分にも適用してゆきました。全ての設定値には !important の記述が必要でした。
最後の画像サイズを指定する、追加CSSがないと、投稿のリストのサムネイル画像のサイズがまちまちになるために追加しました。
注意点
Content Viewsでフィルターを掛けた状態のショートコードを、固定ページに表示した時、表示はフィルターのかかった状態で表示されますが、フィルター状態の個別投稿を表示させた場合に、下部に表示される、前・後の投稿は、全ての投稿が含まれます。Content Viewsの問題なのか、未だ設定方法が有るのか検討中です。
