デザイン変更その他カスタマイズの備忘録

デザイン変更その他カスタマイズの備忘録

毎年この時期になるとサイトの見た目を変更にしたくなる性分のようだというのが過去記事を見ると分かりますね(笑)。

一昨年は色をゴテゴテ使ったものにして、昨年の今頃はそれに飽きてほとんどテーマのデフォルト状態にして・・・

で今年は見ていただいた通りマーブル?グラデーション?な感じになりました。

そんなときにもやっぱり【Simplicity2】テーマはカスタマイズしやすくて重宝しています。

まああまり参考にはならないと思いますが、今後のためにカスタマイズした部分をメモしておきます。

デザイン変更したところ

背景デザイン

いろいろなサイトを見ていて私的に「お、このサイトかっこいいなぁ」と思うものにグラデーション背景を使ったものが多かったので、今年はこのスタイルで行こう!!ということにしました。

追記したCSS

カスタマイザーでできるところはやって、あとはCSSで調整。本文の背景をやや透過にして少し変化を与えたところが工夫したところかな?

一応CSSのコピー

/************** 引用 ***************/
blockquote {

margin: 3px!important;
border: 1px solid #9c6a07;
border-radius: 5px;
}

/************** h4タグ ***************/
.article h4 {
border-bottom: 2px dashed #9c6a07;
}

/************** h3タグ ***************/
.article h3 {
font-size: 23px;
border-bottom: 5px solid #9c6a07;
padding: 10px 0;
}

/************** サイドバー ***************/
/* ウィジェット同士の隙間 */
#sidebar .widget {
margin-bottom: 10px;
background-color: rgba(255, 255, 255, 0.8);
padding:2px;
border-radius:5px;
}

/************** タイトル(h3)の隙間 ***************/
#sidebar h3 {
margin-bottom: 5px;
font-size: 20px;
}

/************** 本体 ***************/

/* 枠線をなしにする 背景を透明にする*/
#main {
border: none;
background-color: rgba(255, 255, 255, 0.8);
/*background-color: rgba(255,255,255,0);*/
}

.post-meta {
margin-bottom: .5em;
text-align: right;
background-color: #9c6a07;
color:#222222;
}

/* 文字(pタグ) */
/* 本文全体 */
#main p{
line-height:200%;

}
/* 関連記事と記事リスト */
#main .entry-snippet, .related-entry-snippet {
line-height: 170%!important;
}

/* リスト(liタグ) */
#main li{
color: #1b1a1a;
font-weight: bold;
font-size: 1.1em;
line-height:200%;

}

/*************** ブログカード ***************/
.blog-card {
background: #ffffff;
padding-bottom: 0px;
padding: 3px;
padding-top: 5px;
}

.blog-card.external-blog-card {
border-radius: 5px;
background-color: #ffffff;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
border-top-width: 1px;
border-top-style: solid;
border-top-color: #9c6a07;
border-left-width: 25px;
border-left-style: groove;
border-left-color: #9c6a07;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #9c6a07;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #9c6a07;
color: #222222!important;
font-weight: bold;
}

.blog-card.internal-blog-card {
border-radius: 5px;
background-color: #ffffff;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
border-top-width: 1px;
border-top-style: solid;
border-top-color: #9c6a07;
border-left-width: 25px;
border-left-style: groove;
border-left-color: #9c6a07;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #9c6a07;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #9c6a07;
font-size: 15px;
color: #222222!important;
font-weight: bold;
padding: 13px;
padding-bottom: 2px;
}

.blog-card-title {
margin-top: 8px;
font-size: 15px;
}

.blog-card-excerpt {
font-size: 11px;
color: #222222!important;
}

.blog-card-title a {
color: #222222!important;
font-size: 17px;
}

.blog-card-site a {
color: #1320d4;
font-size: 12px;
}

と追記したのはたったこれだけ。大半を占めているブログカードのデザインは

Simplicity標準装備のブログカードをお洒落にカスタマイズ~デザイン6種【テンプレートー1】

さんのページからコードを拝借した後に色などちょこっとカスタマイズ。そして内部リンクと外部リンクがわかるように

の方法で加えました。

あとはプラグインごとの追加CSSなどを少しいじっておしまいでした。

困ったのが【ブログ村】のパーツ。このパーツの背景は透過処理ができないので何となくな色にして不自然でないような感じにしました(できればきちんと透過にしたかった・・・)。

これを元にSimplicity2の着せ替えテーマ機能であるスキンを作ってみようと思っていますが、カスタマイザーで設定した部分を上のCSSに足していく必要があることと、プラグインの追加CSSで設定している部分もすべて網羅しなければならない(要するに面倒くさい)ので今後の課題にしておこうと思います。

Simplicity2は1つのセレクタである程度同じ要素を使うだろうという部分が一括変更できるようになっているので本当にカスタマイズしやすいテーマだとつくづく思いました。

その他の変更

今までAmazonのアフィリエイトで使っていた【CS SHOP】プラグインが対応していなかったためPHPのバージョンが5.6のままでしたが、代替プラグインである

へ変更。ようやくメンテナンスが終わったのでバージョンアップさせました。

きちんと動作してくれていますがリスト表示がされない(リロードして初めて表示される)現象が発生したので

で書いた方法で対処。一応大丈夫にはなったようです。

が・・・クリック数激減、報酬激減・・・なんでだろ??しばらく様子見ですが、今後のことを考えると長年更新されていない【CS SHOP】を使うのはとても危険なので商品の変更やリストデザインの変更など改善しつつやっていくしかないと思っています。

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。

年齢:40代 趣味/園芸・ペット・卓球