ＤＱＷ ドラゴンクエストウォーク、一歩も動かず最強を目指す【ＤＱ...

Amazon Amazonタイムセール祭り2019の準備とおすすめ目玉...

雑記 関東で原付で走ると怖い道３選

Amazon 【2019年版】Amazonプライム特典、kindle書...

さて今回は初期実装されているWordPressの見出しのデザインを変更する方法です。

まずはCocoonのデフォルト見出しがこちら。

・・・味気ないですね。

この既存の見出しのデザインを変更していきます。

まずはcssを使い既存のデザインを無効化します。

まずはWordPressメニューの外観から「カスタマイズ」を選択します。

カスタマイズページへ移動したら一覧から「追加CSS」を選択します。

追加CSSを選択後、下にスクロールし「SCC記入欄」まで移動します。

まずここに今のデザインを無効化するコードをコピー＆ペーストします。

↓無効化するコード↓ /*見出し初期化*/ .article h2, .article h3, .article h4, .article h5, .article h6 { padding: 0; margin: 0; background:none; border-collapse: separate; border-spacing: 0; border-top: none; border-right: none; border-bottom: none; border-left: none; line-height: normal; position:relative; } /*見出しデザインを変える場合はこれより下に記載してください*/

コピー＆ペーストして「公開」ボタンをクリックしたものがこちら。

デザインが無効化されました。

次に見出しデザインを選んでいきます。

今度はCSSに追記したコードの下にデザインコードを追加するのですが

今回は サルワカ様のサイト にある見出しのデザインをつかいます。

今回はコチラを使用してみます。

※ サルワカ様のサイト の画像を引用しています。

「コードを表示」ボタンをクリックして出てきたコードをコピーします。

今回使うコードはコチラ。

↓デザインを変更するコード↓

h1 { background: #dfefff; box-shadow: 0px 0px 0px 5px #dfefff; border: dashed 1px #96c2fe; padding: 0.2em 0.5em; color: #454545; }

このコードをコピーして先ほどの「CSS記入欄」の 「無効化コードの次」 に貼り付けます。

次に今のままだとh1が指定されているため

「h1」の部分を「.article h〇（〇は半角数字）」に置き換えます。

↓変更したい見出しの数字の文字列をコピー＆h1に上書きペースト .article h2 .article h3 .article h4 .article h5 .article h6

今回は「.article h2」を選択します。

変更したら上にある「公開」をクリックします。

反映されてる！やったね(*´ω｀*)

上記の流れで見出し３～６も変更してみましょう。

基本的に反映させたいコードは順次下に置いていきます。

コードをコピー＆ペーストするときは

改行して空白を挿入してから行うと後々変更するとき便利です。

出来てる！やったね(*´ω｀*)

ちなみに見出しの色なのですが

「color: #505050 ;」といったように

#xxxxxxといった「 #の後ろの６行の半角英数を変えることで変更できます。 」

実際に カラーピッカーのサイト で色を探して見出し２の色を変えてみましょう。

カラーピッカーへ

background: #fff200;

見出しの背景色です。ここを「薄い黄色（#fffbba）」に変更します。

box-shadow: 0px 0px 0px 5px #fff200;

見出しの破線の外側の背景色です。ここを「薄い黄色（#fffbba）」に変更します。

border: dashed 1px #ff0000;

見出しのボーダー（線枠）を破線にするというプログラムです。

ここを「赤色（#ff0000）」変更します。

color: #454545;

文字の色です。今回は変更しません。

それでは変更してみましょう。

色の変更に関しては変更後すぐ反映されるので

どこが反映されたか確認しつつ色の調整を行ってください。

以上でデフォルトの見出しのデザインを変更する方法の説明は終わりです。

おつかれさまでした。

デザインは他にも色々とあるので

お気に入りの見出しを見つけて使ってみてくださいね。

下のブログから来たよ！という方はこちらから戻れます。

https://mataneteta.com/wordpressppoiblog/

ブログの作り方 【ブログ初心者用】WordPressを使った「っぽいブログ」の書き方！【初投稿・最初... 2019年5月4日 fourget おふとんしてたらまたねてた

ブログの作り方 WordPress（ワードプレス）書いたブログをツイッターで紹介する方法【ツイッター... 2019年4月25日 fourget おふとんしてたらまたねてた

ブログの作り方 WordPress（ワードプレス）を使ったブログの始め方をわかりやすく解説！【ブログ... 2019年5月2日 fourget おふとんしてたらまたねてた

サーチコンソールの設定方法について ２０１９年最新版

ゼロから始めるプログラミング生活 ＃０

M1チップ搭載MACでMAMP・Vagrant使用のVirtualBoxなどの仮想PCが動かない件

【子供用も】ニンテンドーアカウントの作成・連携・変更方法、2019年完全版！【Nintendo Switch】

セルフスターターとジャイアニズムは紙一重【セルフスターターの意味とは？】

リストから友達を削除・もしくは自分を削除させる方法はあるの？【LINE】

【子供用に】アプリ「NintendoみまもりSwitch」とは？導入・設定方法や使い方を解説【Nintendo Switch Liteにも】

2020年12月

2019年10月

2019年9月

2019年8月

2019年7月

2019年6月

2019年5月

2019年4月

HOME

ブログの作り方

【Cocoon】WordPressの見出しのデザインを変更しよう！【２０１９年最新版】