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

ボタンサンプル(ピックアップ)

ポップな感じ

ボタン1です

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

ボタン2です

両端ボーダーばさみ

ボタン3です

ボックスデザイン

ボックス内にラベル

タイトル28

文章ほにょほにょ

枠の途中にタイトル

タイトル26

文章ほにょほにょ

上下にだけ線

上下に線だけ出ますよ

背景塗りつぶし

背景塗りつぶし

スポンサーリンク