サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年1月9日 22:06
はじめまして。
cocoonという素晴らしいテーマがあると知り、流されるがままブログを作ってみたのですが右も左も分からない状態です。cssやhtml知識も全くないので、ズレた質問だったらすみません。
自分はひとつのブログでひろい分野のことを書きたいと思っています（いわゆる雑記ブログ）。
そこで、
https://beginner-net.com/1368.html
を参考にしてh1～h6にバリエーションをもたせて、各ブログのジャンルごとに見出しタグの種類と色を変えたいと考えています。（例えば、ライフハックものだったらオレンジ、読書系だったら初期設定の灰色）
h１はタイトルになるのでそのままにし、h2、h4、h6をオレンジにしてライフハックの記事に使用し、h３、h5を読書系に使うとします。
その場合、ライフハックものを書くとしたらh1→h2→h4→h6という順番で見出しタグを使用することになり、読書ものを書くとしたらh1→h3→h5という順番で見出しタグを使用することになります。
見出しタグについて調べていると「h1はふたつ使うとバグる（自分は二つ使う予定がないので大丈夫ですが）」だとか「SEO的にh1～h6は順番に使用すべき」と書いてある記事を見かけました。
見出しタグの見た目的に言えば順番通りに使うべきだと思いますが、自分はアレンジするつもりなのでそこはクリアです。
しかし、googleがブログを評価する際、プログラミング?的にh1～h6を順番に使ってなければならないとなると、自分の使い方はSEO的に不利になってしまいます。
そこで質問なのですが、Googleがそのページを評価するときに、h1～h6を順番通りに使っていないと悪い評価になる、なんてことはあるのでしょうか？
それともh1～h6はwordpressで記事を書く際の便宜上の名であって、そもそも順番は関係ないのでしょうか？(例えば、見た目は悪くなるがh1→h6→h3の順番で使おうがなんら問題がないだとか)
分かりにくい質問で申し訳ありません。よろしくお願いいたします。
2019年1月9日 23:13
こんばんは。
基本的に見出しデザインを変えたい場合は、
①見出しごとにclassを付けるか、②body要素にカテゴリーidのclassがあるので、カテゴリのclassで分岐させるとスマートです。
①の場合のCSS
.article h2.orange{
/*見出しがオレンジになるようにcssを書く*/
}
①の場合のHTML
<h2 class="orange">見出し</h2>
などですが、やはりHTMLとCSSの基礎知識は必要です。スキルを上げてからでもいいと思います。
あと、最初はh2がないと目次が付かなかったと思います。
▼SEOの見解はこちら
h1はふたつ使うとバグる
h1を2つ作るのは、問題ありません。（正式な使い方です）ただし、1つの記事に2つのトピックスを書く必要性がないので、だいたいみんなh1は、1つしか置きません。検索ユーザーにとっても、1つの記事に1つのトピックスが分かりやすいと良いと思います。
SEO的にh1～h6は順番に使用すべき
見出し構造が違っても、Googleから悪い評価になることはありません。でも順番にしない理由はあまりないので、みんな順番に書いていますね。（目次をコントロールしたいとかでh4をh3にしたりするのはありですが）
あとは正式な見出し構造にすれば、今後何があっても間違いない、という考え方もあります。
（検索エンジンからの悪い評価にならないにしても）デザインを理由に見出し構造を変えるんでしたら、あまりやるメリットがないとかも・・・と個人的に思います。
HTMLとCSSのカスタマイズからチャレンジするのが良いかなって思いました。
わいひら reacted
2019年1月10日 01:26
そこで質問なのですが、Googleがそのページを評価するときに、h1～h6を順番通りに使っていないと悪い評価になる、なんてことはあるのでしょうか？
僕もないと思います。
Googleは、読み手に見えないHTML記述なんかより、コンテンツを重視します。
例えば、読み手の気持ちになって考えてもらうとわかると思うのですが、以下の2つだったらどっちが読みたいかということだと思います。
- 見出しがきちっと順番につけられているけどつまらないコンテンツ
- 見出しは順番通りではなくて適当だけど面白くてどんどん読みたいコンテンツ
当然、Googleは後者を優遇すると思います。
Googleの中の人の意見はこんな感じ。
https://webtan.impress.co.jp/e/2018/04/20/29008
トピックスターター 2019年1月10日 15:29
>>たなかまさん
詳しくありがとうございます。
そうですよね。よりいいブログをつくるためにそちらの方も勉強したいと思います。
よろしければもう少しだけ質問させてください。
①の場合のCSS
.article h2.orange{
/*見出しがオレンジになるようにcssを書く*/
}①の場合のHTML
<h2 class="orange">見出し</h2>
ですが、
①のCSSの場合は画像の赤枠にそれを書き足せばいいのでしょうか
また、①のHTMLの場合、画像のように編集すればよいのでしょうか？
⇓
なお、二つの方法を試してみましたができませんでした・・・
またbodyというのは、こちらの赤枠内のことを指しているのでしょうか？
本当に初歩的な質問で申し訳ありません。
もしよろしければ教えてくださると嬉しいです。
あと、最初はh2がないと目次が付かなかったと思います。
確かにそうでですよね。実はそういった仕様を利用し、カテゴリによって目次をないような記事もつくってみたいなあと考えていました。
その場合、h1→h3という使い方になるので今回のような疑問がでてきていました。
>>わいひらさん
ご回答ありがとうございます。
まさにおっしゃる通りで、
- 見出しは順番通りではなくて適当だけど面白くてどんどん読みたいコンテンツ
のほうが良いと自分も考えています。
URL読みました。ありがとうございます！
2019年1月10日 18:28
こんばんは。
CSSを記述する場所は、提示されていた記事にもある
外観＞テーマ＞カスタマイズ＞追加CSSの箇所です。（添付画像参照）
そちらに以下の記述を入れます。（class名をorangeからgreenに変更しています）
.article h2.green{
padding: 0.6em;
background: #eff5f3;
border-left: solid 6px #5dae93;
}
HTMLの見出しの記述は、いただいたキャプチャで合っていると思います。
②body要素にカテゴリーidのclassがあるので、カテゴリのclassで分岐させるとスマートです。
この②のやり方は、カテゴリーidを調べないといけないので、今回は割愛しますね。
※②の場合も、追加CSSに記述します。
かにそうでですよね。実はそういった仕様を利用し、カテゴリによって目次をないような記事もつくってみたいなあと考えていました。
僕だったら目次プラグインを使っちゃいますね。SEOは気にする必要はなくても、h2がないのは、個人的に気になっちゃう性格なので。
また何かあればおっしゃってください。
わいひら reacted
トピックスターター 2019年1月10日 22:11
>>たなかまさん
ああ、なるほど理解しました。
追加CSSには「こうやって本文?のHTMLに入力すると、こういう風になるよ」という文字（class）と効果を書いておき、実際の本文のHTMLにその文字を書くと追加CSSに書いた効果が出てくるというイメージですね
いろいろ試してみてできました。本当に初心者すぎてすみません。
すごく便利だと感じたので少しずつ勉強していこうと思います。
目次プラグインに関してもひとまず自分で調べてみようと思います。またなにかありましたら教えていただけると嬉しいです。
本当にありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。