スポンサーリンク

【Cocoon】投稿の画像をページの右下に固定表示する(first-of-type疑似クラスを使用した超簡易版)

Cocoonカスタマイズ

phpやcssファイルのソース編集などを行わずに投稿の編集画面だけを使って画像をページの右下に固定表示するカスタマイズです。

かなり簡易的な方法のため、細かい調整が必要な可能性がありますが、カスタマイズのヒントの一例としてご紹介します。

スポンサーリンク

ページ用のカスタムCSSを使ってスタイルを変更する

Cocoonでは編集画面の下にページ独自のスタイルシートやJavaScriptを記述できるエリアがあり、これを使ってページごとの簡易なカスタマイズを行うことができます。

今回はこのエリアにCSSを追加して画像の表示を変更します。

投稿の編集画面を開き、画面下の [カスタムCSS] ボックスに以下のコードを記述します。

.entry-content figure:first-of-type {
  position: fixed;
  bottom: 1em;
  right: 1em;
  width: 300px;
  z-index: 99999;
}

ページを保存して公開すると、このページに指定された「最初の画像」が画面の右下に固定表示されるようになります。

スポンサーリンク

CCSS3のfirst-of-type疑似クラス

このカスタマイズでは、スタイルシートのfirst-of-typeという疑似クラスを使用しています。

これは、「最初の〇〇要素」を選択することができるスタイルシートで、今回のように「ページの最初に配置された画像(figure要素)だけの表示を変更したい」といった場合に使用することができます。

今回の例では画像の表示場所や大きさは固定表示としているため、スマートフォンやタブレットなど、画面の大きさによっては意図にそぐわない表示になってしまう可能性があるほか、要素の重なりを避けるためのz-indexも99999と乱暴に指定しまっているため、厳密にはあまり行儀のよいコードではないかもしれません。

スタイルの各指定を変更することで表示位置やサイズなどが調整できますので、参考までにご自身のサイトのレイアウトなどに合わせて調整してみてください。

WordPress&Cocoonのお悩みにお答えします

クラベルではWordPressのブログサイト構築、Cocoonテーマの導入やカスタマイズに関するご相談を承っております。

お困りの方はぜひ一度お問い合わせください。また、現在ココナラをつかったサービス出品も始めてみました。お悩みおひとつの解決からお手軽にお申込みできますので、こちらもぜひあわせてご覧ください。

ワードプレス&コクーンのお悩み何でもお答えします 現役エンジニアによるWordPress&Cocoon制作支援
Cocoonカスタマイズ WordPress Web開発
お読みいただきありがとうございました。
最後に「いいね!」をいただけると大変励みになります。
最新情報をお届けします。
クラベルをフォローする
スポンサーリンク
この記事を書いた人
クラベル

Webサイト構築、Wordpressのカスタマイズやphpプログラミングなどやってます。ブログは省エネ運営中。Cocoonカスタマイズやゲーム、ガジェットの話題など。

クラベルをフォローする
クラベル

コメント

タイトルとURLをコピーしました