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

【Cocoon】ブログカード内のファビコンとサイトURLを上に移設する

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

WordPressテーマ Cocoon

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

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

今回は、WordPressテーマ Cocoonでの「ブログカード内のファビコンとサイトURLを上に移設する」カスタマイズについてまとめてみました。

WordPressテーマ Cocoon ブログカード

WordPressテーマ Cocoonの「ブログカード」に関するカスタマイズについては、過去3回行ってきました。

【Cocoon】ブログカードにワンポイント表示追加のカスタマイズ
WordPressテーマ Cocoonでの「ブログカードにワンポイント表示追加」のカスタマイズについてまとめてみました。今回「ブログカード」の右下に〝⊿〟の表示、ピックアップ記事の「ブログカード」左下表示のサイト名を非表示など行いました。
【Cocoon】ブログカード/関連記事/次前の記事をホバー時に浮かす
WordPressテーマ Cocoonで「ブログカード/関連記事/次前の記事をホバー時に浮かす」カスタマイズについてまとめてみました。今回は【ブログカード】【関連記事】【次の記事】【前の記事】に対しホバーした時に浮かす処理を加えました。
【Cocoon】ブログカードのアイキャッチ画像のカスタマイズ
WordPressテーマ Cocoonの「ブログカードのアイキャッチ画像」のカスタマイズについてまとめてみました。今回のカスタマイズでは「ブログカードのアイキャッチ画像」に対して、画像のコーナーにアールとシャドウ(影)を付けてみました。

現在の「ブログカード」のスタイルは、次の様になっています。

【Cocoon】ブログカード内のファビコンとサイトURLを上に移設する

前回の「ブログカードにワンポイント表示追加のカスタマイズ」において気になる点がありました。

それは、「ブログカード」内のアイキャッチ画像下に、ファビコンとサイトURLが表示されている点です。

このファビコンとサイトURLですが、自分的にはアイキャッチ画像上に表示してくれた方がバランスが良く感じます

そこで、「ブログカード」内のアイキャッチ画像下のファビコンとサイトURLを、アイキャッチ画像上に移設させたいと思います。

ブログカード内のファビコンとサイトURLを上に移設するカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「ブログカード内のファビコンとサイトURLを上に移設する」カスタマイズを行います。

カスタマイズ内容

「ブログカード内のファビコンとサイトURLを上に移設する」カスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を最後に追記する形でOKです。

/************************************
** ■ブログカード サイトファビコン+URLを上に移設
************************************/
.main .blogcard-footer.internal-blogcard-footer.cf,
.main .blogcard-footer.external-blogcard-footer.cf {
  position: absolute;
  top: 3px;
}
@media screen and (max-width: 768px) { /*iPad縦表示対応*/
  .main .blogcard-footer.internal-blogcard-footer.cf,
  .main .blogcard-footer.external-blogcard-footer.cf {
    top: 2px;
  }
}
.main .blogcard.internal-blogcard.ib-left.cf,
.main .blogcard.external-blogcard.eb-left.cf {
  padding-top: 26px;
}
@media screen and (max-width: 768px) { /*iPad縦表示対応*/
  .main .blogcard.internal-blogcard.ib-left.cf,
  .main .blogcard.external-blogcard.eb-left.cf {
    padding-top: 22px;
  }
}

/************************************
** ■ブログカード フォントサイズ調整
************************************/
.main .blogcard-title {
  font-size: 16px!important; /*フォントサイズ*/
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .main .blogcard-title {
    font-size: 18px!important;
  }
}
@media screen and (max-width: 410px){ /*iPhone8縦表示対応*/
  .main .blogcard-title {
    font-size: 12px!important;
  }
}
.main .blogcard-snippet.internal-blogcard-snippet,
.main .blogcard-snippet.external-blogcard-snippet {
  font-size: 14px!important; /*フォントサイズ*/
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .main .blogcard-snippet.internal-blogcard-snippet,
  .main .blogcard-snippet.external-blogcard-snippet {
    font-size: 16px!important;
  }
}
@media screen and (max-width: 410px){ /*iPhone8縦表示対応*/
  .main .blogcard-snippet.internal-blogcard-snippet,
  .main .blogcard-snippet.external-blogcard-snippet {
    font-size: 10px!important;
  }
}

カスタマイズ後のブログカード

今回のカスタマイズによって、「ブログカード」のスタイルは、次の様になりました。

【Cocoon】ブログカード内のファビコンとサイトURLを上に移設する

今回のカスタマイズ内容は、「ブログカード」内のアイキャッチ画像下のファビコンとサイトURLを、アイキャッチ画像上に移設させました。

また、合わせてフォントサイズの調整も行いました。

最後に

ファビコンとサイトURLがアイキャッチ画像の下に表示するか上に表示するかは、好みの問題です。

前回、「ブログカードにワンポイント表示追加のカスタマイズ」を行ったためアイキャッチ画像下のすき間が気になっていました。

今回ファビコンとサイトURLをアイキャッチ画像の上に移設したことで、そのすき間も気にならなくなりました。

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

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

下記バナーからスマホゲームのインストールお願いします!
ザ・グランドマフィア
少女ウォーズ
れじぇくろ! ~レジェンド・クローバー~
イース6 オンライン〜ナピシュテムの匣〜
極道のエデン
リネージュ2M
魔剣伝説
超次元彼女
ライフアフター
覇王の天下-戦略シミュレーション
グランドサマナーズ
The King of Fighters '98UM OL

MASAa.net

コメント