Simplicity2の見た目のカスタマイズ

Simplicity2の見た目のカスタマイズ

Simplicity2はWordPressに対する無料のテーマです。

2019年11月現在Ver.2系が最新となっています。

無料なのに本当にすばらしい機能満載で、初心者にはぜひ最初に使ってもらいたいテーマです。かくいう、自分も初心者ですが(笑)

そんな初心者でも、簡単にカスタマイズしてオリジナルのサイトが作れるのが、Simplicityです。

上記ページからダウンロードできます。その際には、必ず「子テーマ」も一緒にダウンロードして導入しておきしましょう。

Simplicity2をカスタマイズするに当たって、いろいろ調べたり、試行錯誤した内容を随時更新していきたいと思います。

スポンサーリンク
learge-AdSense

見た目のカスタマイズ方法

見た目のカスタマイズは、基本的に「style.css」というサーバ上にあるファイルを編集することで可能になります。Word Pressでは、左メニューで

「外観」>「テーマの編集」

を選択すると、編集画面が出てきます。

テーマの編集のナビゲーション

ここで追記や削除を行い、最後に画面下の「ファイルを更新」をクリックして保存すれば、カスタマイズ完了です。

ファイルの更新のナビゲーション

見出し

見出しとは↑このような大きな段落を区切るデザインを指します。

この見出しをきれいに設定すると、より見やすいサイトに仕上がっていきます。
そして、自分が思うようなデザインを比較的簡単にできるのがGood。

見出しのカスタマイズはググれば(「Simplicity 見出し」などで検索)、いくらでもソース(変更するための記述)が出てきますので、適当に2~3サイト見て回って必要な記述を「Style.css」の一番下に追記していくだけでOKです。

ちなみに、上記の見出しのソースは以下です。コピペして貼っつけてください。

背景色を変えたかったら、「background-color: #e6eae6」の「#e6eae6」を自分の好きな色を指定すれば良いです。
こんな感じで文字の色とかも調整しましょう。
色は原色大辞典などのサイトを見て選べばよいと思います。

/*h2タグの変更*/
.article h2 {
background-color: #e6eae6;/* 見出し背景色 */
border-left: 7px solid #736d71;/* 左側の縦線 */
font-size: 23px;
color: #222222;/* 文字の色 */
padding: 10px 30px;/* 文字の位置 */
margin-bottom: 35px;/* 見出し下の空白*/
}

本文(投稿記事)の文字

本文(投稿記事)の文字の色を変更したくて、いろいろググって見たのですが、あまり的確に出てこなかったので、ここに書いておきます。

以下を「style.css」の一番下に追記してください。そうすれば本文の文字の色とサイズを変えられます。

これらのほかにもいろいろフォントとか変えられますので、試してみてください。

ご興味がある方は、こちらのサイトのリファレンスを見て、カスタマイズしたいものをの間に記述すればOKです。

もし、「変更して元に戻らなかったらどうしよう・・・」、というような不安があれば、変更前の「Style.css」の内容をすべてコピーして、メモ帳等に貼り付けておけば良いです。
おかしくなっても、メモ帳に貼り付けていたものを、コピーして、「style.css」に貼り付け直せば、すぐに元に戻ります。

/*本文の文字の変更*/
body {
color: #222222;
font-size: 16px;
}

更新日情報のスタイル

Simplicityはデフォルトで、トップページの記事一覧のところに、記事の更新日等記載されています。こちらを消す(非表示)には、「左メニュー」で、

「外観」>「テーマの編集」>「レイアウト(投稿・固定ページ)」

を選択し、

投稿日の表示」と「更新日の表示

チェックを外せばOKです。

カスタマイザのレイアウトのナビゲーション ⇒  投稿日と更新日のナビゲーション

また、表示させるにも、スタイル(見た目)を変えたい場合は、以下のような記述を「style.css」の一番下に追記すればOKです。
こちらも、リファレンスを見て、自分なりにアレンジすればより良くなると思います。

/*更新情報スタイルの変更*/
.post-meta a {
color: #222222;
}
.post-meta {
font-size: 16px;
background: #f5f5dc;
color: #222222;
border-radius: 2em;
}
スポンサーリンク
learge-AdSense
learge-AdSense

シェアする

フォローする