今回は、wordpressの投稿記事の見出しをカスタマイズする方法について記事にします。
簡潔に説明すると、FTPでstyle.cssをダウンロードし、style.cssを編集。アップロードすれば完了という簡単な作業です。
簡単な作業と言っても、私のような初心者にはハードルが高いものですので、ちょっと説明が長くなるかも知れません。
FTPアプリケーション
上記のとおり、FTPでダウンロードstyle.cssを編集FTPでアップロードという流れですが、まずはFTPでダウンロードするところから。
準備するのはFTPアプリケーション。
私はFileZillaを使用しています。
他にもFFFTP等があります。
正直、私はこの２つしか使用したことがありませんが、大体使い方は一緒だと思います（笑）
[sanko href=”https://ja.osdn.net/projects/filezilla/” title=”Filazilla” site=”Filazilla”]
ダウンロードしたら、ファイルタブサイトマネージャーを開いて、ホストとユーザーIDとパスワードをセット。
各項目はお使いのレンタルサーバーの設定により変わりますので、ここでは省略。
接続できたら右のリモートサイト側を「/ドメイン名/public_html/wp-content/themes/使用中のテーマ/」に移動させます。
[box class=”box4″]XSEVERではこのディレクトリ（フォルダ）ですが、レンタルサーバーによってディレクトリの場所が違うかも知れません。[/box]
ダウンロード
ローカル側を保存したいフォルダに移動させ、リモートサイト側のファイルをダブルクリックすれば、自動でダウンロードします。
この先、失敗すると復旧までに非常に手間がかかります。
.cssファイルだけなら、泣く泣く何とかなりますが、function.php等の本体に関する何らかのファイルだったりするとほんとに面倒です。
したがって、確実に以下の項目に注意しましょう。
[box class=”box27″ title=”絶対に実施！”]
- ダウンロードしたファイルをコピペし「backup0219_style.css」等、名前を変えて確実にバックアップを取る。
- 子テーマを使う。（親テーマを間違っていじらない）
[/box]
cssファイルを編集
そもそもcssファイルは、カスケード・スタイル・シートファイルの略で、ブラウザに表示させるデザインを一手に担うファイルです。
ダウンロードしたばかりの子テーマのcssファイルには何も書いていないかも知れません。
一方の親テーマのcssには莫大なデータが記載されています。
本当に間違っても親テーマのcssファイルを編集するようなことはやめましょう（笑）
うまく行ったと思っても、違うところに余波が来る恐れがあります。
cssを編集するに当たって、テーマによっては強制的にcssを当てるような構造になっている場合があります。
テーマの説明書をよく読んで実施してください。
ちなみに、私が使用しているaffinger5（wing）では、カスタマイザーから見出しの「cssの無効化」にチェックを入れないと、妙な部分だけ変わったり、全く変わらなかったりします。
[memo title=”MEMO”]説明書はよく読もう！[/memo]
どんな見出し？
見出しのデザインどんな感じにしたいでしょうか？
サルワカさんのサイトに行くと、本当にたくさんの見出しが公開されています。
[sanko href=”https://saruwakakun.com/html-css/reference/css-sample” title=”コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）” site=”サルワカ”]
例えば、この中から見出しをコピペする場合、style.cssにこのままコピペしてはいけません。
例えば、h3の見出しを変更したい場合、下のコードをコピペする・・・・。
h3 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}と大変なことになりうる恐れがあります。
それは何故か。
h3の見出しには、他にも使われている場所があるかもしれないからです。
例えばサイドバーのメニューだったり、投稿記事下の関連記事の見出しだったりします。
そんなときどうするか。
ブラウザの開発者ツールを使って、IDやクラスを絞り込みます。
ブラウザを開いて、自分のサイトに飛んで、「F12」ボタン。
これだけで開発者ツールを使うことが出来ます。
ですが、開発者ツールの使用の説明は、また別の機会にしたいと思います。
決して、めんどくさくなったわけではありません！
一応、さわりだけ。
[list class=”stitch-red”]
- 赤い四角の部分をクリック。
- スタイルシートを当てたい部分をクリック。
- そのタグは何であるかを確認。
- コロコロコロと上にスクロールして、その部分の最小単位のクラスを探す。
- cssに書き込む。
[/list]
こんな感じです。
慣れればそんなに手間ではありません。
最後に
DMで友人から教えてとの連絡が入ったので記事にしてみました。
もう少し詳しく説明できれば良いのですが、面倒だった時間もなかったので慌ててしまって。
少しでも参考になれば嬉しく思います。
最後までお読みいただきありがとうございました。