Cocoonのブログカードをシンプルにカスタマイズしたい！
今回は、「Cocoon」のブログカードをシンプルかつ見やすいブログカードへとカスタマイズしていくやり方をシェアしていきます。
CSSをコピペするだけなので、初心者さんも楽ちんです。
- 「アイキャッチ」と「見出し」だけのシンプルなデザイン
- コピペで出来る簡単カスタマイズ
早速やっていきましょう!(^^)!
目次
ブログカードをシンプルにカスタマイズ
↓まずは、実際のデザインから↓
こんな感じになるようにカスタマイズしていきます。
カスタマイズのデザインについて
- 説明文(抜粋文)を無くした
- 「アイキャッチ」と「見出し」のみのシンプルなデザイン
- マウスホバー時の浮き上がり
個人的に、ごちゃごちゃしている見た目より、シンプルな見た目の方が好きなので、こんな感じです。
シンプルな方が逆に目を引きますからね。
「シンプル イズ ザ ベスト」 です。
カスタマイズのやり方
コピペで出来るので、ささっとやっちゃいましょう。
中身は自分好みにいじってOKです！
①「function.php」にコピペ
以下のコードを「テーマエディタ」の「function.php」にコピー＆ペースト(貼り付け)してください。
// ブログカード
function ltl_get_the_excerpt($post_id){
global $post;
$post_bu = $post;
$post = get_post($post_id);
setup_postdata($post_id);
$output = get_post_meta($post_id,'_aioseop_description',true);//AllinOneSEOから
$post = $post_bu;
return $output;
}
//ブログカードのショートコード
function nlink_scode($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'excerpt'=>""
),$atts));
$id = url_to_postid($url);//URLから投稿IDを取得
$no_image = 'noimageに指定したい画像があればここにパス';//アイキャッチ画像がない場合の画像を指定
//ブログカードのタイトルを取得
if(empty($title)){
$title = esc_html(get_the_title($id));
}
//ブログカードの抜粋文を取得
if(empty($excerpt)){
$excerpt = esc_html(ltl_get_the_excerpt($id));
}
//ブログカードのアイキャッチ画像を取得
if(has_post_thumbnail($id)) {
$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),'medium');
$img_tag = "<img src='" . $img[0] . "' alt='{$title}'/>";
}else{
$img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />';
}
$nlink .='
<div class="blog-card">
<a href="'. $url .'">
<div class="blog-card-thumbnail">'. $img_tag .'</div>
<div class="blog-card-content">
<div class="blog-card-title">'. $title .' </div>
<div class="blog-card-excerpt">'. $excerpt .'</div>
</div>
<div class="clear"></div>
</a>
</div>';
return $nlink;
}
add_shortcode("nlink", "nlink_scode");22行目には、アイキャッチ画像を設定していない時に表示させる画像を設定してください。
勿論、入れなくても問題ないです。
②「style.css」にコピペ
以下のコードを「テーマエディタ」の「style.css」にコピー＆ペースト(貼り付け)してください。
/* ブログカード */
.blog-card {
border: 2px solid #e5e5e5;
word-wrap: break-word;
box-sizing: border-box;
max-width: 100%;
margin: 1em 0;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.blog-card:hover {
cursor: pointer;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
-moz-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.blog-card a {
text-decoration: none;
display: block;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.blog-card a:hover {
color: #333;
background: rgba(235, 235, 235, 0.8);
text-decoration: none;
}
.blog-card-thumbnail {
width: 200px;
display: table-cell;
vertical-align: middle;
}
.blog-card-thumbnail img {
padding: 0;
max-width: 100%;
}
.blog-card-content {
display: table-cell;
vertical-align: middle;
padding: 0.4em;
border-left: #e5e5e5 solid 2px;
}
.blog-card-title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
color: #333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-card-excerpt {
display: none;/*消します*/
}
.blog-card .clear {
clear: both;
}
@media screen and (max-width: 500px) {
.blog-card-title {
font-size: .85em;
}
.blog-card-thumbnail {
width: 160px;
}
}
.blog-card:before {
font-family: FontAwesome;
position: absolute;
padding: 2px 6px;
content: "合わせて読みたい";
background-color: #ff8f00;
color: #fff;
font-size: .8em;
z-index: 1;
}余談ですが、カラーは「カラーコード」といって、「#～」と表します。
カラーコードの参考程度に↓
これで完成です。
お疲れ様です！
まとめ
今回、同じカスタマイズしたい人＆備忘録を兼ねてまとめました。
他にもカスタマイズ方法を紹介しているので、気になる方は是非。
コメント