Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

サイドバー見出しを個々の画像にしたい
 
共有:
通知
すべてクリア

[解決済] サイドバー見出しを個々の画像にしたい

11 投稿
2 ユーザー
5 Reactions
2,487 表示
(@ゆみ)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

いつもお世話になっております。

サイドバーの以下の見出しを別々の画像タイトルにしたいです。

  • プロフィール
  • 最新の投稿
  • カテゴリ
  • アーカイブ

可能でしょうか?


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、ゆみ さん

実際にやってみた訳ではないのですが、できそうな気もします。

 

CSSのセレクタを

.sidebar h3

にしてしまうと、全部同じ画像になってしまうので、

 

デベロッパーツールで、見出しのウィジェットに付与されているIDを確認して、

 

例えば、アーカイブだったら、

.sidebar #archives-2 h3 {
背景画像を設定するスタイルのプロパティと値
}

こんな風なセレクタにすれば、個別の画像を設定できそうな気がします。

 

CSSで見出しに背景画像をレイアウトするいくつかのやり方

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

ゆみ さん

関連記事のリンクを貼ってみます。

 

見出し画像ってSEO的にどうなの?クローラーに伝わる見出し画像を解説!

 

画像だけにしてもalt属性を記述しておけば、SEO的には、問題ない、という意見と、やはり、テキストの方が良いという意見と、両方あるみたいですね。

 

私、個人的には、背景画像は使ったとしても、文字は、テキストの方がいいかもしれないな、などと、大した根拠もなく思っています。


   
わいひら reacted
(@ゆみ)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

@leafytree さん、ありがとうございます!

 

教えていただいたみたいに

こんな感じに入れてみたら画像が入りました!

.sidebar#categories-2 h3 {
background-image:url(画像url);
高さ:37ピクセル;
background-repeat:no-repeat;
padding-bottom:0px;
}

でも、画像と文字が重なってしまって…

SEO的にも文字の方がいいんですね。

CSSで文字の色やバーを変えるだけにしようと思います。

ありがとうございました!


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ゆみ さん

投稿者:: @ゆみ

でも、画像と文字が重なってしまって…

このやり方でも、文字の色を透明にするというやり方もできなくはないかと思います。

SEO的にいいかどうかは、私には、わかりません。

 

ちょっと、別のやり方も試してみます。

少しお待ちください。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ゆみ さん

別のやり方でもできないかと思ったのですが、上手くいきませんでした。

 

文字を透明にすれば、重なって見えてしまうのは、回避できるかとは思いますが、やはり、あまりオススメできるやり方ではないような気がします。

 

あとは、私が思いつくのは、Webフォントを使うことぐらいでしょうか。

 

10年ぐらい前までは、見出しに画像を使っているWebサイトを、よく見かけたのですが、最近は、あまり見なくなりました。

 

お役に立てず、すみません。

 


   
(@ゆみ)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

@leafytree さん、ありがとうございます!

やはり文字の方がSEO的にもいいですよね。

お手を煩わせてしまい申し訳ありませんでした。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ゆみ さん

いえいえ、何でも調べてみると、知らないことが わかったりするので、得るものもあるんです。

 

添付いただいた画像から、似たようなフォントを探してみたのですが、どうもピッタリくるものが探せなくて・・

 

このあたりだと、ちょっと似てはいるんですけど・・

FB PoynterSerif RE Italic

 

自分のサイトで試せるみたいです。

TypeSquare Web Font Tryout

 

私は、ここを使ったことは、ないですが・・

 

 


   
わいひら reacted
(@ゆみ)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

@leafytree さま、ありがとうございます!

フォントって難しいですね。

素敵なサイトをご紹介していただきありがとうございます。

 

見出しの背景を画像にしても雰囲気がかわっていいかなーと思っています。

↓こんなのですよね。

background-image: url(画像url);

いろいろ試してみたいと思います!

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ゆみ さん

ですね。

画像であれば、女性ならではのデザインや雰囲気がつくりやすい面もあるかもしれませんね。


   
(@ゆみ)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

@leafytree さん、お世話になっております。

今日、たまたまあるサイトを見て

text-indentで文字を消すことができました。

このやり方はあまりよくないのかもしれませんが…

 

サイドバーの見出しを画像にしたいという方が

他にもいらっしゃるかもしれないので

一応画像を貼っておきます。

 

ちなみにスマホでは画像が表示されず

文字のままでした。


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

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