CSS編集(simplicity)ボタン、ボックス、リスト

「大人を楽しむ」サイトは、simplicityを使用して作成しています。

はじめは、特に手を入れずにそのまま使っていましたが、色々デザインを変えながら、見やすく楽しいサイトにしたいなぁと思い立ったわけです。

以前も、CSSを編集したりしていましたが、ちょっと時間がたつとすぐ忘れてしまうので、備忘を兼ねて情報をまとめています。

SimplicityのCSS修正

『追加CSSとstyle.cssの違い』として、こちら(外部サイト)を参考にしました。

結論：「SimplicityのCSS修正では、 style.css を使うのがよい」

理由： 管理のしやすさの観点 （追加CSSはDBにある。style.cssはFTPで見れる）

style.cssの場所

「外観＞テーマの編集＞style.css」または 「外観＞テーマエディター＞style.css」 で編集したファイルは、 FTP経由「/wp-content/themes/simplicity2-child」 に格納されている。

ボタン、リスト、ボックスをCSSで作成

CSSで作成するにも、サンプルコードがほしいですし、割とデザインや色のセンスは人に任せたほうがいいくらいなので、色々参考にさせてもらってます。

Webサイト「サルワカ」さんのサンプルは、印象がやわらかく見た目もわかりやすいので、参考にさせてもらいました。

ボタンサンプル（ピックアップ）

ポップな感じ

表面に丸みのある角丸ボタン

両端ボーダーばさみ

ボックスデザイン

ボックス内にラベル

枠の途中にタイトル

上下にだけ線

背景塗りつぶし