このブログでは、SimplicityというWordpressのテーマを使っています。
とても使いやすく、カスタマイズによって個性も出しやすいので初心者の方にもおすすめです。
Wordpress初心者におすすめのテーマはSimplicity
このブログでは、SimplicityというWordpressテーマを使っています。Wordpress初心者の人にSimplicityをおすすめする理由を説明します。
simplicity-hacks.tokyo
この記事では、このブログで行っているSimplicityカスタマイズについてまとめておこうと思います。（2018/3/12版）
細かいところまでは書ききれないので、主要なカスタマイズについて書きます。
書いてない部分で気になることがあれば、コメントを頂ければ返信します。
全体
１．枠線をなくす
メインカラム、サイドバーともに枠線を消しています。
/************************************
** メイン部分
************************************/
#main {
border: none;
}
/************************************
** サイドバー
************************************/
#sidebar{
border:none;
}２．ヘッダー（サイトタイトル・グローバルナビ）の中央寄せ
サイトタイトルの中央寄せはテーマカスタマイザーから、グローバルナビ（メニュー）の中央寄せはスタイルシートで行っています。
/* グローバルナビ中央寄せ */
#navi-in{
display: flex;
justify-content: center;
}３．フォントの変更
↓
全体のフォントを「游ゴシック」にしています。
/************************************
** フォント
************************************/
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;
}４．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%;
}記事ページ
５．見出しの装飾
記事内の見出し（H2,H3など）、サイドバータイトルなどを変更しています。
コピペでできる、記事の見出しデザインサンプル16（CSS）
ブログの記事内で使える見出しのデザインサンプル集です。全て、CSSの編集のみです。コピペして使ってください。
simplicity-hacks.tokyo
▼現在の見出しスタイル
/************************************
** 見出しタグのスタイル
************************************/
.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;
}６．メタデータの背景色をなしに
↓
記事ページタイトル下にあるメタデータ（投稿日、カテゴリーなど）の表示エリアの背景色をなし（透明）にしています。
/* 記事タイトル下メタデータスタイル */
.post-meta{
background-color:transparent;
}７．SNSシェアボタンをシンプルに
SNSシェアボタンを、ブログ全体のデザインに馴染むようなシンプルな色とデザインに変更しました。
SimplicityのSNSシェアボタンを、よりシンプルにカスタマイズする方法
Wordpressテーマ「Simplicity」のSNSシェアボタンをシンプルにし、目立ちにくくするカスタマイズ法を紹介します。
simplicity-hacks.tokyo
https://simplicity-hacks.tokyo/?p=13
８．内部ブログカードのサムネイルを長方形に
内部ブログカードのサムネイルを、デフォルトの正方形から長方形に変更しています。
https://simplicity-hacks.tokyo/?p=914
さいごに
今後、色々と変更があれば追記します。
Comments