【超簡単】wordpressの見出しをカスタマイズする方法!初心者でもCSS追加が出来たよ!やった!


スポンサーリンク

 

あい
あ~何か見出しの形ちょっと変えたいな~…。

 

WordPress(ワードプレス)でブログを書き始めて約2年。

 

何度も何度もそう思ってきました。

 

で、何もしない日々…。

 

理由はコレ!

 

あい
変なとこ触って、ブログが真っ白になるのがコワイ!怖すぎる…。

 

そう。別サイトのお話ですが、よくわからないままにイジってしまい、サイトを真っ白にしてきたことが今までに何回もあるんですよねぇ…。

 

くぅ…。

 

現在、当サイトはWordPressテーマ「ストーク」を利用しています。

 

別にカスタマイズせずとも、標準機能で見やすいブログがサクサク書けるので本当に助かっているのです…。

 

が!しかーし!

 

やっぱりちょっと見出しの形を変えたい!

 

ちょっとやってみようっ!

 

そんな気持ちが爆発して、とうとう「CSS」というものを追加しちゃいましたっ!

 

ai-9

ぐへへ!やったりましたゼ!

 

こんな人におすすめの記事!
  • 初心者だが簡単に見出しのカスタマイズをしてみたい
  • 超初心者はどうカスタマイズするのか!(←好奇心)

 

スポンサーリンク

 

本記事は、わたしの備忘録な要素が強いのでサラリ~と読んでいただければ幸いですっ!

 

さぁ、それではいってみよ~う!

 

その前にプチPR:10日間無料オンラインスクール

とことんママに寄り添って、当サイト運営者:あいが情熱いっぱいでやってますっ!

10日間無料オンラインスクールを今すぐチェック!

 

では本題!wordpressの見出しをカスタマイズする方法について!

 

あ、そうそう!

 

今回、Wordpress(ワードプレス)の見出しをカスタマイズする、運営者:あいのスペックをちょいとご紹介!

 

あいの基本スペックは?

(1)技術的なことはチンプンカンプン!

(2)CSSやHTMLなどの単語は心が受け取り拒否!

つまり…

技術知識0(ゼロ)人間っ!

 

 

でも、こんなわたしでもチャチャチャっと簡単にCSS追加でカスタマイズできちゃいましたからね!

 

専業主婦のモモさん
なんて前置きが長いのかしら…!

早くカスタマイズする方法が知りたいんですけど…。

 

そうでした!そうでした!

 

ではわたしがやったカスタマイズをBefore→Afterでご覧ください。

 

CSSを追加する前(標準):Before

 

 

 

↑これがストークの見出し3のタグ。

 

左側にシャーっと線があるだけ。

 

シンプル好きのわたしにはもってこいのやつ。

 

あい
う~ん…。

でもちょっぴりシンプル過ぎるかなぁ…。

だから…

 

CSSを追加した後(カスタマイズ後):After

 

 

↑こんな風に、ちょっぴり背景をグレーにしてみた!

角を丸くしてやわらかめの印象に!

 

あい
ぎゃぁぁー!

シンプルなのにちょっぴり協調できてイイ感じ~!

 

スポンサーリンク

 

【簡単】wordpressの見出しをカスタマイズした手順(ストークver)

 

もしも、わたしのように少しだけ、ほんの少しだけカスタマイズしたくなっちゃったらこの手順でやってみてください!

 

大丈夫っ!

 

すぐに修正できますので!

 

あい
「保存」を押さなければ変更されないので安心だった!

 

手順1)

 

 

ダッシュボードから「外観」→「カスタマイズ」

 

手順2)

 

 

下にスクロールすると「追加CSS」がある。ポチる。

 

手順3)

 

コードを追加する。

 

※今回は「見出し3」を変更しました!

 

過去記事などを開きながら、見出しがきちんと変更後の表示になっているかを確認する。

 

色とか数字とかちょっぴり変更してみると良いですねっ!

 

あい
おぉーー!!

コレってここを変更するものなのかーっ!

 

新しい発見があるかもっ!

 

わたしはあった!笑

 

ちなみに・・・

 

追加したコードはコレ!

 

 

h3 {
position: relative;
background: #f4f4f4;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #474747;
border-radius: 0 20px 20px 0;
}

 

わたしは超初心者なので、今回は備忘録な記事を書いています。

 

変更は自己責任で行ってくださいねっ!

 

参考にした記事はコチラ!

 

 

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

サルワカさんのサイトとってもわかりやすくて大好きっ!

 

手順4)

 

 

最後に保存はお忘れなくっ!

 

まとめ

 

いかがでしたか?

 

超初心者による、超初心的な解説…!

 

あい
コワイやろ~!

 

誰にも需要ななさそうですね。ハイ。

 

備忘録なんで…備忘録……

 

基本的にカスタマイズはしないタイプですが、また気が向いたらやってみたいと思いますっ!

 

それでは~

 

The following two tabs change content below.
あい
主婦起業アドバイザー。仕事と育児のバランスにこだわる!2児のママ。超実践的!ママキャリースクール主催。自習型オンラインスクール:ママキャリーサロンで、1歩を踏み出したい全国のママをサポートしています!ゲーム・漫画をこよなく愛するちょっぴりおかしな人。

シェアして頂けると飛び上がって喜びますっ!

「好きな事で収入を得る」為の具体的な5つの行動をまとめました!

あい
子育てママの為の無料E-BOOKが完成しましたー!

 

あなただからできる主婦起業とは何なのか?

家事や仕事の合間にぜひ読んでみて下さい。

あなたの知らない「自分自身」がきっと発見できます!

あなたらしい生き方・働き方を見つけてみましょう!

コメントを残す

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


*

ABOUTこの記事をかいた人

あい

主婦起業アドバイザー。仕事と育児のバランスにこだわる!2児のママ。超実践的!ママキャリースクール主催。自習型オンラインスクール:ママキャリーサロンで、1歩を踏み出したい全国のママをサポートしています!ゲーム・漫画をこよなく愛するちょっぴりおかしな人。