スポンサーリンク

【Cocoonのカルーセル設定】頭抱えながら頑張ったらなんとか解決しました!

WordPress

こんにちは、てぃんです。以前Cocoon設定の記事を書いたんですが、今回はその中のカルーセル設定について少し話をしていきたいと思います。
ちなみにカルーセル とは、ここの部分です。

WordPressのテーマ「Cocoon」のカルーセルの写真

設定自体ほんとに簡単で、全くつまづかずに出来た人の方が多いんじゃないかと思います。
僕がつまづいた時にネットで調べても情報が少なかったので。今回の僕のつまづき方は少し特殊なのかもですね。
ですので、もし同じように悩んでいる人がいたら役に立ってくれるといいなーと思って今回の記事を書いています。

どこにつまづいたのか?

というわけで、何につまづいたのかですがカルーセルに表示されるアイキャッチ画像の高さが揃わなかったんです。

WordPressのテーマエディターの編集画面の写真

結果から言うと、上記の通りCSSのコードを一行追加しただけで解決しました。
それは、「display:block;」というコードです。
CSSの基礎がわかっている方であれば簡単な話ですよね。
そうじゃない方は難しいかもしれませんので、先にこちらの記事をご覧ください。

というわけで、検証ツールでコードを見てみると、、
この赤枠のところが「display:inline-block」になっていました。
なので“carousel-entry-card e-card cf”のクラス名に
「display:block;」を書きました。
そしたらカルーセル の中のアイキャッチ画像が揃いました。
めちゃくちゃ簡単に解説すると、
基本的に「インラインブロック要素」と「ブロック要素」という二つがあって
インラインブロック要素は幅と高さが指定できないんですけど、
ブロック要素だと指定できます。

おそらく、テーマの元々の設定でカルーセルの幅と高さが指定してあると思うんですけど、
要素がインライン要素だったのでその指定が効いてなかったんじゃないのかな?
と思ってます。

ブロック要素とインライン要素の違い

詳しく知りたい方はこちらをご覧ください。

デベロッパーツールの写真

カスタマイズってほんとにこういう世界で、

てぃん
てぃん

ここいじったらいけるかも!

てぃん
てぃん

あー、だめかー。うーん、なんでやろ?

てぃん
てぃん

あ、こっちいじればいいのか!

あー、まただめかー。

てぃん
てぃん

今度こそ!!これでいけるはず。

てぃん
てぃん

できたー!!!!!

みたいな感じです。
めっちゃ詳しい人なら一発でここを変更したらいけるみたいなのがわかるんでしょうけど、
僕みたいな素人は日々戦ってます。(もちろん勉強しながらですよ)

まあでもこのうまくいった時の嬉しさは半端じゃない。から頑張れる気がします。(笑)
後、コーディングって同じデザインだったとしてもコードは人によって違うものだと思っていて、だからこそ自分なりにコーディングができないと納得いかないんですよね。

やっぱりコピペって自分のためにならないんですよね。
コピペ自体が悪いって意味ではなくて、そのコードの意味とかなんでそうなるのかってところまで考えられてやっと次から使えるようになるので。
僕自身そういうところを心がけてます。

ごめんなさい!(笑)
だいぶ話が脱線してました。
というわけで、同じような悩みの方がいましたらぜひ試してみてくださいね!

ブログランキング・にほんブログ村へにほんブログ村
WordPress
スポンサーリンク
てげてげブログ

コメント

タイトルとURLをコピーしました