僕がTHE SONICで最初に設定したところを簡単にまとめました。
あくまで僕の設定ですので、使えそうなところだけ試してみてください。
（もしかしたら説明の中で間違っているところがあるかもしれません…。）
目次
プロフィール画像の設定
でプロフィール画像を設定します。
（注意）僕はプラグインの『 Simple Local Avatars 』を使っています。
『Gravatar』 の使い方はわかりませんm(_ _)m
画像を設定すると、記事上や記事下、サイドバーに設定するプロフィールに画像が入ります。
※ウィジェットの『[THE SONIC]書いた人』に画像が入ります。
THE SONICのプロフィールは4パターンのデザインをワンクリックで選べます！
（↓ 画像は別のブログのものです）
基本デザインを選ぶ
基本デザインの設定をします。
まず最初はお試しで、カスタマイザーの上にある次の4種類をポチポチとさわってみるとTHE SONICのデザインがざっくりわかります。
- デフォルト
- シンプル
- スタイリッシュ
- 優しい
細かい設定もできます。
- 一覧ページのデザイン
- 記事ページのデザイン
- サイドバーのデザイン
という感じで、それぞれのデザインについて『シンプルな感じ』や『まるっとした可愛らしい感じ』と選べます。
ワンクリックでポチポチ変更できて楽しいです。
サイドバーの設定
サイドバーには、次のウィジェットを入れました（あくまで僕の設定です）。
- 検索
- 書いた人（プロフィール）
- カテゴリー
僕の猫ブログには『タグ』がないので、タグは入れませんでした。
管理画面の左側にあるウィジェットをドラッグしながら、右側のサイドバーに入れます。
アイキャッチにある『PV数』を非表示に
デフォルト設定だとアイキャッチに『PV数』が表示されます。
僕はPV数を表示したくなかったので非表示にしました。
非表示にする設定はワンクリックでできます。
でOKです。
この設定エリアではPV数のほかにも、次の項目を非表示にできます。
- 記事のいいねボタン
- ページの更新日時
- ページの投稿日時
- 読了時間
アイキャッチ『バイラル風』のタイトルの文字色を濃く変更
アイキャッチの種類は投稿画面右側のサイドバーから選択できます。
例えば、バイラル風デザインは上の写真の赤枠部分から選びます。
上の写真はデフォルトのアイキャッチ『バイラル風』です。
個人的な意見ですが、「タイトルの文字色が少し薄いかな」と感じました。
追加CSSを教えていただいて、タイトルの文字色を濃く変更しました。
上の写真は追加CSSで文字色を濃くした状態です。
マサオカさんにコードを教えていただきました。
.eyecatching-mark1 .entry-title {
opacity: 1;
}
上のコードがタイトルの文字色を濃くするものです。
公式の『よくある質問』にも同じ内容がありました。
記事下の関連記事の調整
記事下に表示される『関連記事』も調整できます。
- 表示数
- 表示順
- 表示ルール
と細かく設定できます。
参考：グーテンベルクについて
僕はグーテンベルクを本格的に使うのはTHE SONICが初めてでした。
最初にすごく困ったことが次の2つです。
- 空白の改行ができない…。
- ブロックのコピペができない…。
この2つについてとても参考になった記事をご紹介します。
communitycom さんの『「スペーサー」ブロックで改行時の行間を調整しよう！』
ah-kutsu.net さんの『ブロックエディタでブロックをコピペする方法』
こちらの2つの記事を読んで勉強したところ、スペーサーブロックを使って簡単に空白の改行ができるようになり、ブロックのコピペも簡単にできるようになりました。
テキストリンクに下線を設定（2020/04/04追記）
テキストリンクに下線を入れました。
上の写真の『マロンのInstagramはこちら』の部分です。
デフォルトだとテキストリンクに下線はありません。
上の写真はデフォルトのテキストリンクです。
下線がありません。
もしかしたら、また『下線ナシ』に戻すかもしれません。
追加CSSは公式の『よくある質問』にありました。
.entry-content a {
text-decoration: underline;
}
まとめ
THE SONIC 楽しいです！