Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
メインビジュアル画像を投稿ページに表示...
 
通知
すべてクリア

メインビジュアル画像を投稿ページに表示させる方法

6 投稿
3 ユーザー
3 Likes
602 表示
akane365
(@akane365)
投稿: 11
メンバー
Topic starter
 

こんばんは。

素敵なテーマを制作してくださりありがとうございます。

 

タイトルの通りですが、

メインビジュアル画像を投稿ページに表示させる方法

がわからず、色々ググりましたが解決しませんでした。

 

添付写真のように、トップページではメインビジュアルが表示されますが、投稿ページではメインビジュアルが消えてしまいます。

メインビジュアルを全ての投稿ページで表示できるようにするにはどうしたらよいでしょうか。

投稿ページ
トップページ

 

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました, プラグインを停止しても同じことが起こることを確認しました, デフォルトテーマ等、他のテーマでも同じことが起こることを確認しました, 自分で追加したコードに問題がないかチェック済みです, サポート範囲外だということを理解しているが助けが欲しい(有料サポートしてくれる方を探したい)
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.7.0.2
利用中のPHPバージョン
7.4.28
OS
MacOS
利用中のWordPressバージョン
6.1
利用中のサーバー会社
Xサーバー
ブラウザ
Chrome、Safari
利用中のプラグイン一覧

All-in-One WP Migration
WP Multibyte Patch
XO Security
パスワード保護

 
投稿済 : 05/11/2022 11:02 pm
トピックタグ
しらこ
(@96ssbike)
投稿: 826
メンバー
 

メインビジュアルはトップページのみに表示される仕様です。下層ページに表示することはできません。

SWELLカスタマイズ向けの非公式サイトを作りました。何か見つかるかも?→ https://tecchan.jp/swell-tips/
上記以外のWordPress全般向けのナレッジはこちら→ https://tecchan.jp/
疲れたら癒やされてくださいにゃーん (ΦωΦ)

 
投稿済 : 06/11/2022 3:07 am
and skillsharejp reacted
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

添付頂いているようなデザインを実現するのであれば、メインビジュアルは使わずに普通にヘッダーの背景画像をCSSで調整すればいいかもしれません!

SWELL開発者です。

 
投稿済 : 06/11/2022 4:33 pm
akane365
(@akane365)
投稿: 11
メンバー
Topic starter
 

@96ssbike しらこさま、こんばんは!^^

教えて頂きましてありがとうございます。

 
投稿済 : 06/11/2022 7:26 pm
akane365
(@akane365)
投稿: 11
メンバー
Topic starter
 

@loos_ryoさま、こんばんは!^^

ご教示頂きましてありがとうございます✨

試してみます😊

 
投稿済 : 06/11/2022 7:28 pm
reacted
akane365
(@akane365)
投稿: 11
メンバー
Topic starter
 

こんばんは。

先日は質問させて頂きましてありがとうございました。

 

アドバイス頂いた通り、メインビジュアルではなく、ヘッダーの背景画像を調整し編集しようと思いChromeの検証で色々ためしました。

 

すると、下記の通り記述するとヘッダー画像が表示されました。

ーーーーーーーーーーーーーーーーーーーーーーーーー

●HTML

HTMLの

<div class="l-container l-header__inner"></div>

にclassのdisp-imgを追加して、下記のように記述

<div class="disp-img l-container l-header__inner"></div>

●CSS

CSSに下記のコードを追加

.disp-img {
background-image: url( );
background-repeat: no-repeat;
width: auto;
height: 200pX;
}

ーーーーーーーーーーーーーーーーーーーーーーーーー

 

そして、実際にワードプレスにコードを追加してみました。

 

●追加CSS

.disp-img {
background-image: url( );
background-repeat: no-repeat;
width: auto;
height: 200pX;
}

 

上記のように、追加CSSの欄には、コードを貼り付けられましたが、

HTMLにclassを追加しようと思ったものの、どこに記述すればいいかわかりませんでした。

 

外観→カスタマイズ→高度な設定のbodyタグ開始直後に出力するコードに下記のコードを追加しましたが、添付画像のように、ヘッダーロゴが下にずれてしまいます。

<div class="disp-img l-container l-header__inner"></div>

 

添付画像のように、Chromeの検証ツールで見ると、下記のコードが(index)というファイルに書かれていますが、サーバーでこのファイルを探しましたがどこにも見つかりませんでした。

<div class="l-container l-header__inner"></div>

①ヘッダー画像が表示された
③indexファイルの場所が分からない
②ヘッダーとヘッダーロゴがずれる

 

 

このファイルの場所を教えて頂けますと大変ありがたいです。

 

 

This post was modified 1年前 by akane365
 
投稿済 : 13/11/2022 9:06 pm
共有: