wordpress テーマsydneyのキャッチフレーズの一列表示について

Question

wordpressでSydneyのテーマを使っております。
トップページのキャッチフレーズの表示について質問です。
現在全角２３文字が一列表示になっており、２４文字目は二列目に表示されています。
この文字数を変更したく、Style.cssを見たりしたんですが、どの部分を修正・変更したらいいか全く分かりません。
どなたかお分かりになる方がいらっしゃいましたら、ご享受願います。

Answer 1

Bootstrap というCSSフレームワークを使用しているので、.col-md-4の値を変更してしまうと他の箇所で不具合が出る可能性がとても高いのでお勧めしません。
（-xs- -ms- -md- は画面幅に対応して表示を切り替えるために指定されています）

全て全角文字なのであれば下記で対応可能です。

h2.site-description {
    line-height: 1.1;
    word-break: keep-all;
}

メニューの個数や幅によりますが、下記のような指定で出来る可能性もありますが、上手くいかないならBootstrap の本などで勉強されることをお勧めします。

<div class="row">
	<div class="col-md-6 col-sm-11 col-xs-12">
		<h1 class="site-title"><a href="https://wp-themes.com/" rel="home">Theme Preview</a></h1>
		<h2 class="site-description">Previewing Another WordPress Blog</h2>	        
	</div>
	<div class="col-md-6 col-sm-1 col-xs-12">
		<div class="btn-menu"></div>
		<nav id="mainnav-mobi" class="mainnav" role="navigation"></nav>
	</div>
</div>

Answer 2

bootstrap.min.cssの中のメディアクエリでwidthを指定しているみたいです。

.col-md-4 の値を変えてあげればいけると思います。

ブラウザのデベロッパーツールで値をいろいろ変更して試してみてはどうでしょうか。

Comments

[64Masako]

こんな無知な者に、回答ありがとうございます！
.col-md-4{width:33.33333333%}となっていて33.33333333%の部分を変えてみたら、文字数は変更できたのですが、それに伴い、メニューの位置にズレが生じました。この場合、.col-md-4以外に変更箇所があるのでしょうか？

[8-0_nyan5]

答えられるかどうかわかりませんが、
具体的にはどうされたいのでしょうか。

[64Masako]

お返事頂き、大変ありがとうございます。
初心者に加え、説明が下手で分かりにくい点が多くてすみません。

私が行いたいのは、キャッチフレーズの部分を全角30文字で一列に表示をしたいということです。
教えていただいた.col-md-4の値を変更をしてみると一列表示になる文字数は増えたのですが、それまで右上にあったメニューの部分がキャッチフレーズの下辺り（左側）に表示されるようになってしまったのです。
文字を一列表示にして、メニューも右上に表示するようにするにはどうしたらいいかと思っております。
大変お手数をお掛け致しますが、もしお分かりになれば、教えていただけたら幸いです。

[8-0_nyan5]

キャッチフレーズの幅を拡げればメニュー部分は狭くなってしまいます。
メニューの部分は、flex-boxで中央になるようになっているので、
そこを直せばいいと思います。

修正前の現状がどうなっているかわかりませんが、

style.css　の
@media screen and (min-width 1025px) .header-wrap .container > .row　の

align-items: center;　となっているのを
align-items: flex-start;　にすれば

タイトルとメニューの上部が揃うと思います。