h1 h2 などの見出しに装飾をつけて、目次を付けたいのですが・・・

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など h1 h2 などの見出しに装飾をつけて、目次を付けたいのですが・・・

このトピックには18件の返信が含まれ、1人の参加者がいます。2 日、 11 時間前 ポムポムゼリー さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #59665

    ポムポムゼリー

    こんにちは。

    超初心者なので、言葉不足でしたらすみません。

    記事作成についてですが、TOC+を使い見出しに目次を付けて記事を書いています。

    見出しにも装飾出来ることを知り、add quick tag で見出しに装飾をしたいのですが
    タグをつけても反映されませんでした。

    F12でキャッシュをクリアしても反映されておらず・・・

    いろいろなところで調べましたが、見出しの装飾の仕方はかいてあっても
    H2タグ+目次+装飾 のやり方がまったく分からず、かれこれ3時間ほど検索しています。

    正直、発狂しそうなくらい頭が混乱しています。

    記事を作成するときに、H1タグをはじめに使わないとSEO的によくないことを
    今さらになって知りました・・・

    今まで、ずっとH2の見出ししか使っていませんでした。

    見出しをつけて、さらに目次にも反映させて、装飾するにはどうしたらいいでしょうか?

    どなたか、教えて下さると幸いです。

    ちなみに表示としては

    「段落」ボックスの中に見出し1~6まで入っていて、そこを使うと自動的に目次が作成されるようになっています。

    よろしくお願い致します。

  • #59667

    Akira

    サイト URL とご希望の見出しの装飾をご提示いただけるでしょうか?

    記事を作成するときに、H1タグをはじめに使わないとSEO的によくないこと

    h1 タグは、記事タイトルで使われています。 h1 タグは 1 ページに 1 つが原則なので、記事内の見出しは h2 から始めるのがおすすめです。

  • #59668

    ポムポムゼリー

    ご連絡ありがとうございます。

    https://copypet.jp/111/ 使いたい装飾はこちらの「吹き出し風囲み」か、その下の
    「両端に穴を開けたプレート風」のピンクの物ですが、色はピンクではなく
    上の青緑と同じ色に変えたいです。

    サイトは、http://freeasbluebirds.com/ になります。

    タイトルに、h1が自動的に入っているので、
    その場合、H1は使わなくていいということでしょうか>

    今までは、見出し2を使い、文字色のみを変更して上下線で区切りをつけていたのですが、
    幅の調整がうまくいかないのと、デザイン的に見やすくしたいので
    上記のデザインに変えたいと思いました。

    また、add quicktag で二重線の囲みなどは何度か使ったことがあるのですが、
    改行をいれたりすると、1行だけを囲みたいのに、5,6行まとめて囲まれてしまったり
    改行のスペースがおかしくなってしまったりします。

    なので表示がバランス悪く表示されている記事もありますが、怖くて直せずにいます。

    よろしくお願い致します。

  • #59670

    Akira

    <span style="color: #33cccc;">H2の見出し</span>

    上記のように見出しに style 属性が付いていますが、これはポムポムゼリーさんが指定されたものでしょうか。この指定で h2 の文字色が白にならないので、下記の CSS では !important を使っています。

    ●吹き出し風囲み●

    「吹き出し風囲み」の場合には、下記の CSS を子テーマの style.css に追加します。

    .article h2 {
      border-left: none;
      position: relative;
      padding: .3em;
      background: #00acc1;
      border-radius: 8px;
      color: #fff;
    }
    
    .article h2:after {
      position: absolute;
      content: '';
      top: 100%;
      left: 20px;
      border: 10px solid transparent;
      border-top: 10px solid #00acc1;
      width: 0;
      height: 0;
    }
    
    .article h2 span {
      color: #fff!important;
    }

    ●両端に穴を開けたプレート風●

    「両端に穴を開けたプレート風」の場合には、下記の CSS を子テーマの style.css に追加します。(表示がちょっと変だったので、ご参考のサイトから若干 CSS を変更しています。)

    .article h2 {
      border-left: none;
      position: relative;
      padding: .3em 34px;
      background: #00acc1;
      border-radius: 1em;
      color:#fff;
    }
    
    .article h2:before,
    .article h2:after {
      color: #fff;
      content: '●';
      font-size: 1em;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .article h2:before {
      left:10px;
    }
    
    .article h2:after {
      right:10px;
    }
    
    .article h2 span {
      color: #fff!important;
    }

    ● H2 タグ+目次+装飾のやり方●

    目次を考慮される必要はなかったです。単に h2 タグ + 装飾でお考えになって構いません。目次は、 TOC+ が勝手に作ってくれます。

    ● h1 と h2 について●

    タイトルに、h1が自動的に入っているので、その場合、H1は使わなくていいということでしょうか

    はい。おっしゃるとおりです。これまで同様、記事をお書きになる時は h2 からお使いになるといいと思います。

    少し h1 についてご説明します。

    現在の html は、 html5 が標準仕様です。この html5 では、 1 ページに 2 つ以上の h1 を許可しています。ただし、1 ページに複数の h1 があると、 SEO の面ではマイナスです。

    なので、原則というか基本的にというか、 1 つのページに 1 つの h1 にすべきというのが大方の見方です。

    Simplicity では、投稿ページや固定ページでは記事タイトルに h1 が使われています。また、トップページなどでは、サイトタイトルが h1 です。

    各ページにしっかりと h1 が設定されているので、Simplicity の利用者が h1 を使う必要はありません。

  • #59675

    ポムポムゼリー

    おはようございます。

    ご連絡、大変ありがとうございました。

    先ほど試してみたところ、とても簡単に変更することができ、すごく感動しました。
    本当に感謝です。ありがとうございます。

    私がお送りした見出しデザインのURLのCSSコードを変更して教えて下さいましたが、
    そのコードの変換はご自身で変更されたのでしょうか?

    先ほどのサイトのCSSの表示がおかしいとのことだったので
    今後、ほかのデザインなどに変更したい時に、自分で訂正できるようになればいいなと思ったのですが
    ・・・どこか変換できるサイトなどがあるのでしょうか。

    たくさん質問してしまい申し訳ないです。

    もしご教授いただければ幸いです。いつでも構いませんのでよろしくお願い致します。

  • #59677

    Akira

    私自身で変更しました。変換ツールはないと思います。

    ポムポムゼリーさんのサイトを Chrome のデベロッパーツールで開き、 CSS を指定して、実際の表示を確認しながら微調整しました。

    Chrome のデベロッパーツールについては、以下の 2 つのサイトがご参考になるかもしれません。この 2 つ以外にも、検索すればたくさん情報は出てくると思います。

    初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

    Chromeデベロッパーツール(検証モード)の基本的な使い方を解説

  • #59679

    ポムポムゼリー

    何度もありがとうございます。
    そんなんですね、やはり自分で勉強して地道にやるしかないですね。
    ありがとうございます!

    先ほどの見出しを自身のサイトに当てはめてみたら、少々インパクトが強すぎたので
    他のデザインに変更したら、今度はモバイルで表示したときに文字が画面からはみ出すようになってしまい横にスクロールしないと全部見れないようになってしまいました・・・

    htmlってとても奥が深く、一筋縄ではいかないですね・・・(:_;)

    また混乱して取り乱しそうなので
    おとなしく、シンプルなデザインで行こうと思います(:_;)(笑)

    本当に、いろいろ教えて下さってありがとうございました!助かりました!

  • #59680

    ポムポムゼリー

    Akiraさん、何度も申し訳ございません。

    いろいろ調べた結果、私が作成したテーブル表も、モバイルでみるとはみ出していました。
    下にスクロールして読もうとすると横に動いたりしてしまいます。

    リンク↓
    http://freeasbluebirds.com/ryugaku-wahori-jyunbi/free-hoken

    そこで
    table {
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-all;
    }
    をcssに追加すると直ると調べたので、やってみたのですが
    やはりはみ出したままでした。

    今現在設定している見出しh2も
    モバイルだとはみ出してしまうのですがこれは何か関係あるのでしょうか?

    何度もお手数おかけして申し訳ないのですが、解決策を教えていただけると助かりますm(__)m
    すみません・・・。

  • #59699

    かうたっく

    tableに幅指定をされてるようですが、プラグインで出力されてますか?

    通常CSSに!importantを入れると効くのですが、PC上で確認しようにも指定が効きません。もしかしたらコピープロテクターとか言うプラグインがコチラの操作を邪魔してるのかもしれません。

    今考えられるのは、そのプラグインを停止すればコチラから検証画面を操作できる。またはテーブルプレス?プラグインが猛烈に強いスタイル指定をしている…またはその他の理由か?

    .article table {
    	width: 100% !important;
    }

    で効かなければ、プラグインをすべて停止してみてください。または、テーブルプレスに値を入れる場合400pxと指定できるのであれば100%や20%などと指定してみるなどでしょうか。

    現状施しようがないので、提案ばかりになってしまいましたが。

    プラグインを停止して問題なければ停止後チェックしてもらうなどでしょうか。

  • #59708

    Akira

    テーブルに関しては、かうたっくさんがおっしゃっているとおりです。テーブルに width が指定されているのが原因です。

    <table style="height: 257px; width: 417px;" cellspacing="0">

    横幅が 417px なので、一般的なサイズのスマホでは入りきれていません。

    <table> だけで作成されるのがおすすめです。 cellspacing は非推奨になったので、お使いにならない方が良いと思います。

    全部のテーブルを書き直すことが理想的ではありますが、下記の CSS でも一応修正できます。

    table {
      width: auto!important;
    }

    h2 の見出しがはみ出しているのは、 .article h2 に対しての CSS が原因です。追加 CSS に、下記の指定が 2 つあります。

    .article h2 {
      font-size: 20px;
      border-left: 8px solid #00CED1;
      border-bottom: dotted 2px #00CED1;
      width: 600px;
      line-height: 27px;
      padding-left: 5px;
      color: #4d4d4d;
      margin-top: 40px;
      margin-bottom: 3px;
    }

    修正方法は、まず 2 つある上記の CSS のうち、 1 つを全部削除します。

    残ったもう 1 つの CSS から、 width: 600px; だけを削除するとご希望の見出しになると思います。

  • #59710

    Akira

    あ!ごめんなさい。 h2 の見出しが昨日から変わっていますね。

    実は昨日はコメントが送信できず、昨日書いたコメントをそのまま貼り付けて送信してしまいました。

    現在の h2 の見出しは、何もご変更される必要はありません。

  • #59719

    ポムポムゼリー

    こんばんは!
    かうたっくさんAkiraさん
     ご回答本当にありがとうございます!

    テーブルプレスについてですが、何かで調べてかなり前にプラグインしたのですが
    テーブルを作成するときに、普通にtable で作成したのかtable pressで作成したのか忘れてしまいました・・・すみません。

    覚えているのは、テーブルを作成するときに、枠を縦・横に何度も伸ばしたり
    縮めたりしながら作ったことです。

    table Pressのプラグインを停止してみましたが、変わらずはみ出していたので
    table {
    width: auto!important;
    }
    をいれたらスマホでもはみ出さずに表示されました。
    ありがとうございます。

    今後、テーブルを作るときは、ただのtable でテーブルを作れば
    どんなに幅を広げてもスマホではみ出すことはないでしょうか?
    もし、はみ出すことがないのであればtable press は削除しようと思います・・・。

    また、h2での文字なのですが、スマホでの文字の表示が大きくて少し見づらいので
    文字を小さくてたいのですが、モバイルcssにフォントサイズを入れたのですが何も反映されませんでした。

    ↓これです。これでは文字の大きさは小さくならないでしょうか?
    .article h2 span {
    font-size: 18px;
    }

  • #59733

    Akira

    今後、テーブルを作るときは、ただのtable でテーブルを作ればどんなに幅を広げてもスマホではみ出すことはないでしょうか?

    はみ出すことはないです。ただ、横幅が広いテーブルを作っても、画面内に全て収まってしまいます。なので、ギュッと詰まった、すごく見にくいテーブルになるかもしれません。

    そういう時は、 WordPress 管理画面 → 外観 → カスタマイズ → レイアウト(投稿・固定ページ)より、「大きな表は横スクロール」にチェックを入れます。

    テーブルのみが横スクロールが可能になり、画面の横揺れを回避しつつ、見やすいテーブルを作成できます。

    h2での文字なのですが、スマホでの文字の表示が大きくて少し見づらい

    下記の CSS を style.css に追加すると変更できます。

    @media screen and (max-width: 480px) {
      .article h2 span {
        font-size: 18px!important;
      }
    }
  • #59735

    ポムポムゼリー

    Akiraさん、ご連絡ありがとうございます。
    tableの件 了解いたしました!
    本当にありがとうございます。

    また、トップページのh2のことで申し訳ないのですが、文字を小さくしたら
    今度はサムネの画像が大きくて見ずらいのでトップのサムネの大きさを小さくするべく
    調べていて、Regenerate Thumbnailsを使うと小さくなるとのことで
    デザインの所でサムネ画像を70~80に設定した後にこのプラグインをしたのでしたが反映されませんでした。

    なので、ここのフォームで過去の質問から検索したら
    同じ内容の回答をAkiraさんがしてくださっていたのでそれをコピペして試してみました。
    が、反映されず・・・

    フォーラム #56951

    .entry-card .entry-thumb img{
    width: 200px;
    height: 120px;
    border-radius:0px;
    }

    少しだけは小さくなるのですが、それ以上は小さくなりませんでした。

    https://www.imamura.biz/blog/22096
    こちらを参考にしてやってみましたがだめでした。。。

  • #59737

    Akira

    下記の CSS でトップページのサムネイルを小さくできます。スマホで見るとサムネイルは大きく感じなかったので、画面幅が 500px 以上(タブレットやパソコン)でサムネイルを小さくしています。

    @media screen and (min-width: 500px) {
      .entry-thumb img {
        height: 120px;
        width: 120px;
      }
      .entry-card-content {
        margin-left: 144px;
      }
    }

    CSS を指定後には、下の画像のように表示されます。

    http://netakiri.net/uploader/src/up0462.png

    height と width の値を変更すれば、サムネイルの大きさを変更できます。

    Regenerate Thumbnails プラグインは、画像のサイズを再生成するためのものです。

    例えば、新たに 500 x 500px の画像サイズを作るようにカスタマイズをしても、過去にアップロードした画像は 500 x 500px のサイズは作られません。過去にアップロードした画像も 500 x 500px のサイズが欲しい時に、Regenerate Thumbnails プラグインを使います。

  • #59738

    ポムポムゼリー

    本当に、なにからなにまで ありがとうございます!
    無事にサムネも文字も小さくすることが出来、本当に感謝です。ありがとうございます!

    最後にもう一つだけいいでしょうか・・・すみません・・・

    サムネ画像と文字は小さくできたのですが、記事同士の間隔がそのままで
    やはり見ずらさがあります・・・
    やり方を検索して、これをみつけたのですが反映されませんでした。
    フォーラム #31083
    https://wp-simplicity.com/suport/topic/%E5%85%A8%E6%96%87%E8%A1%A8%E7%A4%BA%E3%81%AE%E6%8A%95%E7%A8%BF%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%A8%E8%A8%98%E4%BA%8B%E3%81%AE%E9%96%93%E9%9A%94%E3%82%92%E5%B0%8F%E3%81%95/

    記事間の幅を狭くするにはどうしたらいいでしょうか?

    何度もお手数をおかけし、申し訳ないです。

  • #59739

    記事一覧を表示したときに、サムネが正方形且つ小さい画像になってしまいます。
    私としては、大きな横長の画像をサムネにし、画像を引き立たせたいと思っております。

    ・メディア設定でサイズ変更
    ・function php内でのサイズ変更
    ・Regenerate Thumbnailsの稼動

    上記を行いましたが、サムネは小さく正方形のままです。

    どのようにしたらいいかご教授いただければと思います。

    よろしくお願いいたします。

    URL: http://nicenews.club/

  • #59741

    Akira

    下記の CSS を指定すると、記事間の余白を狭くできます。 margin-bottom の値を変更することで、余白を調整できます。

    #main .entry-card {
      margin-bottom: 15px;
    }

    出来上がりのイメージは下の画像のとおりです。

    http://netakiri.net/uploader/src/up0463.png

    また、追加 CSS に書かれている以下の CSS の padding-bottom: 15px を組み合わせることでも、余白を変更できます。

    #main .entry {
        border-bottom: 1px dotted #0099FF;
        padding-bottom: 15px;
    }

    例えば、このように指定します。

    #main .entry {
      margin-bottom: 20px;
      padding-bottom: 20px;
    }

    出来上がりのイメージは下の画像のとおりです。

    http://netakiri.net/uploader/src/up0465.png

    後者の方が、余白を調整しやすいかもしれません。

  • #59743

    ポムポムゼリー

    Akira さん、ありがとうございました!
    無事、間隔を狭くし、見やすくすることが出来ました。
    Akiraさんのおかげでサイトが見違えるほど良くなりました。
    本当に感謝でいっぱいです。

    私も、質問しなくても自分で解決できるように少しずつ勉強頑張ります!

    本当にありがとうございました(*^^*)

トピック「h1 h2 などの見出しに装飾をつけて、目次を付けたいのですが・・・」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)