wordpress編

これだけやっとけば記事が書ける!Simplicity2の基本カスタマイズ!

初心者が最初にやったSimplicity2の見出しのカスタマイズ
さるとりんご
さるとりんご
ワードプレステーマ Simplicity2でこのカスタマイズをしとけばとりあえず記事が書ける!という基本のカスタマイズを記事にしています。

これだけやっとけば記事が書ける!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の見出しのCSSを
h2{
border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/
}とCSSが書かれています。これをワードプレスのcssにコピペしたら下記の
見出しデザインになるかとおもいきや!?ならない!! 
これは、このままsimplicityの記事の見出しには使えません。
simplictyの記事のh2の見出しをカスタマイズするなら、
.article h2 border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/

にしないと、上記のようなデザイン記事の見出しはできないのです!!
コピペしても、反映されないのでなんでか?と思えばそこが原因でした。
それと、同じようにサイドバーの見出しですと、前にsidebar h3としないと反映されないです。
ここがカスタイズの初心者には、分からない所でした。

とりあえずわたしが、めっちゃ時間がかかった見出し編これにて終了致します!!

ここまでお読み頂きありがとうごいます。

※今は、有料テーマのJINを使っています。

あわせて読みたい
ワードプレスで会話風吹き出しをCSSとHTMLで作ってみた!
ワードプレスで会話風吹き出しをCSSとHTMLで作ってみた!CSSとHTMLで会話風吹き出しを作ってみました! こんな風に、投稿画面で吹き出し画像を使っておられるサイトを見て、 わ...
あわせて読みたい
ワードプレスとツイッターの連携をして、画面付き自動投稿が出来た
Next Scripts: Social Networks Auto Posterで、ツイッターへ画像付き自動投稿ができた! Next Scripts: Social Networks Auto Posterを使ってツイッターへ自動投稿する方法 ツイッター...
あわせて読みたい
全くの初心者がXサーバと独自ドメインの申し込みをしてみた!
全くの初心者がXサーバで独自ドメイン取得ができました!まずはXサーバーでと独自ドメイン! ブログを書きたい!と思って色々ネットなどで調べてみると、まず無料ブログか、ワードプレスかどちらを選...
あわせて読みたい
グーグルアドセンス合格 審査の際に気を付けた事
2018年5月グーグルアドセンス審査合格!審査の時の注意点3点2018年5月1日にグーグルアドセンスに審査合格しました! 2018年5月1日にグーグルアドセンスに合格しました! 段々とグーグルア...
あわせて読みたい
初心者が入れておく必須wordpressプラグイン5つ!
初心者が入れておく必須wordpressプラグイン5つ!初心者がとりあえずこれだけ入れればOKなプラグイン5つ プラグインって何よ?? まず、プラグインって何?ってところから始まったさると...