Cocoonの引用と新着記事カスタマイズ

Cocoonの引用と新着記事カスタマイズ

こちらの記事もよろしくおねがいします。

カスタマイズ

最近、ブログ記事を書いて思ったのですが、引用も一つのアクセントにしたくてカスタマイズをしたいなと思いました。

画像1

これ目立ちますよね。

通常はグレーだと思いますが、カスタマイズをするとこのようになります。

ちょっと立体感をだしました。

Cocoon愛用者は、ろこ氏のスキンを使う人が多いので、記事にも自然に馴染むと思いますよ。どうぞお使いください

Cocoon Child: スタイルシート (style.css)

/* □■----------------------------------------------------
/   引用
----------------------------------------------------■□ */
blockquote {
 position: relative;
 padding: 5px 15px 5px 55px;
 box-sizing: border-box;
 font-style: italic;
 color: #464646;
 background-color: #fdfdfd;
 border: none;
 border-radius: 4px;
 border-bottom: 3px ridge #6fc7e1;
 box-shadow: 1px 4px 12px rgba(88, 122, 177, .3);
}

blockquote:before {
 display: inline-block;
 position: absolute;
 top: 0;
 left: 8px;
 width: 38px;
 height: 30px;
 text-align: center;
 content: "\f10d";
 font-family: FontAwesome;
 color: #FFF;
 font-size: 18px;
 line-height: 30px;
 background: #6fc7e1;
 font-weight: 900;
}

blockquote:after {
 content: '';
 position: absolute;
 left: 8px;
 top: 30px;
 height: 0;
 width: 0;
 border-left: 19px solid #6fc7e1;
 border-right: 19px solid #6fc7e1;
 border-bottom: 10px solid transparent;
}

blockquote p {
 position: relative;
 padding: 0;
 margin: 10px 0;
 z-index: 3;
 line-height: 1.7;
}

blockquote cite {
 display: block;
 text-align: right;
 color: #888888;
 font-size: 0.9em;
}

たぶんネットでも転がってそうな感じですけど、このデザインはオリジナルとなります。ご自由にお使いください

あと、新着記事のキャプションの変更はコチラです

Cocoon Child: テーマのための関数 (functions.php)

このカスタマイズでは、新着記事をトピックにしています。

※トピックを変更してください

/********************************
** PHP
*********************************/
//フロントページタイプの新着記事キャプションの変更
add_filter('new_entries_caption', function ($caption){
 return 'トピック'; //←変更する文字列
});

ネットのカスタマイズ記事は古い情報なので、コーディングによってはサイトが重くなります。

その理由に、WordPressは常にupdateをしているため、古いコードだと相まって反応が鈍る感じ

この界隈特有の専門用語は使いたくないので、説明すると長くなりますけど、ホント気をつけてください。

あと、よければ私のサイトにもきてほしいです

https://moguro.site/

※全体のデザインより、各パーツを楽しんでもらえたらと思います。

ツイッターのフォロワーさん限定ですが、ネットで転がっているカスタマイズ情報ならコード書き直しますので、お気軽にリプください。

最後までご高覧いただきまして有難うございます。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
月間2万PV映画ブログサイトを運営中です!! ブログはこちら >> https://moguro.site/