Simplicity2のCSSカスタマイズまとめ(全15個)

カスタマイズ備忘録だ。このサイトで使用しているWordPressのテーマ「Simplicity2」のカスタマイズをまとめてみた。各ページでカンタンな説明を付け加えている。ここでは子テーマのCSSに追記したものだけを抜粋した。並べたのは9項目。細かく分ければ全15個ある。

Simplicity2のバージョンは2.6.3。

記事とサイドバーの背景色

色は他の色と揃えるために生成り色 #fbfaf5 に指定してある。

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、記事の背景色を変更してみた。CSSのコードを貼ってある。おまけに、サイドバーの背景色...
/* 記事部分の背景色 */
#main {
background-color: #fbfaf5;
}
/* サイドバーの背景色 */
#sidebar {
background-color: #fbfaf5;
}

フォントの種類と文字色

font-family によるフォント指定と文字の色を一緒に指定している。色は濡羽色 #000b00 だ。

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、フォントの種類をfont-familyで指定、文字色も変更してみた。このサイトで使用...
/* 文字指定と文字色 */
body {
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
color:#000b00 !important;
}

記事と記事のあいだに線を引く

記事一覧での投稿記事間、それに関連記事での記事間にそれぞれ線を引いてみた。

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、投稿記事の一覧に並ぶ記事のあいだに線を引いてみた。また、関連記事でも同様のカスタマイ...
/* 投稿記事の記事間に線 */
#main .entry {
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
/* 関連記事の記事間に線 */
#main .related-entry {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}

記事一覧の日付とカテゴリーを消す

記事一覧の日付とカテゴリーをすべて消している。

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、トップページに表示される記事一覧のメタ情報(日付、カテゴリー)を消去してみた。このサ...
/*記事一覧の日付の非表示*/
.entry .post-meta .post-date{
display:none;
}
/*記事一覧のカテゴリーの非表示*/
#list .category {
display: none;
}

「記事を読む」を右側に寄せる

デフォルトで「記事を読む」を先に「Read more」に変更してある。

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、抜粋記事の「記事を読む」ボタンを右側に寄せてみた。合わせて、関連記事でも同様のカスタ...
/*記事を読むを右側に*/
.entry-read {
text-align: right;
margin-right: 15px;
}
/*関連記事の記事を読むを右側に*/
p.related-entry-read {
text-align: right;
margin-right: 15px;
}

見出し(h2、h3、h4)

h2、h3、h4の見出しタグだけデザインを変更してみた。

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、本文中につかう見出しタグ(h2、h3、h4)のデザインを変更してみた。Simplic...
/* 見出しの変更 */
.article h2 {
border-left:3px solid #47585c;
font-size:26px;
}

.article h3{
font-size:23px;
border-bottom:2px solid #47585c;
}

.article h4{
border-bottom:1px dashed #47585c;
}

タグクラウドのデザイン

サイドバーのウィジェットに入れたタグクラウドをシンプルに変更してみた。

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、サイドバーのウィジェットなどに配置されるタグクラウドのデザインを変更してみた。このサ...
/*タグクラウドのデザイン*/
.tagcloud a {
font-size: 15px !important;
line-height: 1;
text-decoration: none;
transition: 0.8s ;
}
.tagcloud a:hover {
background: #dcdddd;
color: #fbfaf5;
}

固定ページの日付とSNSボタンを消去

固定ページの日付(投稿日、更新日)とシェアするSNSボタンや自分のSNSアイコンを消している。

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、固定ページに表示されている日付(投稿日、更新日)と、シェアするためのSNSボタンを消...
/*固定ページの日付と更新日を非表示*/
#post-●● .post-meta,#post-●● .post-meta,#post-●● .post-meta{
display: none;
}
/* ●●には記事IDを入れる */
/*固定ページのシェアボタンを非表示*/
#post-●● #sns-group,#post-●● #sns-group,#post-●● #sns-group {
display: none;
}
/* ●●は記事ID */

サムネイル画像にエフェクト

CSSの hover でサムネイルをマウスオーバーした際にエフェクト(拡大&モノクロ)させてみた。

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、記事一覧のサムネイル画像にマウスオーバーした際にホバーエフェクト(hover)するよ...
/* サムネイル画像のエフェクト */
.entry-thumb,.wpp-thumbnail{
overflow: hidden;
}
.entry-thumb img,.wpp-thumbnail img{
transition: 0.5s ;
}
.entry-thumb img:hover,.wpp-thumbnail:hover {
opacity: 0.8;
-moz-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
filter: blur(3px) grayscale(100%);
}

WordPressのカスタマイズは止まらない

カスタマイズって言葉は大好きだ。思い返せば、OS9あたりまでのMagでも「カレイドスコープ」でカスタマイズにハマっていた。OSと相性が良くなかったので、よく再起動させてはMacから警告を受けていた。いつまで、WordPressというCMSが続くのかはわからない。ただ、時代が変わっても、個人で手軽にカスタマイズできるものは残って欲しいと思っていたりする。