WordPress

Cocoonの記事一覧の記事に「more」ってボタン風なものを設置する方法

大人気無料WordPressテーマ「Cocoon」の記事一覧ページの記事に「more」とボタン風のものを表示する方法を紹介します。
今回は実際にボタンというわけではないので、CSSだけで楽に実装してみます。

シラツキ
シラツキ
では、早速やっていくよ!

Cocoonの記事一覧の記事に「more」ってボタン風なものを設置する方法

Cocoonの記事一覧はまずこんな感じ。

こんな記事が並んでいる感じです。
ここに「more」と表示させたいので、CSSでテキストと装飾を加えてみます。

.a-wrap{
	position: relative;
}

/* PCの時 */
a.entry-card-wrap.a-wrap::after{
    content: "more";
    padding: 5px 2%; /* 文字と背景色のスペース */
    font-size: 0.8em; /* 文字サイズ */
    color: #FFF; /* 文字色 */
    line-height: 1;
    display: inline-block;
    background: #000; /* 背景色 */
    border-radius: 30px; /* 角丸 */
    position: absolute;
    bottom: 40px; /* 下からの距離 */
    right: 1.5%; /* 右からの距離 */
}

/* スマホの時 */
@media screen and (max-width: 480px){
	a.entry-card-wrap.a-wrap::after{
		padding: 4px 3%; /* 文字と背景色のスペース */
		font-size: 12px; /* 文字サイズ */
		bottom: 25%; /* 下からの距離 */
	}
}

 

これをCSS追加に入れてみるとこんな感じ!

簡単に「more」を入れることができました!
色や文字サイズ位置などはコメントを入れているので、自分好みの色に変更してみてください!

WordPressの無料神テーマ「Cocoon」をカスタマイズしてぜひ使ってみてね!!

お仕事・ご依頼募集中!!

イラスト制作、webサイト制作、商品のご紹介など様々なお仕事を募集しております! 下記リンクよりお気軽にご連絡ください!

お仕事・ご依頼について