【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連Cocoon

【Cocoon】エントリーカードホバー時に【続きを読む】を表示する

アイキャッチ画像 Cocoon
この記事は約4分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむための情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

今回は、WordPressテーマ THE THOR(ザ・トール)での「エントリーカードホバー時に【続きを読む】を表示する」カスタマイズについてまとめてみました。

WordPressテーマ Cocoon エントリーカード

以前にもWordPressテーマ Cocoonの「エントリーカード」に関するカスタマイズは行ってきました。

現在の「エントリーカード」のスタイルは、下記の様になっています。

【Cocoon】エントリーカードホバー時に【続きを読む】を表示する

「エントリーカード」にホバーしたときのスタイルは、下記の様になっています。

【Cocoon】エントリーカードホバー時に【続きを読む】を表示する

この「エントリーカード」には【続きを読む】の表示が無いので、今回「エントリーカード」ホバー時に【続きを読む】を表示するためのカスタマイズを行いたいと思います。

エントリーカードホバー時に【続きを読む】を表示するカスタマイズ

WordPressテーマ Cocoonでの「エントリーカードホバー時に【続きを読む】を表示する」カスタマイズを行います。

カスタマイズ内容

「エントリーカードホバー時に【続きを読む】を表示する」カスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。

@media screen and (min-width:1260px) { /*PCのみ表示*/
  .list .entry-card-wrap.a-wrap:hover:before,
  .list .related-entry-card-wrap.a-wrap:hover:before { /*エントリーカードホバー時に【続きを読む】を表示*/
    position: absolute;
    width: 210px; /*横サイズ*/
    height: 28px; /*縦サイズ*/
    transform: translate(0,0);
    left: 12px; /*位置決め*/
    bottom: 8px; /*位置決め*/
    content: "Click here to read more!"; /*表示文字列*/
    font-size: 100%; /*フォントサイズ*/
    color: white; /*フォントカラー*/
    font-style: oblique; /*斜体フォント*/
    background-color: #fe619a; /*背景色*/
    text-align: center; /*表示文字列中央位置決め*/
    border-radius: 6px; /*角丸コーナー*/
  }
}
.related-entry-card-wrap.a-wrap:hover:before, /*エントリーカードホバー時に【続きを読む】を表示*/
.entry-card-wrap.a-wrap:hover:before { /*エントリーカードホバー時に【続きを読む】を表示*/
  animation:blink 2.0s ease-in-out infinite alternate!important; /*アニメーション点滅間隔2.0秒設定*/
}
@keyframes blink {
  0% {
    opacity: 0.2;
  }
  81% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

カスタマイズ後のエントリーカード ホバー時

今回のカスタマイズによって、「エントリーカード」のホバー時のスタイルは、次の様になりました。

【Cocoon】エントリーカードホバー時に【続きを読む】を表示する

ちょうど日付の左横にスペースがあったので、このスペースに「Click here to read more!」を表示するようにしてみました。

また、スマートフォンの場合ホバーの意味が無いので、PC表示のみのカスタマイズとなります。

点滅する仕様なので、実際にMASAa.netトップページで「エントリーカード」をホバーさせて動作を確認してみて下さい。

最後に

【続きを読む】の表示は有っても無くても構わないのですが、エントリーカードをホバーしたときに目立つので多少有効性はあるかと思われます。

今回は表示させるスペースがちょうど有ったので、思いつきで簡単なカスタマイズを行ってみました。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

下記バナーからスマホゲームのインストールお願いします!
モリノファンタジー 世界樹の伝説
アルケミストガーデン
最強でんでん
れじぇくろ! ~レジェンド・クローバー~
イース6 オンライン〜ナピシュテムの匣〜
黒い砂漠 MOBILE
グランドサマナーズ
ロードモバイル
駅メモ!-ステーションメモリーズ!

オンラインくじ引き
オンラインくじ引き INAKUJI(いなくじ)INABA.TECH
MASAa.net

コメント