当サイトのテーマ『STORK19』はこちら

【STORK19】見出しH3のボーダー(上下の線)を消す方法

STORK19 のデフォルト見出しH3の上下の線(ボーダー)が邪魔でしたが、何とか消せたので備忘録として残しておきます。

ちなみに下の画像は追加cssにコードを追加して見出しh3を編集しているためデフォルトの設定ではありませんが、初期設定だと画像のように上下に線があって少し格好悪い感じがします。

↓↓この上下の線を消したい↓↓

せっかく見出しを追加CSSでアレンジしても、ボーダーのせいで見た目台無しになってしまうのは嫌ですよね。

ブログ初心者のため、他に良い方法があるのかもしれませんが、とりあえずこれでできたので、参考になればと思います。




STORK19の親テーマを編集する

やり方としては、普段あまりいじらない親テーマを編集しました。

親テーマの編集の仕方はwordpressの管理画面左上のメニューから

外観 → テーマファイルエディタ → 編集するテーマを選択で「stork19」を選んでから選択ボタンを押すことで編集できます。

次に「Stylesheet(style.css)」を押します。

すると、下の方にstyle.cssのコードが表示されるので画像の部分を探します。

今回は2067行付近でしたが、テーマのアップデートによっては微妙に変わっているかもしれません。

この

  • border-top:4px solid;
  • border-bottom:4px solid;

の部分が見出しh3の上下線を設定しているみたいなので、ここの数字を0に変更します。

数字を0pxにしてファイルを更新




H3のボーダーが消えた!

上記の手順後、ページを確認してみると下の画像のようにボーダーが消えました。




親テーマを編集する問題点

普段何かコードを編集したい場合は、追加cssや子テーマを編集していましたが、今回は親テーマを編集しました。

しかし親テーマの編集には以下の問題があるため、できればやりたくはありません。

親テーマを編集する問題点
  • サイト自体が壊れてしまう可能性
  • テーマの更新毎にコードが新しくなる(更新毎に今回の手順で直す必要がある)

親テーマのコード編集はサイト自体が壊れてしまう可能性がありますが、この程度の編集ならすぐ元に戻せるためそこまで恐がる必要はないと感じます。

ただ2番目に書いた通り、テーマ自体の更新の度に何度も直す必要があるのは結構面倒です。

できれば子テーマの編集でなんとかできたら良いですよね。




まとめ

STORK19でのデフォルト見出しH3のボーダー(上下の線)を消す方法は以下の通りです。

  • STORK19の親テーマを編集する
  • style.cssのH3を設定している部分を編集する
  • テーマの更新の度に今回の手順で直す必要があるのが問題点

以上です。ブログ初心者にとってコードの編集は敷居が高く、できればやりたくないですよね。

STORK19はサイトデザインもしやすく、個人的にも1番気に入っているテーマなので、是非このあたりの編集も簡単にできるようにテーマのアップデートをして欲しいなと感じます。

ブログをやるならサーバーはConoHawingがおすすめ!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA