シンプリシティ2をショコラに似せてみる!

シェアしてもらえると頑張れます(/・ω・)/

おはにちばんは(・ω・)ノ

ショコラのデザインがとても好きだったので、

シンプリシティ2で勝手に真似させてもらいました。

ショコラを作ってくれた人ごめんなさい(つω`*)

パクったんじゃなくてオマージュしたんです!!

まだまだ完璧じゃないし、設定し忘れてるところが何か所か見つかったけど、

とりあえず今現在のCSSを紹介しておきます!(^ω^)ノ

よかったら使ってください!!

広告

【8月29日更新】これをコピペでショコラっぽく!

これからも時々、CSSをいじってみてショコラに似せていこうと思います。

だから見つけやすいように最初にコードを書いておきますね!(●´ω`●)

使い方はコードのすぐ下に書いてあります(^ω^)ノ

素人なので、順番はバラバラだし、内容がおかしいかもしれません。

いい書き方があったら教えてくださいね!・゚・(つД`)・゚・

簡単にコピーする方法!

theme010

この画像みたいに○が付いてるところをポチしたら、

書いてあるコードが全部選択されます!

そのまま右クリックのコピーか、Ctrl+Cでコピーします!!(●´ω`●)ノ

使い方

「CSS編集」にコードをコピペする!

テーマを変えるのに、「テーマの編集」じゃなくて「CSS編集」です(・ω・)ノ

css001

ワードプレスのダッシュボードの「外観」→「CSSの編集」をぽち!

css002

こんな画面になります。

6行目の「*/」の後ろから改行して書きます!

css003

コピペしたらこんな感じになります(^ω^)ノ

あとは右上にある緑の「スタイルシートを保存」をぽちして完成です!

すごく簡単でしょ!(●´ω`●)

色の設定

コードをコピペするだけじゃなくて、

simplicity2のカスタマイズで色の設定も必要です!(・ω・)ノ

少しだけ面倒だけど、

最初に設定したら2度と触らなくていいから頑張って変えちゃいましょう!!

この設定が終わったらほぼ終わりですよー(●´ω`●)

theme007

ダッシュボードの「外観」→「カスタマイズ」をぽち!

theme008

こんな画面になるから、上から2番目の「色」をぽち!

theme009

この画面で色の設定をします!

それぞれの色の横の「色を選択」ってところをぽちして色を変えます!

色の詳細です

色コード(#で始まる7桁)を「色を選択」ってとこにコピペしてください!

記入漏れがあったら教えてくださいませ(つω`*)

上から順番に書きました!

「背景色」:そのまま(変更なし)

「リンク色」:#f56993←これは好きな色でいいと思います!

「リンクホバー色」:#895628

「ヘッダー外側背景色」:そのまま

「ヘッダー内側背景色」:そのまま

「サイトタイトル色」:#41250c

「サイト概要色」:#41250c

「モバイル時ヘッダー背景色」:そのまま

「モバイルサイトタイトル色」:#41250c

「モバイルサイト概要色」:#41250c

「グローバルナビ色」:そのまま

「グローバルナビリンク色」:#41250c

「グローバルナビリンクホバー色」:そのまま

「メニューボタン色」:#895628

「メニューボタン背景色」:そのまま

「トップへ戻るボタン色」:そのまま

「トップへ戻るボタン背景色」:#ba8d65

「フッター色」:#41250c

以上です(^ω^)ノ

これでショコラっぽい外観になるはずです!

その他の設定

ヘッダー画像

ついでにもう少しいじってみます!

ブログタイトルの背景の画像をヘッダー画像と言うっぽいです。

ここは適当に気に入った画像を使ってください(・ω・)ノ

私は写真ACってサイトで拝借しました(^ω^)

「カスタマイズ」の「色」の下の「ヘッダー」で設定できます!

レイアウト

私は「カスタマイズ」の「レイアウト(全体・リスト)」の、

「一覧リストのスタイル」を「大きなエントリーカード」にしています(・ω・)ノ

私がショコラに似せるためにやったのは、多分このくらいです(^ω^)

他にもあったかも(つω`*)

もしもうまく出来なかったらコメントしてください!!

CSSの編集について

私はCSSを全然知りません。

知ってるのはぽぽろんさんに教えてもらった、

「パーツごとに名前がある」って事と、

「最後に書いたことが適用される」ってことだけです!

私は最初、

背景の色を変えるなら、

背景の色について書いてあるところを探し出して、

そこに書いてある色コードを書き換えるものだと思っていました。

でもCSSっていうのは、最後に書いたことが適用されるから、

すでにどこかに「背景は白」

って書いてあっても、

それを無視して「背景は黒」って書いただけで

背景が黒くなるんです!

だからごちゃごちゃ書いてある謎の文字列から、

「背景は白」ってところを探さなくていいんです!

「背景は白」って書いてあるまま、ほったらかしててもいいんです!

いやー。

そんな便利な機能があったんですね!!(●´ω`●)

それと、

「パーツの名前がある」

っていうのが分かっただけで、カスタマイズしやすくなりました!

例えば背景のパーツは、「コンテナ」でした。

この名前はテーマを作った人が好きに決められるみたいです!

私なら「背景」にすると思うけど。

こういう世界では「コンテナ」が主流みたいです(´・ω・`)

パーツの名前が分かれば、

「コンテナの色を白、コンテナの幅をいくら、コンテナの余白はいくら」

って感じでどんどん書いていけば設定できるんです!

ただ・・・

パーツの名前を探すのが少し大変でした(つω`*)

私はこんな感じで設定できました!(^ω^)ノ

感想

CSSを初めて触ってみました。

何も分からないまま手探りで作ったので今の感じにするのにも、

2日間ずーっとパソコンとにらめっこでした。

これからも気が向いた時に少しずつショコラに似せていくと思います。

半年に1回くらい覗いてもらえたら、

CSSが更新されてるかもしれません(^ω^)

できればコメントに、こんなのも作ったよー!

って感じで書いてもらえたらすごくうれしいです(つω`*)←たりきほんがん

☆☆合わせて読んで欲しい記事☆☆

テーマをショコラからシンプリシティに変えてみました!

パーマリンクにカテゴリが含まれてるのに、変えてみました

投稿数が100になったから途中報告です!

今回も最後まで読んでくださってありがとうございました(^ω^)

1
広告

シェアしてもらえると頑張れます(/・ω・)/

ふみえをフォローする(●´ω`●)