経緯
見出しに対して、下線を引くクラスを設定したく、共通のCSSを定義できたらいいなと思ったのが発端です。
（画像の赤いところに特定のクラスを設定したら、下線を引けるようにしたい）
やり方
1.CSSクラスを設定
ブロックを選択し、追加CSSクラスを設定。
今回の場合はhead-lineと設定
2.フォルダ構成を作成
任意のフォルダ名で、フォルダ中に下記のファイルを作成する。
フォルダ構成
任意のフォルダ名
├ functions.php
└ style.css
自分の場合は、mycssというフォルダにfunctions.phpとstyle.cssを作成
3.function.phpを編集
下記のコードを入れる。
※どんなCSSを設定する場合も固定で大丈夫です。
function.php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>
4.style.cssを編集
下記のコードを入れる
（ここで自分が反映させたいCSSを設定）
style.css
/*
Theme Name: [フォルダ名] (例：mycss)
Version: [任意のバージョン (例：1)]
Template: [自分が使用している親テーマ (例：Twenty Twenty-Five)]
*/
.head-line{
border-bottom: 1px solid #cdcdcd
}
※親テーマは自分が今使用しているWordPressのデザインです。
管理ページ → 外観 → テーマを参照してください。
5.フォルダを圧縮
圧縮後
6.圧縮したファイルを読み込み
管理ページ → 外観 → テーマからテーマの追加ボタンを押下
テーマのアップロードを押下
ファイルを選択し、今すぐインストールを押下
下記のようにテーマのインストールが完了しました。と出たら完了
7.テーマを有効化
管理ページ → 外観 → テーマから有効化ボタンを押下する。
7.CSSが反映されていることを確認
CSSを編集したい場合
管理ページ → 外観 → テーマファイルエディターから簡単に編集できます。
試しに10pxに変更してみた。
※更新したら下のほうにファイルを更新ボタンがあるので押すのを忘れずに
ちゃんと反映される。
締め
無事設定できました！
少し面倒ですが、毎回すべてのブロックにCSSを適用するよりは楽だと思うので、やり得ですね！
以上。お疲れさまでした。