【コピペでできる!】「simplicity」に行った10のCSSカスタマイズ

Share


こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。

本記事では、ワードプレスのテーマ「simplicity2」へ最初に加えたCSSカスタマイズをまとめました。

これからsimplicityをつかってCSSのカスタマイズをしようとしている方の参考になれば幸いです。

スポンサーリンク

はじめに

ワードプレスのテーマ「simplicity」へCSSなどでカスタマイズをする際は、公式からも発表がありますが親テーマと子テーマをインストールし、子テーマを有効化しCSSのカスタマイズをおこなってください。親ページを有効化し、CSSの編集を行なってしまうと親テーマのアップデート時にせっかくのカスタマイズが全て消えてしまいます。

simplicityの子テーマを有効化

参考Simplicity2の子テーマ

CSSの編集は、「外観 >> テーマの編集 >> スタイルシート (style.css)」 へ!!

CSSの紹介

ではさっそくコピペでできる!! simplicityのCSSカスタマイズを紹介していきます。

記事と記事の間に境界線

記事と記事の間に線を引く

記事と記事の間にドットの線を引きます。これによって記事と記事が間が強調されバランスが取れた記事一覧にすることができます。

dottedをsolidなど自由に変えることでお好みの線を引くことができます。

関連記事の間に線

関連記事の間にも線を引きたい場合は以下のコードを実装してください。

カテゴリーに背景色

gcbgarden

カテゴリに背景色

カテゴリに背景色をつけることでおしゃれに記事のカテゴリを強調することができます!

よりおしゃれに、上級編は以下のリンクへ!!

LINK【コピペでできる!】simplicity記事カテゴリに背景色をつけてみた

記事の続きを読むボタン

「続きを読む」ボタンのアレンジ

色はお好みで変えてください。

今回のコードはカーソルがホバーしたときは背景色が白色になりテキストが赤色になります。

記事のタイトルにドット柄の線を引く

記事のタイトルに線を引く

記事のタイトルの下に線を引くことでタイトルを強調します!

記事のh2,h3,h4タグの見出し

これがh2

これがh3

これがh4

こんな見出しにしました!

グローバルナビメニューの中央寄せ

simplicityメニュー

simplicityのグローバルナビメニューを中央に寄せる

パソコンでみたときのグローバルナビメニューを中央に寄せます。

simplicityをつくったわいひらさんにお褒めの言葉をいただいたCSSになります!

LINK【コピペでできる!】simplicityグローバルナビメニューの中央寄せ

bodyとsidebarの枠線を消す

simplicityのbodyとsidebarの枠線を消します。

引用などに使えるボックス

このようにボックスを生成します!!
やほやほこんな感じです!!

引用や、強調、まとめなどさまざまな用途で使えます!!

※CSSのクラスは独自で指定してください。

色付きミニ強調ボックス

これ

ぼくは「LINK」を貼り付けるときに使ったりしています。多様な用途で使うことができます!

※CSSのクラスは独自で指定してください。

まとめ

いかがでしたでしょうか。

すべて基本的には「コピペ!!」で、実装できるので”simplicity”を使いはじめのユーザーのみなさんの参考になれば幸いです。

一応、2017.5.10現在、実装しているデザイン一覧です。

そのほかにもいろいろ仕掛けているので気になる部分は聞いていただければな〜と思います。

ではでは〜〜

この記事を書いた人。
20代。とあるネットベンチャーでがんばる働き屋さん、ブロガー。
書きたいことを気ままに書いてます!
Python、プログラミング、米株、カメラ、野球観戦がすき。趣味は新宿散策。

スポンサーリンク

Share

Follow



『【コピペでできる!】「simplicity」に行った10のCSSカスタマイズ』へのコメント

  1. […] 【コピペでできる!】「simplicity」に行った10のCSSカスタマイズ […]

  2. 名前:WordPressで困っていること 投稿日:2019/02/27(水) 00:00:51 ID:fda5679b5 返信

    […] 【コピペでできる!】「simplicity」に行った10のCSSカスタマイズこんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。本記事では、ワードプレスのテーマ「simplicity2」へ最初に加えたCSSカスタマイズをまとめました。これからsimpgcbgarden.com […]

  3. 名前:wordpressでHTMLとCSS【俺のサイト】 投稿日:2019/05/07(火) 08:39:14 ID:771e3c749 返信

    […] 【コピペでできる!】「simplicity」に行った10のCSSカスタマイズ […]