テレビCM放映中!
  1. ワードプレス 見出しデザイン変更について
みんなのお仕事相談所
発注者からの相談
HTML・CSSコーディングの見積もり・相場に関する相談

ワードプレス 見出しデザイン変更について

回答
受付中
回答数
2
閲覧回数
449
困ってます  : 困ってます

お世話になります。

以下の件でお見積りをお願いしたいと思っております。

現在ワードプレスでHPを製作しています。
記事の見出しデザインの作業をしていましたがCSSをいじっても上手く反映されませんでした。

https://nakaeshogo.com/wp-htag-design/
こちらにそって実施していました。

キャッシュをクリアしたり、CSSを確認したりプラグインを停止したりなどwebに乗っているような事を一通り試しましたが上手く反映されませんでした。

デザインはこちらのHPから
https://saruwakakun.com/html-css/reference/h-design
いただいてきて

ビジュアルエディターの

見出し1を
1. シンプルな見出し・二重線
コード
h1 {
border-bottom: double 5px #FFC778;
/*線の種類(二重線)太さ 色*/
}

見出し2を
1. シンプルな見出し・左線
コード
h1 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}

見出し3を
1.シンプルな見出し・上下に線
コード
h1 {
color: #364e96;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/
}

見出し4を
2. オシャレ系デザイン・タグ風
コード
h1{
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #dbebf8;/*背景色*/
vertical-align: middle;/*上下中央*/
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

見出し5を
2. オシャレ系デザイン・吹き出し
コード
h1 {
position: relative;
padding: 0.6em;
background: #e0edff;
}

h1:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}

以上のように変更させていただきたいと考えております。

上記の内容ですとおいくらくらいかかりますでしょうか?

お忙しいところ大変恐縮ですがご検討のほど宜しくお願いいたします。

2018年09月12日 15:55
岡 拓馬さんからの回答

今使用しているテーマにもよりますので、まずはそのテーマのカスタマイズ方法をググるべきです!
また、これは余談ですがデザインにこだわる方でブログ初心者の方だと「JIN」がおすすめですよ!

私のブログも、ストークからJINに移行してデザイン性がアップしましたので、是非とも参考にしてみて下さい。

私のブログ:https://okatakuma.tokyo
おすすめテーマ「JIN」:https://jin-theme.com

2018年09月14日 10:14
相談者コメント

ご回答ありがとうございます。
今回の件は無事に解決できました。

次回以降の参考にさせていただきますm(_ _)m

ご回答ありがとうございました。

2018年09月14日 10:50
Heart Labさんからの回答

仕様いているテーマにもよると思いますが

.title h{}.title というような書き方がしてあると思います。

ご質問の趣旨から判断しますと、web的なことをご自身でやるのは無理そうなので、発注するのが安く済むと思います。

2018年09月22日 21:33
ご意見箱

× 今後表示しない