当サイトにおけるSimplicityカスタマイズのまとめ(20160924)

2016年9月25日

テーマの管理_‹_bibalogue_—_WordPress

当サイトbibalogueはWordPress無料テーマSimplicityをカスタマイズして使用しています。

今回は、現時点でのカスタマイズ(スタイルシート)の内容を公開します。

公開しなくてもブラウザーのデベロッパーツールを使えば、すべてわかってしまうので同じだと判断したからです。

できればSSL化にも挑戦したいと思っていますが、趣味の世界なので、まだそこまで踏み切ることができません。

ベース(親テーマ)

Theme Name: Simplicity2
Theme URI: http://wp-simplicity.com/
Author: yhira
Author URI: http://nelog.jp/
Text Domain: simplicity2
Version: 2.3.0b

カスタマイズベース(子テーマ)

Theme Name: Simplicity2 child
Template: simplicity2
Version: 20151225
skin: default

カスタマイズの内容

見出しH2の変更

.article h2 {
border-left:2px solid #000;
margin: 40px -10px 20px;
padding:25px 30px;
font-size:26px;
}

ヘッダー文字フォントの大きさの変更

#site-title a{
display:block;
text-decoration:none;
font-size: 34px;
line-height:130%;
font-weight:800;
}

トップページ枠線を消し、背景色を変更

.home #main{
border:none;
background-color:#F9F9F9;
}

グローバルメニューまわりのデザイン変更

#navi,
#navi ul{
background-color:#f7f7f7;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

#navi ul{border:0;}

#navi .menu{
border-radius:0px;
}

記事一覧カードのスタイル変更

#main .entry {
margin:20px 0px 15px 0px;
width:auto;
padding:20px 5px 20px 20px;
background-color:#FFFFFF;
border:1px solid #cccccc;
}

固定ページ(日付とか更新日とか含む)などの非表示

#post-587 .post-meta,#post-854 .post-meta,#post-2201 .post-meta{
display: none;
} /* post-587 の .post-meta (日付とか更新日とか含む) の非表示 */
#post-587 ul.snsb,#post-854 ul.snsb,#post-2201 ul.snsb {
display: none;
} /* post-587 の 下部SNSボタンの非表示 */
#post-587 #sns-group,#post-854 #sns-group,#post-2201 #sns-group {
display: none;
} /* post-587 の下部シェアボタン周りの非表示 */

この箇所におけるpost-***の数字はすべて当サイトの場合です。この数字は、それぞれのサイトで非表示にしたい固定ページのIDにあわせる必要があります。同じようなカスタマイズをする場合は注意してください。

ブログカードのスタイルの変更

.internal-blog-card,
.external-blog-card{
padding:20px 5px 20px 20px;
border:1px solid #2098a8;
background-color:#F9F9F9;
word-wrap: break-word;
}

リンクの下線を消す

a {
text-decoration: none;
}

メタ情報カテゴリー非表示・日付右寄せ・背景白色に変更

.entry .post-meta .category{
display:none;
}

.post-meta{
background-color:transparent;
}

.entry .post-meta .post-date{
font-size:15px;
float:right;
}

記事一覧と関連記事の抜粋非表示

.entry-snippet{
display:none;
}

.related-entry-snippet {
display:none;
}

記事を読むボタンを消す

.entry-read,.related-entry-read{
display:none;
}
.entry-read a,.related-entry-read a{
display:none;
}

関連記事に枠線

#main .related-entry {
margin:20px 0px 15px 0px;
width:auto;
padding:20px 5px 20px 20px;
border: 1px dotted #CCCCCC;
}

カード全体のリンクホバー背景色の変更

.hover-card .entry:hover,
.hover-card .entry-large-thumbnail:hover,
.hover-card .entry-tile:hover,
.hover-card .related-entry:hover,
.hover-card .related-entry-thumbnail:hover,
.hover-card .blog-card:hover,
#main .entry:hover{
background-color:#FFFFEA;
}

TOPへ戻るボタンの位置調整

#page-top {
bottom: 70px;
}

 

まとめ

以上が2016年9月24日現在のカスタマイズ内容です。なお、Simplicityのカスタマイズ機能を使って、背景色を変更しています。

プラグインは使用していますが、PHPファイルの内容は変更していません。そのため、新しい記事にも「NEW」マークは表示されなくなっています。