これだけやっとけば記事が書ける!Simplicity2の基本カスタマイズ!
記事間に線をいれる・記事を読むボタンを入れる
ここをカスタマイズしたら、「よし!記事を書こう!」となれる部分のカスタマイズのご紹介です。
ワードプレスでカスタマイズするときは、ダッシュボードのメニューバーの外観からテーマの編集でcssのコードを入れていきます。そのcssもpcのcssやモバイルのcssとレスポンシブルcssがあります。
わたしは、レスポンシブルではないので、基本Pcのcssを記載し、モバイルcssを記載してくださいと、書かれているているサイト様があれば、モバイルcssに記載しています。
そもそもCSSってなに?
CSSとは、スタイルシートと呼ばれるもので、デザインの変更する時に使うものだと書かれていました。ここをいじると、影をつけたり、ライン風会話ができたり、こうしたいと思うデザインができるのですね!CSSすごい!!
わたしも初心者なので、一からコード書くのはしんどい!!
下記のけせらせライフ様から、色々なCSSをコピペさせて頂きました。
コピペをさせてい頂けるサイト様が多くて本当ありがたいです。
ありがとうございます。
【Simplicity2カスタマイズ】WordPress初心者が行った6つの方法【まとめ】
見出しって何よ!?と見出しカスタマイズ
文章に見出しをつけ、文章構造をわかりやすく伝えるために使用するタグだそうです。大体ブログで書く見出しサイズはh1~h4までだそうです。
simplicityでは記事タイトルにh1が使われています。
基本的にh1は、1ぺージにつき1回のみ使用。
なので、記事を書く時にいれる見出しは、h2からh3になります。
h2が中見出し、h3が小見出しとなります。
h2のみで記事を完結してもOKで、h3は何度いれてもOKみたいです!
見出しをルール通りに使うことがネット上では大切です!!
見出しはh1~h6まであります。見出しのカスタマイズですが、simplicityの標準仕様の見出しだと、すごくシンプルなので、もう少し華やかにしたい!と思いサイトを検索して、見出しをカスタマイズさせて頂きました。わたしが使わせて頂いたのは、下記のサルワカ様のサイトです。
色々素敵なCSSの見本が書かれているので、是非ご覧ください!!
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
カスタマイズする見出しのCSS名がわからない!!ということです!
見出しも関連記事だったり、記事の見出しだったり色んな見出しがあります。それによって、ワードプレスでは、CSS言語が変わってきます。まずそこが分からずににかなり悩みました・・・。
h2{
border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/
}とCSSが書かれています。これをワードプレスのcssにコピペしたら下記の

simplictyの記事のh2の見出しをカスタマイズするなら、
.article h2 border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/
にしないと、上記のようなデザイン記事の見出しはできないのです!!
コピペしても、反映されないのでなんでか?と思えばそこが原因でした。
それと、同じようにサイドバーの見出しですと、前にsidebar h3としないと反映されないです。
ここがカスタイズの初心者には、分からない所でした。
とりあえずわたしが、めっちゃ時間がかかった見出し編これにて終了致します!!
ここまでお読み頂きありがとうごいます。
※今は、有料テーマのJINを使っています。




