WordPressテーマ「cocoon」で自作ボックス（ボタン）の文字が上下中央に来ない

本記事ではボタンのスタイルで

ボタンの文字が上下中央にこない

もうちょっと具体的に見ていきましょう。

例えば普通は以下のようにstyle.cssに記述すれば上下中央配置になります。(テキストエディタに<div class=”cocoon_btn_dame”>BTN</div>を設置しておく。）

 

「width」が幅で「text-align: center;」でが左右中央に配置されます。

「height」が高さで「line-height: 50px;」が行高のことで、つまりは「height」と「line-height」の値を同じにすれば上下中央配置になる、のはWeb界隈では多分常識的なはず。

本来

のようになるはずです。

しかしWordPressテーマ「cocoon」を使っているとなぜだか

こんなふうに中の文字が真ん中より少し下に位置してしまいます。

ちょっと困っているので、原因を探していきます。

 

全然わからない

調べてみたんですが、完全に僕のパワー不足です。全く分かりません。

でも、もしや？！とおもって<a>タグにしてみると

BTN

比較的マシになりました。

ということは、おそらく<div>にスタイルが設定されている？ということですかね。
全く分かりません。

試しに<span>タグにしてみましょう。

BTN

いい感じです。やっぱり<div>タグに問題がある感じですかね。

改めて見ると、<div>タグは幅（width）も違いますね・・・。

これはきっとcocoonのスタイルシートに<div>タグに関する何らかのCSSが書き込まれているに違いない！

ってことで見てみることにしました。

 

cocoonのオリジナルボタン

そういえば、cocoonが用意してくれているボタンもありましたね。

これです

このボタンは<a>タグなんですが、試しにこれを<div>タグに変えてみましょう。

さあ、なぜなんでしょうか。全く分かりません。

cocoonのスタイルシート(style.css)

cocoon備え付けのボタンがなぜちゃんと表示されているかを見てみましょう。

メニューの「外観」→「テーマの編集」→Cocoon：スタイルシート（style.css)

この中でbtnクラスとbtn-indigoクラスを検索してみたら何かいいことありそうです。

先にbtn-indigoクラスを調べてみました。

背景色の設定だけなので、やはりbtnクラスに何か鍵があるんでしょうか・・・。

btnクラス↓↓

これと同じ様に自分でボタンを作ればちゃんと表示される、ということですね。

でも僕が作ったボタン（divタグだけど）のデザインがなぜ崩れるかはわかっていません。

 

ボタンはCocoonのボタンを使えばいいじゃんって思うじゃないですか。

そうじゃないんですよ、そもそもCocoonのWordPressカスタマイズいろいろしていこうかなーなんて思ってたんです。でもボックス（ボタン）デザインごときで躓いちゃってたらもう全然だめじゃないですかー。

 

もう根本的な何かが何かなんでしょうか。

すみません、心折れました。

どうすればよいのか

わかりません。誰かわかる人いまてんかー.