WordPressを学習中の方へ情報を提供します。お役に立てば幸いです。
ローカル環境でWordPressを導入している方に無料テーマCocoonを使いつつ、見出しタグ(h1など)で極太ゴシックを使う方法を説明したいと思います。ローカルではなくて、サーバー環境でも使えると思います。
試してませんが。
準備 https://seed.line.me/index_jp.html
(メッセージアプリLINEが無料で提供している極太ゴシック体フォントです。商用、非商用共に可)
よりzipファイルをダウンロードして下さい。解凍します。そうするとフォルダが3つDesktop、WEB、Appと3つのフォルダが出来ます。DesktopはExcelやWordで使う場合です。WordPressで使う場合はWEBを選択します。そしてさらにその中にあるwoff2を選び、さらにそのフォルダの中に
LINESeedJP_OTF_Th.woff2 細字ゴシック Thin
LINESeedJP_OTF_Rg.woff2 普通ゴシック Regular
LINESeedJP_OTF_Bd.woff2 太ゴシック Bold
LINESeedJP_OTF_Eb.woff2 極太ゴシック ExtraBold
細ゴシックから極太まで4種類あるので好きなのを選んで下さい。全部使ってももちろん構いません。
ローカルサーバー環境(疑似サーバー環境)
・Local(旧Local Host)
・WordPress
・Cocoon
・Cocoon-child
をそれぞれインストールして設定します。
私の場合、LINESeedJP_OTF_Eb.woff2を使いました。CSSでh1～h3に使いたかったので。
C:\Users\hogehoge\Local Sites\wish-fulfilled\app\public\wp-content\themes\cocoon-child-master\fontsにお好きなフォントファイルをコピーします。fontsフォルダがない場合は作ります。
次にC:\Users\hogehoge\Local Sites\wish-fulfilled\app\public\wp-content\themes\cocoon-child-masterフォルダにある、style.cssを開きます(開くソフトはVSCodeが良いと思います)
style.cssは念の為コピーをとっておき、次の内容で上書きして下さい。
'''CSS
/* style.css */
@charset "UTF-8";
@import url('../cocoon/style.css');
/* LINE Seed JPフォントの定義 /
@font-face {
font-family: 'LINE Seed JP';
src: url('fonts/LINESeedJP_OTF_Eb.woff2') format('woff2'); / フォントファイルのパスは要確認 */
font-weight: 400;
font-style: normal;
}
/* 共通スタイル /
body #main .entry-content h1,
body #main .entry-content h2,
body #main .entry-content h3 {
font-family: 'LINE Seed JP', sans-serif; / 詳細度を上げてフォントを指定 */
font-weight: 400;
line-height: 1.4;
margin: 1em 0;
}
/* h1スタイル */
body #main .entry-content h1 {
font-size: 2.5em;
color: #505050;
padding: 0.5em;
background: linear-gradient(transparent 70%, rgba(167, 214, 255, 0.5) 70%);
text-align: center;
}
/* h2スタイル */
body #main .entry-content h2 {
font-size: 1.5em;
padding: 1rem 2rem;
border-top: 4px solid #d8dcdc;
border-right: 4px solid #666;
border-bottom: 4px solid #333;
border-left: 4px solid #868888;
border-radius: 0;
background-image: -webkit-linear-gradient(135deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
background-image: linear-gradient(-45deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
color: #000004;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
/* h3スタイル */
body #main .entry-content h3 {
font-size: 1.25em;
color: #333;
background-color: #fffacd;
border-left: 5px solid #d9534f;
padding: 10px 15px;
margin: 20px 0;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
/* #toc2 */
body #main #toc2 {
all: unset;
}
'''
CSSは一例です。ご自分でカスタマイズして下さい。
Cocoonにはh1,h2,h3に目次生成機能がありますが、不要な場合はCocoonの設定画面からOFFに出来ます。
通常はCSSを書き換えても、Cocoonによって上書きされるのですが、これは上書きされません。
理由は今回使用したセレクタの詳細度が、Cocoonのデフォルトスタイルで使用されているセレクタの詳細度を上回ったためです。CSS内の.entry-content はh1～h3のスコープを記事本文に限定するためです。