[cone]

【お使いの Snow Monkey のバージョン】
11.5.0-beta1

【お使いのブラウザ】
chrome

【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

Good pasta

takanoa.com

===

見出しのH2、下線をつけて中央揃えにしたいです。

イメージとしてはこんな感じです。

追加CSSのところに、このコードを書いたのですが、うまく作用していないようです・・・

h2 {
  display: inline-block;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding-bottom: 12px;
  margin-bottom: 70px;
  border-bottom: 5px solid #F2632D;
}

初歩的な質問で申し訳ございませんが、ご教授いただけると幸いです。

♥ 0

Who liked: No user

[Olein_jp]

こんな感じのCSSで実現できるかと思います。

.midashi {
  border-left: none;
  background-color: inherit;
  position: relative;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding-bottom: 12px;
  margin-bottom: 70px;
}
.midashi:before {
  position: absolute;
  content: '';
  border: 5px solid #F2632D; // 5pxは線の太さ
  width: 60px; //線の横幅
  left: 50%;
  margin-left: -30px;
  bottom: -10px;
}

いかがでしょうか？調整は良しなに行ってみてください。

また、現在利用されているセクションブロック内の見出しだけに利用したい場合には、そのセクションブロックに任意のCSSクラス名をブロックの方で設定を行い、以下のように加えてみてください。

セクションブロックにCSSクラスadd-css-class-nameを設定したとすると、

.add-css-class-name .midashi {
  border-left: none;
  background-color: inherit;
  position: relative;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  padding-bottom: 12px;
  margin-bottom: 70px;
}
.add-css-class-name .midashi:before {
  position: absolute;
  content: '';
  border: 5px solid #F2632D; // 5pxは線の太さ
  width: 60px; //線の横幅
  left: 50%;
  margin-left: -30px;
  bottom: -10px;
}

お試しください。

♥ 3

Who liked: No user

[cone]

ご丁寧にありがとうございます！予想していなかった方法でびっくりしましたが、できました！

Good pasta

takanoa.com

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

♥ 0

Who liked: No user

[Olein_jp]

意外な方法でしたか？

h2とかは基本ブロック要素なので、コンテンツエリアに対して全幅になります。ですので、そこにそのままborder-bottomとかで下線をつけると、コンテンツ幅に対して全幅で下線が付いてしまい、ご想像されている状態にすることは難しいです。

ですので、全幅のh2のテキストを中央揃えにして、基準をposition: relativeで設定します。

そして、擬似要素（:beforeとか:after）をposition: absoluteにして、h2の中央を起点にして、borderを設置するというイメージですね。

色々なところで利用できるケースですので、ぜひお試しください。

問題解決されましたらトピッククローズをお願いします〜

♥ 1

Who liked: No user

[キタジマ タカシ]

@Olein さんありがとうございます！

@cone　さん
見た目的に、セクションブロックのタイトルに近いかなと思いましたので、セクションブロックのタイトルにテキストを入力して、それを装飾するのも良いのではないかと思いました。

下記ページの「サービス」のところのような見た目になります。

WordPress テーマ Snow Monkey

どんな味付けにも染まる。高級お出汁のような WordPress テーマ、Snow Monkey

snow-monkey.2inc.org

トピック閉じておきますね。

♥ 4

Who liked: No user

[投稿者]

投稿