Cocoon|アイキャッチ画像を記事タイトルの上に移動する

WordPress 無料テーマ『Cocoon』の記事タイトルとアイキャッチ画像の位置(場所)を入れ替えるカスタマイズ方法をご紹介します。

記事のポイント
  • アイキャッチ画像を記事タイトルの上に移動できる
  • 他の Cocoon ブログではほほ見かけない(差別化)
  • コードをコピペするだけでカスタマイズ完了

お気に入りのカスタマイズなので当サイトでも適用中です!

思うように設定できない場合やご要望などもありましたら、お気軽にコメントください。

アイキャッチ画像を記事タイトルの上に移動するカスタマイズのビフォーアフター

パソコン表示

クリックで拡大できます
パソコン表示 Before
パソコン表示 After

スマホ表示

クリックで拡大できます
スマホ表示 Before
スマホ表示 After

アイキャッチ画像を記事タイトルの上に移動するカスタマイズの流れ

ざっくり手順
  1. WordPress 管理画面にアクセスする
  2. 外観】⇒【テーマエディター】をクリックする
  3. カスタマイズ用コードをコピーする
  4. コードをスタイルシート(style.css)に貼り付ける
  5. ファイルを更新】をクリックする

WordPress 初心者の方や Cocoon のカスタマイズに慣れていない方は、下の【手順を詳しく見る(図解)】をクリックしてください。それぞれの手順を画像付きで解説しています。

  • STEP 1
    WordPress 管理画面にアクセスする

    『https://ドメイン名/admin』にアクセスすると、すでにログイン済みの方は【ダッシュボード】が表示されます。

    ログインしていない場合は、ログインページが表示されるので、ユーザー情報を入力後、ログインしてください。

  • STEP 2
    【外観】⇒【テーマエディター】をクリックする

    外観】メニューの上にマウスポインターを合わせ、展開したサブメニューの【テーマエディター】をクリックしてください。

  • STEP 3
    カスタマイズ用コードをコピーする

    コードの右上に表示されている【コピーする】をクリックすれば、内容がクリップボードにコピーされます。

  • STEP 4
    コードをスタイルシート(style.css)に貼り付ける

    コピーしたコードを /*必要ならばここにコードを書く*/ と書かれている行の、すぐ下辺りにコードを貼り付けてください。

    すでに何かしらのコードが記述されている場合は、そのコードの下に貼り付けましょう。

  • STEP 5
    【ファイルを更新】をクリックする

    コードを貼り付けたら、左下の【ファイルを更新】クリックしましょう。これでカスタマイズ完了です!

アイキャッチ画像を記事タイトルの上に移動するカスタマイズ用コード

/************************************
** アイキャッチ画像を記事タイトルの上に移動する
************************************/

/*記事ヘッダーの枠組み*/
.article-header {
	display: flex; /*フレックスボックスレイアウト*/
	flex-direction: column; /*ブロック要素を縦に並べる*/
}

/*アイキャッチの枠組み*/
.eye-catch-wrap {
	order: -1; /*順番*/
	overflow: hidden; /*はみ出した部分を非表示 ※IE対策*/
}

/*アイキャッチ*/
.eye-catch {
	margin-bottom: 0; /*下の余白*/
}

フレックスボックスでは、要素の順番の入れ替えも簡単にできるのでとっても便利です!

ただ、IE だとなぜかアイキャッチ画像の下に広い余白ができてしまったので、overflow: hidden; で無理くり非表示にしました……。

コメント

  1. とむ より:

    はじめまして、コメント失礼しますm(__)m
    ワードプレス初心者(初めてのサイト制作、初めてのWP状態です)。

    こちらの記事のようにタイトルを画像下にしたくチャレンジしてみたのですが、反映がされません。もし何かわかる点があれば教えていただけたら幸いです。

    ・Cocoonを使用
    ・プラグインは下記を使用中
    Contact Form 7
    Easy Google Fonts
    TablePress

    お手数ですが、よろしくお願い致します。

  2. トモトモ より:

    とむさん

    佐藤です。コメントありがとうございます^^

    カスタマイズが反映されないとのことですね。

    プラグインは関係なさそうですので……あと考えられるとすれば、ブラウザやサーバー等での「キャッシュ(高速化の仕組みの一種)」が関係しているかもしれませんね。

    キャッシュが更新されずに古いキャッシュが残っている状態の場合、「設定を変更したのに表面上は更新されていないように見える」ことがあります。

    最近のレンタルサーバーは、デフォルト設定でキャッシュが有効化になっているところもあります(ConoHa WING など)。

    もし ConoHa WING をお使いでしたら「ConoHa WING コントロールパネルプラグイン」の設定から、キャッシュを無効化することも可能ですので試してみてください。

    該当サイトの URL を教えていただければ、当方で確認することも可能です。原因がよくわからない場合は気軽に仰ってください。

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