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

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

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

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

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

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

スポンサーリンク

デザイン変更したところ

背景デザイン

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

にあるパターンの中から私が大好きな茶色系にまとめました。画像が少し小さかったので加工して使わせていただきました。

追記した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種コピペokのテンプレート1 Simplicityで搭載されている便利なブログカード機能のカードを装飾して、オリジナル感を出してみましょう。CSSでスタイル出来るデザイン6種掲載しています。

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

【Simplicity】のすばらしい機能の1つであるリンクカード。今回は内部・外部それぞれのリンクカードに文字列を追加して「目で見てサイト内リンクなのかサイト外リンクなのかを区別」できるように少しカスタマイズしてみました。

の方法で加えました。

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

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

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

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

その他の変更

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

【Amazon Associates Link Builder】はAmazonアソシエイトが提供している「Amazon Product Advertising API」を使って商品情報を取得し、簡単に投稿などへ挿入できるプラグインです。

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

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

「Amazon Associates Link Builder」で商品リストを表示すると、表示されたりされなかったりする現象が発生しました。今回は規約の再確認を含め、対処方法(仮)を紹介したいと思います。

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

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

トップへ戻る