「SWELL」のおかげでブロックエディタと仲良くなったような気がする。

2021年9月12日2021年10月16日

SWELLを利用してトップページカスタマイズメモ

やさしんぷるデザイン

基本がわかる！SWELLでサイト型トップページをおしゃれにカスタマイズ | やさしんぷるデザイン WordPressテーマ「SWELL」を使ってブログのトップページをサイト型にカスタマイズする方法を完全解説します。固定ページの作り方、デザインをおしゃれにするために意識して…

丁寧にレクチャーされており、まさかこんな簡単にできるとは思わんかった…！
やり方については↑サイトを参照にしてください！！（丸投げ）　( ‘д‘⊂彡☆))Д´) ﾊﾟｰﾝ

ほんまもんにオシャンティー（死語）なサイトができちゃうので…！

記事タイトルやサイドバー、メニュー部分とかフォントがベタすぎてつまらんから弄った。
とりあえずgoogleのWEBフォント（日本語）を引っ張ってきた。…てかSWELLの場合、CSSタグを入れたのはこれぐらいだったような気がする。あと拍手ボタンカスタマイズとか。

Google Fonts

Browse Fonts – Google Fonts Making the web more beautiful, fast, and open through great typography

使用するのは「M PLUS Rounded 1c」「Kosugi Maru」の2つ。

フォントを入れるにはダッシュボードメニュー→外観→追加CSS　…から入れました。

STEP

追加CSSにインポートさせる

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=M+PLUS+Rounded+1c:wght@500&display=swap');

※↑は 「M PLUS Rounded 1c」「Kosugi Maru」 を利用した例。
他フォント使うときは変わるからその都度どうにかしてください（丸投げ…）

STEP

サイドバーのフォント変えるぞよ！

.c-widget__title {
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

STEP

記事タイトルのフォントも変えてやんよ！

.p-postList__title {
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

STEP

メニューのフォントも変えちゃる！！

.c-gnav {
	font-family: 'Kosugi Maru', sans-serif;
}

STEP

ついでに見出しのタイトルもフォント変更した。

h2,h3 {
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

まぁ、ここらへんは普通か。

とりあえずこれぐらいしかやらんかった。でもWEBフォントに変更しただけでもテンション上がる…！
最近googleWEBフォントも日本語対応が増えてきてすごく有り難いと思います。はい。

note（ノート）

まろやかWEB拍手のボタンをフラットデザインにしたい！(2021.5.19一部修正)｜りう ※2023.1.3現在、「まろやかWEB拍手 for WordPress」は最新のPHPには対応していないようで、不具合やセキュリティ上の問題が起こる可能性もございますのでそれへの対応も含…

noteの↑記事参考にしてやった。無機質だったまろやか拍手のボタンもちょいとマシになったような気がする。
アイコンとか画像にやるのは分からんが…（殴

送信中です

※コメントは最大500文字、5回まで送信できます

送信中です送信しました！

1 2