2020/02/05SHAREツイートシェアはてブGoogle+PocketLINE「XeoryBaseのテーマを使っているけど、見出しのデザインを変えたい。初心者だから簡単にできる方法を知りたいな。」こういった方向けの内容です。XeoryBaseは全体的にシンプルなデザインになっていて、かなり洗練されたテーマです。いえ「見出しだけはもう少し目立たせたい」と考える方も多いでしょう。そこでこの記事では、XeoryBaseの見出しのカスタマイズ方法について、実際に僕が行った流れを元にお伝えしていきます。初心者でも簡単に作業できるように、コピペも可能な内容ですので、安心して進めていってください。見出しのカスタマイズを行なっていきます。ここで行うのは以下の2点だけ。今回行うカスタマイズはデザインのお話なので、「CSS」というコードの編集を行なっていきます。編集がCSSファイルなのでほぼ問題ないとは思いますが、作業前には念のためバックアップを取っておくようにしましょう。»参考:【WordPress】バックアップが取れるプラグイン「BackWPup」の設定方法と使い方というわけで上記内容について、順に解説していきます。カスタマイズしたい見出しのコードを探すまずは見出しのコードを探していきます。手順としては以下の2ステップでOKです。STEP.1CSSの編集画面へ移動ワードプレスの管理画面から「外観」→「テーマ編集」を選択し、画面右側のテーマファイルの中にある「スタイルシート(style.css)」を選択します。h2」というコードを探します。※XeoryBaseでは450行目付近にあります。style.cssの中で1度クリックし『command』+『f』を押すことで検索もできます。(画像は検索して探したものを使用しています。h3=見出し3」といった感じです。編集したい見出しのコードの数字を間違えないように注意しましょう。いうわけでここから、「見出しの2と3」を例に実際にカスタマイズを行なっていきます。コードを編集して見出しをカスタマイズするここからコードを置き換える形で、見出しのカスタマイズを行います。今回はサンプルとして「見出し2・見出し3」の編集を行うので、置き換える部分は以下ですね。13px;}」までを丸ごと以下のコードに置き換えましょう。13px;}これで「ファイルを更新」をクリックすればカスタマイズは完了です。作業が完了したらカスタマイズ内容が反映されているか、実際に自分のサイトを確認しておきましょう。以下のように見出しが変化していればOKです。これでサイトの印象も変わり、見出しもしっかり目立つようになりました。CSSをカスタマイズしても反映されない場合は実際にサイトを確認してみると「えっ?何も変わってないんだけど...。」と、初心者の頃だと焦ることが結構あります。これは「履歴」が影響しているだけです。WEBの履歴を1度削除して、もう1度サイトを開いてあげればOK。することでカスタマイズ前のCSSがリセットされて、置き換えたコードのデザインに切り替わります。これでも反映されないという場合は、そもそもコードの記述が間違っている可能性があるので、「;」や「}」など細かい部分まで確認するようにしましょう。補足:カスタマイズした色合いがそうじゃない感がある人へ今回の内容ではサンプルとして落ち着いた配色のカスタマイズを行いました。いえ、「欲しいのはその色じゃない」という方のために、コードの編集について少し補足をしておきます。置き換えたコードを見てもらうと「/*〜〜*/」と最後についている場所があり、この前にある「#〇〇〇〇〇〇;」という部分が色を指定しているコードになっています。この〇〇にあたる部分はカラーコードと呼ばれ、これを変更することで以下の場所の色を好きに変えることが可能です。/*背景色*/:見出し2の背景色を変更できる/*文字色*/:見出し2の文字色を変更できる/*ボーダーカラー*/:見出し3の左のラインの色を変更できる色の文字列が分からないというかたも[カラーコード]でググれば、色とコードがすぐ出てきますので、この辺は自分で確認しつつやってみてください。いうわけで、今回の内容は以上となります。2019年2月6日こんにちは!ちょっと質問よろしいでしょうか?WEBの履歴を消すのはどうやってやるのでしょうか?コード入れ替えたのですが、反映されないようでして。