【WP】WordPress・3カラムのデザインカスタマイズをご紹介♪

気に入ったらシェア!

前回、こちら↓の記事で
Simplisity1」テーマを「レスポンシブ3カラム化」しました。

当ブログのWordPressテーマを 「Simplicity1」ベースの「レスポンシブ3カラム」なデザインに変更してみました(^^)/ ...

それ以外にも、当サイトは「追加CSS」でいくつかデザインの変更をしているので、
今日はその詳細をご紹介していきます!

(ずらずらと長くなってしまいましたが、
必要な個所に目次で飛んでください。
一番最後に、全てのCSSもまとめています。)

ヘッダー関連

ブログヘッダーに関して、以下の変更をしています。

・「ブログタイトル」の位置を、「左揃え+左30pxマージン」にする。
・「ナビゲーションメニュー」を「中央揃え」にする。

変更後の画面はこちら↓

CSSの該当部分はこちら↓

/*---------------------------------
 タイトルを少し右寄せ
--------------------------------*/
#h-top #site-title a{
	margin-left: 30px;
}
#site-description{
margin-left: 30px;
}
/*---------------------------------
 ナビゲーションメニューの中央揃え
--------------------------------*/
#navi-in{
    display: flex;
    justify-content: center;
}
#navi ul li a {
	border-left:solid 1px #ffffff;
	border-right:solid 1px #ffffff;
	margin-left: -1px;
}

ホーム(記事一覧)関連

ホームに表示される記事一覧について、以下の変更をしています。

・記事一覧の「タイトル色」を変更。
・「メタ情報」の文字を小さく。
・「抜粋文」の文字を小さく。
・「記事を読む」を右揃えに。

実際の画面はこちら↓

CSSの該当部分はこちら↓

/*---------------------------------
 記事一覧のタイトル色を変更 
--------------------------------*/
.entry h2 a {
	font-family:arial;
    font-size: 18px;
	line-height: 0.5;
    color: #4169E1;
	padding: 5px;
}
/*---------------------------------
 メタ情報の日付を小さく
--------------------------------*/
.post-meta,.entry .post-meta a  {
    font-size: 14px;
    line-height: 160%;
}
/*---------------------------------
 抜粋記事本文を小さく
--------------------------------*/
.entry-snippet{
        font-size:80%
}
/*---------------------------------
 「記事を読む」を右揃えに
--------------------------------*/
.entry-read {
	text-align: right;
	margin-right: 20px;
}
.entry-read a{
	font-size: 15px;
	color: dodgerblue;
}
/*---------------------------------
 記事間に線を引く
--------------------------------*/
#main .entry {
    border-bottom: 0.5px solid silver;
    padding-bottom: 15px;
}

投稿ページ(個別ページ)関連

投稿ページ(個別ページ)に関する変更点です。

・「記事タイトル」の色を変更。(青のグラデーションにしました)
・「引用部」の見た目を変更。(引用符を無くしました)
・本文下の「関連記事」をタイル調に変更。
・シェアボタンの表示変更。

実際の画面はこちら↓

CSSの該当部分はこちら↓

/*---------------------------------
 投稿ページの記事タイトル色設定
--------------------------------*/
.article h1 {
	background: linear-gradient(-135deg,
		#24C6DC, #514a9d);
    color: white;
	padding: 5px;
}
/*---------------------------------
 引用部の表示を変更
--------------------------------*/
blockquote{
	padding: 0em 0em 0em 2em;
	margin: 0 1.6em;
	font-style: normal;
	position: relative;
	box-shadow: 0 5px 0 rgba(8,1,2,0.03);
	border: 2px dotted #bbb;
	background-color: #eee;
}
blockquote::before {
	color: transparent;
	font: 80px/1 Georgia,serif;
	position: absolute;
	top: 10px;
	left: 10px; 
	display: block;
}
blockquote::after{
	content: "";
}
/*---------------------------------
 本文下の「関連記事」をタイル調に変更
--------------------------------*/
.related-entry-thumbnail {
    text-align: center;
    margin-bottom: 15px;
    margin-left: 5px;
    margin-right: 5px;
    width: 180px;
    height: 220px;
    border: 1px solid #ddd;
    float: left;
}
.related-entry-thumbnail img {
    width: 180px;
    height: 140px;
    margin-bottom: 0;
}
.related-entry-thumbnail .related-entry-content {
    font-size: 0.9em;
}
.related-entry-thumbnail .related-entry-content a {
    font-size: 0.9em;
}
.related-entry-title a {
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: block;
    height: 80px;
    width: 180px;
}
.related-entry-thumbnail .related-entry-content {
    margin: -15px 0px 5px 0px;
}
.related-entry-thumbnail .related-entry-content:hover {background-color:#ffffe1;}
/*---------------------------------
 シェアボタンの表示変更
--------------------------------*/
.sns-group-viral ul.snsb li a{
  width: 100px;
  height: 20px;
  border-radius: 3px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 15px;
  line-height: 20px;
}
/* SNSの名称部分を非表示 */
.icon-hatena::after, .icon-googleplus::after, .icon-facebook::after, .icon-twitter::after, .icon-pocket::after, .icon-line::after, .icon-feedly::after {
    display: none;
}
/*色を変更*/
ul.snsbs a.twitter-btn-icon-link{background-color:#74c1f8;}
ul.snsbs a.facebook-btn-icon-link{background-color:#6680d8;}
ul.snsbs a.google-plus-btn-icon-link{background-color:#fd6969;}
ul.snsbs a.hatena-btn-icon-link{background-color:#6eaff3;}
ul.snsbs a.pocket-btn-icon-link{background-color:#ff6d82;}
ul.snsbs a.line-btn-icon-link{background-color:#00c600;}
ul.snsbs a.evernote-btn-icon-link{background-color:#51b125;}
ul.snsbs a.feedly-btn-icon-link{background-color:#9ade79;}
ul.snsbs a.push7-btn-icon-link{background-color:#eeac00;}

サイドバー関連

サイドバー表示に関する変更点です。

・サイドバーの「見出し」背景色を変更。
・サイドバーの文字を全て小さ目に変更。
・「タグクラウド」の表示を変更。
・「新着記事」「人気記事」のサムネイルを小さく変更。

変更後のサイドバー表示はこちら↓

CSSの該当部分はこちら↓

/*---------------------------------
 サイドバーの見出し背景を変更
--------------------------------*/
#sidebar h4{
  padding: 5px 10px;
  border-radius: 3px;
  background: gainsboro;
  font-weight: bold;
  color: gray;
  font-size: 16px;
}
/*---------------------------------
 サイドバーの文字を小さ目に
--------------------------------*/
#sidebar {
    font-size: 13px;
}
/*---------------------------------
 「タグクラウド」の表示を変更
--------------------------------*/
.tagcloud {
	padding: 0 20PX;
}
.tagcloud a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 0 4px;
    color: #666;
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid #e6e6e6;
    background: #FFF;
}
.tagcloud a:hover {
    transition: 0.3s;
    background: #EFEFEF;
}
/*---------------------------------
 「新着記事」「人気記事」のサムネイルを小さく
--------------------------------*/
#new-entries ul li img,
#popular-entries ul li img {
  border: medium none;
  display: inline;
  float: left;
  margin-top: 3px;
  margin-right: 5px;
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

ヨメレバ・カエレバ(レスポンシブ)

「ヨメレバ」というツールの表示カスタマイズです。

他サイト様を参考にボタンの色を変えたのと、
基本的に「Amazonで探す」ボタンしか表示していないので、
幅50%でAmazonボタンだけを大きく表示するようにしました。

変更後の表示はこちら↓

CSSの該当部分はこちら↓

/*----------------------------------------------------------
 ヨメレバ・カエレバ(レスポンシブ)
----------------------------------------------------------*/
.booklink-box, .kaerebalink-box{
    padding: 15px;
    border:double #CCC;
    overflow: hidden;
    font-size:middle;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
	font-size:16px;
    font-weight: bold;
}
.booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:50%;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{background-color:#FF9901 !important;}
.shoplinkrakuten a{background-color:#c20004 !important;}
.shoplinkkindle a{background-color:#007dcd !important;}
.shoplinkkakakucom a{background-color:#314995 !important;}
.shoplinkyahoo a{background-color:#7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
    width: 200px !important;
    min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
    font-size: 20px;
    font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:calc(100% - 4px);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin: 2px 0px;
    padding:10px 0px;
}
}

「追加CSS」によるデザインの変更箇所・全て

以上の全てのCSS変更をまとめると、以下のようになります。

WordPressの「外観」→「カスタマイズ」→「追加CSS」に
このCSSをまとめて貼りつければOKです。

追加CSSの内容:

/*----------------------------------------------------------
 ヘッダー関連
----------------------------------------------------------*/
/*---------------------------------
 タイトルを少し右寄せ
--------------------------------*/
#h-top #site-title a{
	margin-left: 30px;
}

#site-description{
margin-left: 30px;
}
/*---------------------------------
 ナビゲーションメニューの中央揃え
--------------------------------*/
#navi-in{
    display: flex;
    justify-content: center;
}

#navi ul li a {
	border-left:solid 1px #ffffff;
	border-right:solid 1px #ffffff;
	margin-left: -1px;
}

/*----------------------------------------------------------
 ホーム(記事一覧)関連
----------------------------------------------------------*/
/*---------------------------------
 記事一覧のタイトル色を変更 
--------------------------------*/
.entry h2 a {
	font-family:arial;
    font-size: 18px;
	line-height: 0.5;
    color: #4169E1;
	padding: 5px;
}
/*---------------------------------
 メタ情報の日付を小さく
--------------------------------*/
.post-meta,.entry .post-meta a  {
    font-size: 14px;
    line-height: 160%;
}
/*---------------------------------
 抜粋記事本文を小さく
--------------------------------*/
.entry-snippet{
        font-size:80%
}
/*---------------------------------
 「記事を読む」を右揃えに
--------------------------------*/
.entry-read {
	text-align: right;
	margin-right: 20px;
}
.entry-read a{
	font-size: 15px;
	color: dodgerblue;
}
/*---------------------------------
 記事間に線を引く
--------------------------------*/
#main .entry {
    border-bottom: 0.5px solid silver;
    padding-bottom: 15px;
}

/*----------------------------------------------------------
 投稿ページ関連
----------------------------------------------------------*/
/*---------------------------------
 投稿ページの記事タイトル色設定
--------------------------------*/
.article h1 {
	background: linear-gradient(-135deg,
		#24C6DC, #514a9d);
    color: white;
	padding: 5px;
}
/*---------------------------------
 引用部の表示を変更
--------------------------------*/
blockquote{
	padding: 0em 0em 0em 2em;
	margin: 0 1.6em;
	font-style: normal;
	position: relative;
	box-shadow: 0 5px 0 rgba(8,1,2,0.03);
	border: 2px dotted #bbb;
	background-color: #eee;
}
blockquote::before {
	color: transparent;
	font: 80px/1 Georgia,serif;
	position: absolute;
	top: 10px;
	left: 10px; 
	display: block;
}
blockquote::after{
	content: "";
}
/*---------------------------------
 本文下の「関連記事」をタイル調に変更
--------------------------------*/
.related-entry-thumbnail {
    text-align: center;
    margin-bottom: 15px;
    margin-left: 5px;
    margin-right: 5px;
    width: 180px;
    height: 220px;
    border: 1px solid #ddd;
    float: left;
}
.related-entry-thumbnail img {
    width: 180px;
    height: 140px;
    margin-bottom: 0;
}
.related-entry-thumbnail .related-entry-content {
    font-size: 0.9em;
}
.related-entry-thumbnail .related-entry-content a {
    font-size: 0.9em;
}
.related-entry-title a {
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: block;
    height: 80px;
    width: 180px;
}
.related-entry-thumbnail .related-entry-content {
    margin: -15px 0px 5px 0px;
}
.related-entry-thumbnail .related-entry-content:hover {background-color:#ffffe1;}
/*---------------------------------
 シェアボタンの表示変更
--------------------------------*/
.sns-group-viral ul.snsb li a{
  width: 100px;
  height: 20px;
  border-radius: 3px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 15px;
  line-height: 20px;
}
/* SNSの名称部分を非表示 */
.icon-hatena::after, .icon-googleplus::after, .icon-facebook::after, .icon-twitter::after, .icon-pocket::after, .icon-line::after, .icon-feedly::after {
    display: none;
}
/*色を変更*/
ul.snsbs a.twitter-btn-icon-link{background-color:#74c1f8;}
ul.snsbs a.facebook-btn-icon-link{background-color:#6680d8;}
ul.snsbs a.google-plus-btn-icon-link{background-color:#fd6969;}
ul.snsbs a.hatena-btn-icon-link{background-color:#6eaff3;}
ul.snsbs a.pocket-btn-icon-link{background-color:#ff6d82;}
ul.snsbs a.line-btn-icon-link{background-color:#00c600;}
ul.snsbs a.evernote-btn-icon-link{background-color:#51b125;}
ul.snsbs a.feedly-btn-icon-link{background-color:#9ade79;}
ul.snsbs a.push7-btn-icon-link{background-color:#eeac00;}

/*----------------------------------------------------------
 サイドバー関連
----------------------------------------------------------*/
/*---------------------------------
 サイドバーの見出し背景を変更
--------------------------------*/
#sidebar h4{
  padding: 5px 10px;
  border-radius: 3px;
  background: gainsboro;
  font-weight: bold;
  color: gray;
  font-size: 16px;
}
/*---------------------------------
 サイドバーの文字を小さ目に
--------------------------------*/
#sidebar {
    font-size: 13px;
}
/*---------------------------------
 「タグクラウド」の表示を変更
--------------------------------*/
.tagcloud {
	padding: 0 20PX;
}
.tagcloud a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 0 4px;
    color: #666;
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid #e6e6e6;
    background: #FFF;
}
.tagcloud a:hover {
    transition: 0.3s;
    background: #EFEFEF;
}
/*---------------------------------
 「新着記事」「人気記事」のサムネイルを小さく
--------------------------------*/
#new-entries ul li img,
#popular-entries ul li img {
  border: medium none;
  display: inline;
  float: left;
  margin-top: 3px;
  margin-right: 5px;
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

/*----------------------------------------------------------
 ヨメレバ・カエレバ(レスポンシブ)
----------------------------------------------------------*/
.booklink-box, .kaerebalink-box{
    padding: 15px;
    border:double #CCC;
    overflow: hidden;
    font-size:middle;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
	font-size:16px;
    font-weight: bold;
}
.booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:50%;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{background-color:#FF9901 !important;}
.shoplinkrakuten a{background-color:#c20004 !important;}
.shoplinkkindle a{background-color:#007dcd !important;}
.shoplinkkakakucom a{background-color:#314995 !important;}
.shoplinkyahoo a{background-color:#7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
    width: 200px !important;
    min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
    font-size: 20px;
    font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:calc(100% - 4px);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin: 2px 0px;
    padding:10px 0px;
}
}

まとめ

ブログデザインや表示の細かな修正に関しては、
「追加CSS」でカスタマイズできるということがわかりました。

色々といじっているうちに、少しずつCSSがわかるようになってきたような……?

まだまだわかっていない部分も多いので
もし何か間違っているところがあれば、ご指摘ください。

以上、
WordPress(特にSimpicity)のデザインをカスタマイズするときの参考になれば、幸いです(^^)/