去年の12月に公開した無料WordPressテーマSimplicity用スキン「uc-mod」ですが、それから当サイトで少しづつ手を加えていた部分＋αを反映しました。
また、スタイルシートを直接編集する事になりますが、見出し部分のカラーを簡単に変更出来るようにカスタマイズしてみたので、よろしければそちらも試していただけると幸いです。
目次
uc-mod のダウンロード
「uc-mod」最新版のダウンロードはこちらからどうぞ。
大変申し訳ありませんが、uc-mod には潜在的なバグがあったようです…詳細は次の項「バグフィックスの内容」で説明いたします。
説明は後ほどになりますが、見出しの色をカスタマイズしやすくしたバージョンも用意してみましたので、よろしければこちらもお試し下さい。
尚、ccv は [ Custom Color Version ] の略になります。
バグフィックスの内容
以下の条件を満たした時に、人気記事のサムネイル右側に1em分のマージンを取ってしまう（サムネイルが左側に寄っているように見える）という現象が発生していました。
- プラグイン「WordPress Popular Posts」を使用
- [S] 人気記事ウィジェットを使用
- [S] 新着・人気記事ウィジェットを使用
- 表示タイプが「タイトルを重ねた大きなサムネイル」
対応として「ウィジェット前後の間隔調整」から以下の部分を削除いたしました。
#sidebar .widget li ,
#footer-widget li {
padding-right: 1em;
}
ご迷惑をおかけして大変申し訳ありませんでした。テスト用のサイトと当サイトではこの条件が揃うことが無かった為に気付く事が出来なかったようです…面目ない。
決してあやしいモノでは無いですが
とりあえず試しにダウンロードしてみたら Cyberfox が…お前は何を言っているんだ。
いや、中身はただのCSSだってばよ…一応Avastさんもちゃんと通してあるんですけど…
そんなわけで、決してあやしいモノは入っていないと思いますが、ひとつ自己責任という事でよろしくお願いします。
前バージョンからの主な変更点
ちなみにこちらが前回のエントリーになります。スキンのインストール方法に関しても書いてありますので参考にしていただければ幸いです。
unlimited ch@os
相変わらず大した事はしていませんので全体的には細かい調整がほとんどですが、主な修正内容はだいたいこんな感じになります。
見出しスタイル変更
各見出しのスタイルが微妙過ぎて差がわかりにくかったので変えてみました。見出し毎に左側にマージンをつけて段下げっぽくしていたのも、本文はそのままの位置だったのでそれも意味が無かったように思います。
とりあえずH2とH3は既に使っていますので、H4以下の見出しは以下の画像で確認していただければと思います。
それでは修正前と比較してみましょう、こちらが修正前。
こちらが修正後です。
H6まで使う事はまず無いと思いますが、一応それなりのものを用意しました。H5やH6のスタイルをH2やH3で使いたいという場合は、適当にCSSをイジって下さいませ。
メニューに Font-Awesome を使用
正直「だから何？」って感じですけど…何となくつけたかったのでつけてみました。何でもそうだと思いますけど、覚えたての頃ってだいたいそんなもんですよね？
content の値を変更すれば違うアイコンにも出来ますので、必要に応じてカスタマイズしていただければと思います。
サイドバーのリスト項目の調整
主にカテゴリーとアーカイブの見た目的な調整になりますが、親子の階層がある部分は全て均等な感じになるようにしてみました。あとはここにもメニューの項目と同じ Font-Awesome をつけてみたりしてます。
一覧リスト見出しの高さ変更
タイトルが長くて改行した際に行間が空き過ぎてるような気がしたので、ちょっとだけ詰めてみました。
グラデーションを簡素化
前回は 0%、50%、100%と3箇所で設定していたのを 0%と100%の2箇所に変更しました。グラデーションはもう要らないかな？とちょっとだけ思わなくも無いので、不要だという方はお手数ですが以下の手順でその部分を削除しちゃって下さい。
グラデーション部分を削除する方法
一応ベンダープレフィックス（-webkit- とかいうアレです）はつけてありますが、想定外の理由で機能しなかった場合を考慮してグラデーションの前に background で普通に色を指定しているので、そこだけ残して取り消し線の部分を削除すればOKです。
#navi ul.children {
background: #3f3f3f;
background: -webkit-linear-gradient(
#3f3f3f 0% ,
#6f6f6f 100%);
background: linear-gradient(
#3f3f3f 0% ,
#6f6f6f 100%);
border: 0 none;
すっきりしましたね。
#navi ul.children {
background: #3f3f3f;
border: 0 none;
}
グラデーションを設定している部分は全部で4箇所あるので、面倒ですが同様の手順で削除して下さい。まとめようと思えばまとめられる部分も中にはありますが、コメントをつけにくくなるのであえて分けてあります。
新着・人気記事のタイトルを重ねた大きなサムネイル
この部分だけは通常の色指定ではどうにも出来なかったので、その為の対応を入れてあります。また、そのせいで uc-mod ccv でも他の場所と同じように一括で設定を置き換える事が出来ません。
スキンの機能として巧く追加出来ればいいんですけど、残念ながらそんな技術は無いのでここも手作業でやっていただく事になりますがそこはご容赦を。
uc-mod ccv の使い方
通常の uc-mod とどこが違うのかと言うと、実は全く同じ内容だったりします。中を見ていただければおわかりかと思いますが、スタイルシートの色指定の部分を一括置換しやすいような形にしてあるだけです。
オリジナルカラーの uc-mod に
と言っても、実はたった二色しか指定出来ないんですけどね…それでもこれだけの事で結構雰囲気は変わりますので良しとして下さい。
とりあえず使用上の注意をいくつか。
基本的に濃い色を使用して下さい
これは見出し部分のフォントを白に指定している部分がある為で、もし薄い色を使いたい場合は見出しに color: #fff を指定している部分を全て違う色に変更すれば大丈夫だと思います。
グラデーション用の二色を指定します
＠カラー１＠がテーマの基本となるベースカラーで、見出しのグラデーション開始位置とボーダーに使用しています。＠カラー２＠はグラデーションの終点となる色で、それ以外に使用している部分はありません。
カスタマイズの方法と手順
uc-mod ccv.zip を解凍すると出てくるフォルダにある style.css をテキストエディタで開きます。すると以下のような部分（黄色マーカーの部分です）があるので、これをエディタの機能を使って一括置換します。色の指定は red や blue のような名前か #ff0000 のような形式で指定して下さい。
/* メニュー *************************************/
#navi ,
#navi ul ,
#navi ul.sub-menu ,
#navi ul.children {
background: ＠カラー１＠;
background: -webkit-linear-gradient(
＠カラー１＠ 0% ,
＠カラー２＠ 100%);
background: linear-gradient(
＠カラー１＠ 0% ,
＠カラー２＠ 100%);
border: 0 none;
}
名前で指定する場合はもちろんカラーコードがちゃんと存在している名前じゃ無いとダメです。スペルミスにも気を付けて下さい。
こちらのサイトで「名前付き色」をクリックすると一覧が出てくるので、その中に使いたい色があればページを開いて名前をコピペすると簡単で良いかもしれません。尚、後ほど必要になる rgba 形式への変換もこのサイトを利用して出来ます。
普通に16進数で指定する場合は、# を忘れないように注意して下さい。
基本的にはこれだけです、簡単ですね？
タイトルを重ねた大きなサムネイル
問題は新着・人気記事の「タイトルを重ねた大きなサムネイル」を使用している場合で、この部分だけは先ほども言ったように一括置換では変更出来ません。
そこは別に変えなくても良いと言うかそのままでも特に問題は無い部分なんですが、せっかくなので全体のカラーと合わせられるものなら合わせたいだろうという事で、＠カラー１＠に指定した色を透過させてタイトルを表示出来るようにしてみました。
ただし、ちょっとした作業が必要になります。
背景だけを透過させる方法
背景を透過させるには opacity というプロパティで指定する事も可能ですが、その方法だと文字も透過して薄くなってしまうという欠点があります。それを回避する為に background で rgba 形式を使って透過させるという方法を取りました。
その為には＠カラー１＠に指定した色を rgba 形式に変換する必要があります。
カスタマイズのサンプル
それでは実際にカスタマイズを行ってみたいと思います。
一括変換に関しては特に問題無いと思いますので、＠カラー１＠と＠カラー２＠をそれぞれ以下の色に変更するという事で詳細は端折らせていただきます。
- ＠カラー１＠ → teal
- ＠カラー２＠ → lightseagreen
先ほどのサイトでもどこでも良いので、＠カラー１＠に指定した teal という色を rgba 形式に変換すると rgba(0, 128, 128, 1.0) となります。
次にスタイルシートから以下のコメント部分を探して下さい。どちらかと言えば下から探した方が早いです。
/* 新着記事・人気記事 タイトル重ねた時の背景 */
見つかったら次の部分を
background: rgba(63, 63, 63, 0.6)
先ほど変換した値に置き換えます。
background: rgba(0, 128, 128, 0.6)
最後の 0.6 は透過の割合を設定する数値で、1.0 が透過無し、0 が完全に透過した状態になります。私は適当に 0.6 で設定していますが、ここは好みで値を調整していただいて構いません。
するとこんな感じになります。
この画像ではちょっと小さいかもしれませんが、透過部分はサイドバーの新着記事の表示で確認出来ると思います。何となく緑色っぽくなっているのがわかるでしょうか？
作業はこれで以上になります、お疲れ様でした。
あとはスキンをアップロードして、テーマのカスタマイザーからスキンを選択して反映させれば利用していただけます。
uc-mod よろしければご利用下さい
さて、後半かなり駆け足な感じになってしまいましたが、これまで黒一色しか無かった uc-mod をお好きな色で利用していただければ幸いです。
最後にお約束的な感じにはなりますが、何かお気付きの点や不具合などありましたらコメントかお問い合わせフォームからご連絡いただけますよう、よろしくお願いいたします。
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
