僕のブログのようにアイキャッチにタイトルやそれに類する言葉が表示されている場合、カルーセルに記事タイトルが表示されると二重表示になり、サイトがゴチャっとしてしまいます。
これが表示されている場合
⇩⇩⇩
そしてこちらが表示を消した場合。
かなりスッキリしますよね。
ということで、今回はカルーセルの記事タイトルを非表示にする方法をご紹介します！
カルーセルのタイトルの非表示方法
CSSにコピペするだけ！
方法は簡単で、スタイルシートに以下を書き込むだけです！
/**カルーセル記事タイトル文字非表示**/
.carousel-entry-card-title{
display: none;
}
これだけですね！簡単！
説明するまでも無いと思いますが、これは「carousel-entry-card-title」という部分を表示しないようにしますよ、という記述です。
カルーセルのタイトルに装飾を加えたいような場合は、今回「display: none;」となっている部分を変更して別の記述にすれば、記事タイトルのデザインを変更することができます。
CSSの編集はカスタマイズから
一応CSSの編集方法が分からないよ、という方のためにそちらの方法も書いておきます。
cocoonはCSSの編集も凄く分かりやすくなっています。
ダッシュボードの「外観」から「カスタマイズ」を選ぶ。そしてその画面の一番下の「追加CSS」をクリック。
すると記述するフォームが出現するので、そこに書き込むとブログに反映されるようになっています。書き込んだ内容がリアルタイムで反映されるので凄く便利です！
ここに書き込んだCSSはcocoonオリジナルのCSSより優先されるので、基本的には基のデザインにどんどん上書きしていくイメージですね。
ここなら失敗してデザインが崩れても消せば良いだけなので、凄く安全に編集することができます。
カスタムCSS、使ってなかったよという方はぜひご活用下さい。凄く便利です。
まとめ
ということで、カルーセルのタイトルを非表示にする方法のご紹介でした。
この設定でデザイン的にはかなりスッキリしますが、もしアイキャッチ画像を設定し忘れていたり、タイトルを入れていないと何が何やらになってしまうので、そこだけは忘れないように注意してくださいね！
コメント