長らく同じデザインで運用してきたこのサイトのデザインを変更することにしました。
テーマはずばり「黒板みたいなイメージ」です。と言っても本体部分を黒板にしてしまうと何となく暗いサイトになりそうだったので周囲を中心に黒板イメージにしました。
このサイトを見る人にとってサイトデザインなんて全然関係ないことだとは思いつつ、今後再び変更するときの備忘録としてカスタマイズした内容を書いておきます。
使っているテーマは「Simplicity」です。おおまかな色の部分はカスタマイザーで調整してます。
いろいろと四角いところを丸くする「border-radius」は必須の効果ですね。角が丸くなるだけで一気にかわいらしくなりますね。
トップのスライダー変更&CSS装飾
各ページトップに表示するスライダー。あまりいい感じではなかったので外していました。今回の変更でプラグインを替えて再度表示するようにしました。
一応プラグインについては
画像やYoutube動画のプレビュー、投稿へのリンクなどをスライド表示するプラグイン「WonderPlugin Slider Lite」
で紹介しています。じわーーーっと写真が拡大縮小するところが素敵なスライダーで、一発で気に入りました。
また、これで表示するスライダーは外枠デザインができないので、テーマ内に挿入したテンプレートタグにセレクタID(wonder-slider)を付けて外枠CSS追加しています。
/************** トップスライダー *****************/
.wonder-slider{
border-radius: 10px;
border: 8px solid #042100;
}
高さはプレビュー見ながら、表示する高さの狭いブラウザでも日記などのタイトルが見えるように調整・・・と簡単に書くけどこういうところの調整が実に難しい。
伴ってテーマ標準のコンテンツ表示順ではタイトルが表示できないので本文内のレイアウトも変更(同じテーマ使っている人ならどう変わっているかは分かると思います)。
表示していたメニューはサイドバーなどにリンクがあるので削除。とはいえまた使うこともあるかも知れないのでテンプレートタグを削除するのではなく、空のメニュー作って「なんちゃってメニュー」にすることで非表示にしました。
リンクタグは枠の色と同一の濃い緑にするも、インフォメーション用の帯の中にあるカテゴリーなどの文字が同色になってしまうので、これもカスタムCSSで調整(管理者に表示される「編集」も共通のセレクタを使用して解決)
/****** 帯に表示するカテゴリーの文字色(テーマ中で編集リンクも共用) *******/
.category a{
color: #ffffff;
}
足跡マーク変更
リストやHタグに使っている「猫の足跡」のイラスト。前まで使ってたものは色が指定色だったので変更して使えるもので今後本文にも背景色をつける可能性を考えて透過のものを探しました。
こちらのサイトは無料でアイコン画像が提供されていて、しかも色が変えられるようになっているので即決!!今までの足跡と入れ替えました。いろんなアイコンがあるので今後いろいろ使えそう、ありがたいサイトです。
その他本体関連のCSS
/************** 本文のスタイル *****************/
#main {
float: left;
box-sizing: border-box;
width: 740px;
padding: 10px 20px;
border: 10px solid #042100;
background-color: #fff;
border-radius: 8px;
margin-bottom: 30px;}
/************** ページタイトル *****************/
.article h1 {
margin-top: 3px;
margin-bottom: 5px;
font-size: 30px;
line-height: 117%;
}
/************** hrタグのデザイン *****************/
hr {<br>color: #042100;
margin: 30px 0;
width: 98%;
border: 1px solid #042100;
}
/************** メタ部分の帯 *****************/
.post-meta {
margin-bottom: 0.5em;
text-align: right;
background-color: #042100;
color: #fff;<br>font-size: 16px;
}
/************** H3タグ *****************/
.article h3 {
background-image: url("images/niku.png");
background-size: 30px 30px;
background-repeat: no-repeat;
padding: 5px 0px 0px 40px;
border-bottom:5px solid #042100;
/* 以下略 */
}
imgセレクタに対して変更をかけ、画像そのものをすべて同じCSSにしようとするも、Feedlyのアイコンや他のプラグインの画像などにも使われているメジャーなセレクタだったので、.eye-catchというアイキャッチだけのセレクタに対して変更をかけました
/************** アイキャッチ画像 *****************/
.eye-catch {
line-height: 100%;
margin-left: 0;
border-radius: 10px;
border: 5px solid #042100;
}
新着情報を表示する「Whats New Generator」プラグイン。タイトル帯や文字の色はプラグイン設定でカスタマイズできますが、全体を囲う線は独自CSSで設定する必要があったのでimportant使って強制的に上書きさせました
/************** whatsnewプラグインの外枠 *****************/
.whatsnew {
border: 3px solid #042100!important;
border-radius: 5px!important;
}
あとは、ギャラリー用のプラグインの設定で色の調整をして・・・まあ、本体部分はこんな感じかな?
固定ページのアイキャッチ画像を非表示に
猫ちゃんたちのプロフィールとか、日記以外の情報は固定ページで作っています。こうしたページは特にアイキャッチ画像を入れる必要がないのでテーマの固定ページテンプレートから該当するテンプレートタグを削除しました。これでちょっとうるさい感じがなくなったかな?
いよいよサイドバー部分のカスタマイズ
本体は外枠がボーーーンとあって、その中をごちゃごちゃするだけだからそれほど苦労しないんだけど、問題はサイドバー部分。サイドバーはウィジェット部分がそれぞれ独立していて、かつ、サイドバーとしてのくくりがあるので関連を見ながらのカスタマイズになる。うーーん面倒だ!!というのが実はサイドバー。根気よく設定していきます。
サイドバー背景色をなくす
白い背景のサイト用に、「Simplicity」ではサイドバー部分の背景を白にすることができるようになっています。これは全体の背景色をつけたときにサイドバーの内容が見えなくなってしまうことへの対応。今回は各ウィジェットをそれぞれ白背景にして表示したいのでカスタマイザーでオフに・・・おおおーーーーサイドバーウィジェットの内容がなんも見えんくなった・・・。ここからスタート。
ひとまずウィジェットのタイトル装飾
/************** ウィジェットタイトル *****************/
#sidebar h3 {
background-image: url(images/niku.png);
background-size: 30px 30px;
background-repeat: no-repeat;
padding: 5px 0px 0px 40px;
background-color: #ffffff;
border: 5px solid #042100;
border-radius: 5px;
}
お次はウィジェット内の表示スタイル
/************ サイドバーのリスト(外側) ***************/#sidebar ul, #sidebar ol, .widget-over-article ul, .widget-over-article ol, .widget-under-article ul, .widget-under-article ol, .widget-over-sns-buttons ul, .widget-over-sns-buttons ol, .widget-under-sns-buttons ul, .widget-under-sns-buttons ol<br>{
border: 5px solid #042100;
background-color: #ffffff;
padding:5px 10px;
margin-top:0px;
border-radius: 5px;
}
そしてウィジェット同士の隙間と最上部の空白調整
/************** ウィジェットの隙間 ***************/
#sidebar .widget{
margin-top:-20px;
margin-bottom: 40px;
}
最後にウィジェットにH4タグがあったとき、単純に白い文字で表示
/************** サイドバーのH4タグ ***************/
#sidebar h4{
color:#ffffff;
}
これでひとまず全部見えるようになった。あとはいろんなコンテンツ表示して、修正しての繰り返しかな。ひとまず終了しました。
だいぶ色々と思い通りにデザインできるようになってきました(超手前みそでーーす)
また変更や追記があったらこの下に足していこうと思います。