サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年6月27日 10:20
いつもお世話になっております。
サイドバーの以下の見出しを別々の画像タイトルにしたいです。
- プロフィール
- 最新の投稿
- カテゴリ
- アーカイブ
可能でしょうか？
2020年6月27日 11:24
前略、ゆみ さん
実際にやってみた訳ではないのですが、できそうな気もします。
CSSのセレクタを
.sidebar h3
にしてしまうと、全部同じ画像になってしまうので、
デベロッパーツールで、見出しのウィジェットに付与されているIDを確認して、
例えば、アーカイブだったら、
.sidebar #archives-2 h3 {
背景画像を設定するスタイルのプロパティと値
}
こんな風なセレクタにすれば、個別の画像を設定できそうな気がします。
わいひら reacted
2020年6月27日 12:02
ゆみ さん
関連記事のリンクを貼ってみます。
見出し画像ってSEO的にどうなの？クローラーに伝わる見出し画像を解説！
画像だけにしてもalt属性を記述しておけば、SEO的には、問題ない、という意見と、やはり、テキストの方が良いという意見と、両方あるみたいですね。
私、個人的には、背景画像は使ったとしても、文字は、テキストの方がいいかもしれないな、などと、大した根拠もなく思っています。
わいひら reacted
Topic starter
2020年6月27日 12:09
@leafytree さん、ありがとうございます！
教えていただいたみたいに
こんな感じに入れてみたら画像が入りました！
.sidebar＃categories-2 h3 {
background-image：url（画像url）;
高さ：37ピクセル;
background-repeat：no-repeat;
padding-bottom：0px;
}
でも、画像と文字が重なってしまって…
SEO的にも文字の方がいいんですね。
CSSで文字の色やバーを変えるだけにしようと思います。
ありがとうございました！
2020年6月27日 12:29
@ゆみ さん
でも、画像と文字が重なってしまって…
このやり方でも、文字の色を透明にするというやり方もできなくはないかと思います。
SEO的にいいかどうかは、私には、わかりません。
ちょっと、別のやり方も試してみます。
少しお待ちください。
2020年6月27日 13:07
@ゆみ さん
別のやり方でもできないかと思ったのですが、上手くいきませんでした。
文字を透明にすれば、重なって見えてしまうのは、回避できるかとは思いますが、やはり、あまりオススメできるやり方ではないような気がします。
あとは、私が思いつくのは、Webフォントを使うことぐらいでしょうか。
10年ぐらい前までは、見出しに画像を使っているWebサイトを、よく見かけたのですが、最近は、あまり見なくなりました。
お役に立てず、すみません。
Topic starter
2020年6月27日 13:12
2020年6月27日 17:17
@ゆみ さん
いえいえ、何でも調べてみると、知らないことが わかったりするので、得るものもあるんです。
添付いただいた画像から、似たようなフォントを探してみたのですが、どうもピッタリくるものが探せなくて・・
このあたりだと、ちょっと似てはいるんですけど・・
自分のサイトで試せるみたいです。
私は、ここを使ったことは、ないですが・・
わいひら reacted
Topic starter
2020年6月27日 17:32
@leafytree さま、ありがとうございます！
フォントって難しいですね。
素敵なサイトをご紹介していただきありがとうございます。
見出しの背景を画像にしても雰囲気がかわっていいかなーと思っています。
↓こんなのですよね。
background-image: url(画像url);
いろいろ試してみたいと思います！
リフィトリー reacted
2020年6月27日 17:37
@ゆみ さん
ですね。
画像であれば、女性ならではのデザインや雰囲気がつくりやすい面もあるかもしれませんね。
Topic starter
2020年6月30日 12:04
@leafytree さん、お世話になっております。
今日、たまたまあるサイトを見て
text-indentで文字を消すことができました。
このやり方はあまりよくないのかもしれませんが…
サイドバーの見出しを画像にしたいという方が
他にもいらっしゃるかもしれないので
一応画像を貼っておきます。
ちなみにスマホでは画像が表示されず
文字のままでした。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。