【Cocoon】インデックスの見直しとカスタマイズ

アイキャッチ画像 Cocoon
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPress blog site specialized in PC produce by masaa
このMASAa.netでは、ソフトウェア(Windows)やハードウェア(自作PC)、WordPressテーマのカスタマイズなどパソコン関連の情報を掲載しています。

今回は、WordPressテーマ Cocoonでの「インデックス」の見直しとカスタマイズについてまとめてみました。

WordPressテーマ Cocoon インデックス

これまで幾つかのWordPressテーマ Cocoonでの「インデックス」に関するカスタマイズを行ってきました。

先日も「【Cocoon】ホバー時のインデックスアイキャッチ画像のカスタマイズ」のエントリー記事を掲載しています。

【Cocoon】ホバー時のインデックスアイキャッチ画像のカスタマイズ
WordPressテーマ Cocoonの「ホバー時のインデックスアイキャッチ画像」のカスタマイズについてまとめてみました。今回のカスタマイズでは透明度のエフェクト処理に加えて画像拡大のエフェクト処理を追加しました。

またそれ以外にも、過去に

【Cocoon】インデックスの記事説明のカスタマイズ
WordPressテーマ Cocoonのインデックスについては過去にも幾つかカスタマイズを行ってきました。今回はそのインデックスの中の記事説明(日付とコメント数含む)に対して、フォント強調の処理を施してみました。
【Cocoon】インデックスホバー時のタイトルのカスタマイズ
WordPressテーマ Cocoonのインデックスについては先日にもカスタマイズを行ってきました。今回そのインデックスをホバーしたときのタイトルに対して少しだけ変化(タイトルに対してサイトカラーのピンク枠線を表示するデザイン)を付けてみました。
【Cocoon】インデックスのタイトルのカスタマイズ
WordPressテーマ Cocoonのインデックスについては過去にもカスタマイズを行ってきました。今回そのインデックスの中のタイトルについて「見出し1タイトル(h1タグ)」と同じく、ピンクで左に縦線を入れたデザインとしてみました。
【Cocoon】インデックスをカスタマイズする
WordPressテーマ Cocoonの【インデックス(カードタイプ:縦型カード2列)】をカスタマイズしてみました。主なカスタマイズの内容は、インデックスの枠を表示し、マウスカーソルをホバーすると枠を強調するものとなっています。

のエントリー記事を掲載してきました。

そんな有るとき自分のスマートフォンを横置きにして、このブログサイトMASAa.blogを見てみると違和感を感じました。

自分の場合、通常スマートフォンは縦置き固定の設定をしているため横置きにして見ることがほとんどありません。

その違和感と言うのは、アイキャッチ画像の下の隙間です。

【Cocoon】インデックスの見直しとカスタマイズ

パソコンはもちろんスマートフォンを縦表示の場合は、問題無くアイキャッチ画像が表示されています。

【Cocoon】インデックスの見直しとカスタマイズ

【Cocoon】インデックスの見直しとカスタマイズ

隙間だけなので特に問題は無いのですが、一部のスマートフォンやタブレットでこのような現象が発生するようです。

このまま放置しても良かったのですが、少し調べてみたところ先日の「【Cocoon】ホバー時のインデックスアイキャッチ画像のカスタマイズ」から発生しているようです。

改善しようと色々と試してみたのですが、結局アイキャッチ画像を枠内で拡大する場合に発生してしまい解決することができません。

しかし、アイキャッチ画像下の隙間がどうしても気になるので、WordPressテーマ Cocoonでの「インデックス」を見直して改めてカスタマイズしてみたいと思います。

インデックスのカスタマイズ

WordPressテーマ Cocoonの「インデックス」のカスタマイズを行います。

カスタマイズ内容

「インデックス」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、以前のカスタマイズ箇所【記事一覧(インデックス)のカスタマイズ】に上書きします。

過去にカスタマイズを行っていない場合は、今回のカスタマイズ内容を追記します。

/************************************
** ●記事一覧(インデックス)のカスタマイズ
************************************/
.main{
  border:1px solid #fe619a!important; /*コンテンツ枠線設定(インデックスページ除く)*/
}
.home main, .archive main{
  background-color: transparent;
  margin-top: 0px; /*記事一覧上マージン*/
  padding-top: 1px; /*記事一覧下マージン*/
  border: none!important;
}
.entry-card-wrap{ /*エントリーカード設定*/
  transition: all 0.5s ease;
  margin-bottom: 1em!important;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px rgba(254,97,154,1);*/
}
.entry-card-thumb-image.card-thumb-image.wp-post-image{ /*アイキャッチ画像設定*/
  max-width: 376px; /*デフォルトアイキャッチ画像376px*/
  max-height: 212px; /*デフォルトアイキャッチ画像212px*/
  margin:auto;
  border-radius: 6px; /*角丸コーナー*/
  box-shadow: 5px 5px 3px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
  transition-duration: 0.7s; /*アニメーション0.8*/
}
.entry-card-wrap.a-wrap:hover .entry-card-thumb-image.card-thumb-image.wp-post-image { /*アイキャッチ画像ホバー時エフェクト処理*/
  transform: scale3d(1.02,1.05,1); /*エフェクト処理*/
  transition-duration: 0.7s; /*アニメーション*/
  box-shadow: 5px 5px 3px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
}
@media screen and (max-width: 480px){ /*スマホ表示設定*/
  .entry-card-thumb-image.card-thumb-image.wp-post-image{ /*アイキャッチ画像設定*/
    box-shadow: none; /*シャドー(影)*/
  }
  .entry-card-wrap.a-wrap:hover .entry-card-thumb-image.card-thumb-image.wp-post-image { /*アイキャッチ画像ホバー時エフェクト処理*/
    box-shadow: none; /*シャドー(影)*/
  }
}
.entry-card-wrap:hover{ /*エントリーカード ホバー時設定*/
  box-shadow: 0px 0px 10px 3px rgba(254,97,154,1);
  text-decoration: none!important;
  background-color: white;
}
.entry-card-wrap:hover .entry-card-title{ /*エントリーカード ホバー時タイトル設定*/
  box-shadow: 0px 0px 3px 3px rgba(254,97,154,1);
  background: -webkit-repeating-linear-gradient(90deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
  background: repeating-linear-gradient(90deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
  color: #000; /*文字色*/
}
.entry-card-wrap.a-wrap:hover{ /*エントリーカード ホバー時設定*/
  background-color: white;
}
.entry-card:hover{ /*エントリーカード ホバー時設定*/
  background-color: white;
}
.entry-card-snippet.card-snippet.e-card-snippet{
  font-size: 14px; /*フォントサイズ*/
  margin-bottom:22px; /*説明文と日付間の余白*/
  color: #333;
  font-weight: 600; /*文字強調*/
  line-height: 1.6; /*行間設定*/
}
.entry-card-title{ /*タイトル設定*/
  margin-top: 10px; /*アイキャッチ画像とタイトル間の余白*/
  margin-bottom: 12px; /*タイトルと説明間の余白*/
  line-height: 1.4; /*行間設定*/
  color: #333; /*タイトルの色*/
  padding: 6px 4px 6px 5px; /*上下左右空白*/
  background: -webkit-repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
  background: repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
  border-left: 8px solid #fe619a; /*左ラインの太さとカラー*/
  border-radius: 3px; /*角丸コーナー*/
}
@media screen and (max-width: 1030px){ /*タイトル スマホ表示設定*/
  .entry-card-title{
    font-size: 14px; /*スマホでのフォントサイズ*/
    margin-top: 5px; /*アイキャッチ画像とタイトル間の余白*/
    line-height: 1.4; /*スマホでの行間*/
  }
}
.e-card-info{ /*日付表示設定*/
  color: #333; /*日付の色*/
}

 

なお、先日の「【Cocoon】ホバー時のインデックスアイキャッチ画像のカスタマイズ」のエントリー記事で実施したカスタマイズ箇所【記事一覧(インデックス)のアイキャッチ画像をホバー時拡大する設定】は削除します。

【Cocoon】ホバー時のインデックスアイキャッチ画像のカスタマイズ
WordPressテーマ Cocoonの「ホバー時のインデックスアイキャッチ画像」のカスタマイズについてまとめてみました。今回のカスタマイズでは透明度のエフェクト処理に加えて画像拡大のエフェクト処理を追加しました。

カスタマイズ後のインデックス

今回のカスタマイズによって、「インデックス」は次の様になりました。

【Cocoon】インデックスの見直しとカスタマイズ

【Cocoon】インデックスの見直しとカスタマイズ

今回のカスタマイズでは、ホバー時のアイキャッチ画像の拡大方法を変更しました。

ホバー時のアイキャッチ画像を、通常サイズの枠を超えて少しだけ大きくなるようにしてみました。

それに伴いアイキャッチ画像のアイキャッチ画像のシャドー(影)を少し大きくしました。

但し、スマートフォン等の画面が小さい場合はアイキャッチ画像のシャドー(影)を表示しないようにしました。

また、ホバー時にタイトルの背景の変更とフォント色を少し濃くしました。

その他に文字間隔などの調整なども行っています。

最後に

今回のカスタマイズでWordPressテーマ Cocoonでの「インデックス」を全面的に見直しました。

スマートフォンやタブレットで発生していたアイキャッチ画像下の隙間も発生しなくなりました。

【Cocoon】インデックスの見直しとカスタマイズ

この「インデックス」の特徴は、インデックス上のどこかにホバーすることで、アイキャッチ画像の拡大やタイトルが変化するようになっているので、より一体感のある「インデックス」となっているのが特徴です。

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール