このブログで行っているSimplicityカスタマイズ8つ

このブログでは、SimplicityというWordpressのテーマを使っています。

とても使いやすく、カスタマイズによって個性も出しやすいので初心者の方にもおすすめです。

Wordpress初心者におすすめのテーマはSimplicity
このブログでは、SimplicityというWordpressテーマを使っています。Wordpress初心者の人にSimplicityをおすすめする理由を説明します。

この記事では、このブログで行っているSimplicityカスタマイズについてまとめておこうと思います。(2018/3/12版)

細かいところまでは書ききれないので、主要なカスタマイズについて書きます。
書いてない部分で気になることがあれば、コメントを頂ければ返信します。

スポンサーリンク

全体

1.枠線をなくす

メインカラム、サイドバーともに枠線を消しています。

/************************************
** メイン部分
************************************/
#main {
 border: none;
}
/************************************
** サイドバー
************************************/
#sidebar{
border:none;
}

2.ヘッダー(サイトタイトル・グローバルナビ)の中央寄せ

サイトタイトルの中央寄せはテーマカスタマイザーから、グローバルナビ(メニュー)の中央寄せはスタイルシートで行っています。

/* グローバルナビ中央寄せ */
#navi-in{
 display: flex;
 justify-content: center;
}

3.フォントの変更

全体のフォントを「游ゴシック」にしています。

/************************************
** フォント
************************************/
body,
h1,
h2,
h3,
h4,
.article h5,
.article h6,
.menu_subtitle,
#navi .sub-menu li a{
font-family:游ゴシック,"Yu Gothic",YuGothic,"Hiragino Gothic",HGS明朝E,メイリオ,Meiryo,sans-serif;
}

4.Read More、カテゴリーに背景色をつける

記事一覧ページのReadMoreと、記事ペーシのカテゴリーに背景色を付けています。

/************************************
** ReadMore、カテゴリーのスタイル
************************************/
.entry-read a.entry-read-link,
.article span.category a{
font-size:12px;
color: #406975;
background: #e2dad6;
padding:4px 8px;
line-height:250%;
}

記事ページ

5.見出しの装飾

記事内の見出し(H2,H3など)、サイドバータイトルなどを変更しています。

コピペでできる、記事の見出しデザインサンプル8つ(CSS)
SimplicityはカスタマイズがしやすいWordpressテーマです。その中で今回は、投稿記事内の見出し(Hタグ)デザインを紹介します。

▼現在の見出しスタイル

/************************************
** 見出しタグのスタイル
************************************/
.article h2,
#archive-title{
border-left:3px solid #3a4b56;
margin: 40px 0 30px;
padding:20px 25px;
background: #dee7e8;
color: #3a4b56;
}
.article h3,
#comment-area h3,
.taxonomy_title{
font-size:20px;
border-bottom: double 3px #e6e6e6;
color: #3a4b56;
}
.article h4{
 font-size:18px; 
 border-bottom:1px dotted #404040;
 font-weight:100;
}
.article h5{
 font-size:17px;
 padding:0 10px;
 border-left:5px solid #58656e;
 font-weight:100;
}
#sidebar h3.widget_title{
 font-size:21px;
 padding:12px 0 12px 15px;
 margin: 20px 0;
 color:#415758;
 font-weight:100;
 background: #d9e0e1;
}

6.メタデータの背景色をなしに

記事ページタイトル下にあるメタデータ(投稿日、カテゴリーなど)の表示エリアの背景色をなし(透明)にしています。

/* 記事タイトル下メタデータスタイル */
.post-meta{
 background-color:transparent;
}

7.SNSシェアボタンをシンプルに

SNSシェアボタンを、ブログ全体のデザインに馴染むようなシンプルな色とデザインに変更しました。

SimplicityのSNSシェアボタンを、よりシンプルにカスタマイズする方法
Wordpressテーマ「Simplicity」のSNSシェアボタンをシンプルにし、目立ちにくくするカスタマイズ法を紹介します。
SimplicityのSNSフォローボタンを丸くして、色を変更する方法
Simplicityでは、ヘッダー(画面右上)や記事下に各SNSのフォローボタンを表示することができます。 これらのボタンはデフォルトでは角が丸い四角形です。 今回はこのフォローボタンを丸型に変更する方法を紹介します...

8.内部ブログカードのサムネイルを長方形に

内部ブログカードのサムネイルを、デフォルトの正方形から長方形に変更しています。

Simplicityの内部ブログカードのサムネイルサイズを変更する方法
Simplicityの内部ブログカードのサムネイルサイズを変更して、正方形から長方形にする方法を説明します。

さいごに

今後、色々と変更があれば追記します。

Comments

タイトルとURLをコピーしました