てがきノートのH2タグのもじゃもじゃを消す方法[cocoon]

wordpress

cocoonに新しいスタイル「てがきノート」が追加されましたね!

細部まで行き届いた素敵なデザインで、私もとても気に入っています。

ただですね、どうしても1か所だけ気になってしまうところがあるんですよね…。

この部分さえなければ最高なんですが…。そう、それがH2タグのもじゃもじゃです…。

cocoonのてがきノートって?何の話をしている?

そもそも何の話しているのって思われる方もいるかもしれませんね、少しだけ解説します。

私のブログはWordpressで作成していて、そのテーマにcocoonを使用しています。
さらにcocoonにはスキンを設定することができ、そのスキンの新作にてがきノートというのがあるんですね。

このてがきノートというスキン、とても出来が良く満足感の高いスキンなのですが、一部のデザインだけ少し気になるので変更したいな。と、今日はそういうお話です。

あろえぷりん
あろえぷりん

ニッチな話題で申し訳ございません。

スキン「てがきノート」の特徴
スキン「てがきノート」はアナログな手書き風をイメージした少し抜けのあるスキンです。 ゆーそうと 書くことを楽しんでいただきたいと思い、このようなスキンを作りました。 スキン「てがきノート」は全部で5種類のカラーを用意しております(ダークモー

問題のもじゃもじゃ

見てもらった方が早いですね。これです。

この見出しについているもじゃもじゃが嫌なんです。

このもじゃもじゃはスタイルシートで定義されていますので、その部分を上書きしてやれば削除できます。

上書きと言っても、子テーマの追加スタイルシートに別の命令を上書き追記するだけで、元々のソースコードを変更するわけではありません。安心してください

もじゃもじゃの消し方

スタイルシートを見てみますと以下の記述を発見することができます。

/************************
* 見出しのぐしゃぐしゃ線
・本文h2(.article h2)
・詳細ページの関連記事のタイトル(.related-entry-heading)
・詳細ページのコメントタイトル(.comment-titlee)
************************/
.article h2, .related-entry-heading, .comment-title,
.article h2:before, .article h2:after,
.related-entry-heading:before, .comment-title:before,
.related-entry-heading:after, .comment-title:after { 
	border: solid 1px #777;
}

公式にはぐしゃぐしゃ線というらしいです笑

では早速このもじゃもじゃを綺麗に消してしまいましょう。

wordpressの管理画面からテーマファイルエディタに移動します。

編集するテーマがCocoon Childになっているかを確認してください。

さらにスタイルシートを選択しているかを確認してください。

最後に「必要ならばここにコードを書く」の場所を確認してください。

私の例ですと16行目にありますね。

次に下記コードをコピーして貼り付けしてください。(私の例だと17行目に貼り付け)

/************************
* 見出しのぐしゃぐしゃ線を消す
・本文h2(.article h2)
************************/
.article h2, .article h2:before, .article h2:after{ 
	border: none;
}

これでh2タグにもじゃもじゃ(ぐしゃぐしゃ線)がなくなりました。

ちなみに、h2タグの他にも関連記事とコメントの見出しにももじゃもじゃが反映されています。これらも消したい場合は以下のように編集してください。

/************************
* 見出しのぐしゃぐしゃ線を消す
・本文h2(.article h2)
・詳細ページの関連記事のタイトル(.related-entry-heading)
・詳細ページのコメントタイトル(.comment-titlee)
************************/
.article h2, .related-entry-heading, .comment-title,
.article h2:before, .article h2:after,
.related-entry-heading:before, .comment-title:before,
.related-entry-heading:after, .comment-title:after { 
	border: none;
}

{}や, の付け忘れや消し忘れにご注意を。コピペするのが安全です。

これであなたのサイトからもじゃもじゃがきれいさっぱり消えてなくなったはずです。

素晴らしいテーマがさらに素晴らしくなってしまいましたね。

- プロフィール -
このブログを書いている人
あろえぷりん

おじさんシステムエンジニア(37)の生態を世に発信しています。
どなたかに刺さるような記事が書けたら嬉しいです。
マイブームはふわふわかき氷を作ること。
「シロップかけすぎ!」と嫁ちゃんに怒られるけど、やめられないんだなこれが。

あろえぷりんをフォローする
wordpress
- スポンサーリンク -
シェアする
あろえぷりんをフォローする
あろえぷりんどっとこむ

コメント

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