当サイトのカスタマイズ用にちまちまと作っていたSimplicity用のスキンですが、とりあえずこんなもんでいいかしら？という状態になったのではないかと自己満足しています。とは言え、わざわざ配布するほど大したものじゃないのは承知の上ですが、これを機にSimplicity用のスキンを作ってみようという方がもっと増えてくれたらいいなぁ、という期待を込めてあえて公開してみたいと思います。
もちろん当サイトにそこまで影響力があるとは思ってませんけどね？
目次
Simplicity用スキン[uc-mod]初版リリース
そこはかとなく微妙なネーミングなのは自覚がありますが「unlimited ch@os modification」の略だとでも思って下さいな。思いがけず好評なら「uc-mod II ch@osの野望」「uc-mod III そして伝説へ…」と続く事もあるかもしれませんが、その可能性は限りなく低そうです。
とりあえずサンプルはこんな感じ
こちらはホーム画面になります。
で、こちらがエントリー画面です。
と言うかよく考えてみたらこのサイト自体がサンプルのようなものです。トップページの一言ボックスとAdSenseの表示制御用スタイルを追加したくらいで、ほぼそのままだと思っていただいてよろしいかと。
ダウンロードはこちらから
大変申し訳ありませんが uc-mod にはバグがあったようで、現在は修正i済みの最新版に差し替えてあります。見出しの色を簡単に変更出来るようにした（と言っても手作業になりますが…） [uc-mod ccv] も公開しましたので、詳細は以下のリンクからどうぞ。
unlimited ch@os
主なカスタマイズ箇所
一応style.cssには適度にコメントをつけてあるので、中を見ていただければ何となくおわかりになるのではないでしょうか。私が作ったくらいなので特別難しい事はしていません、と言うかしたくても大層な事はまだまだ出来ませんよ？
基本的なコンセプトはSimplicityの良い所は残しつつ、見た目を少しだけ自分好みにしたといういたってシンプルなものです。
Simplicityだけに。（別にウマイことは言ってない）
フォントサイズと色
白地に黒の組み合わせは視認性が高いですが、コントラストが強すぎると目が疲れやすいという事なので、フォントの色をこれまで使っていた色と比べて若干薄めにしています。
一覧リストの微調整
エントリーカード・大きなエントリーカード・本文表示・サムネイル大・タイル2列・3列とひと通り表示を確認してマージン等を微調整してみました。控えめに言ってるわけでも無く本当に微調整だけです。
各見出しの調整とスタイルの適用
H1～H6までの見出しを少しイジって、一部のウィジェット見出しにもスタイルを適用してみました。パンくずリストの上や投稿の上下などは、本文と区切らずシームレスに利用したい場合もありそうだったので適用外にしてあります。
続きを読む
単にFont-Awesomeを使ってみたかったのでムリヤリ使えそうな部分を探した感じがしなくもないですが、おかげでcssで実装するにはこうするのねーみたいな勉強になりました。
上記以外の設定
あとは大体こんなところでしょうか。
- メニューに微妙なグラデーションをかけてみた
- リンクの下線を消去
- 固定ページの公開日付を非表示に
- タグクラウドのフォントサイズを固定にして枠をつけた
- フッター部の背景と色使いをメインと同じに
こうして改めて内容を書き出してみると本当に大した事はしていませんが、何度も適用しては微調整を繰り返して結構苦労したように思います。
Simplicity用スキンの設定方法
前準備としてまずこちらからダウンロードしたzipファイルを解凍しておきます。[uc-mod]というフォルダとその中にstyle.cssが入っているはずです。
これは私が作成したスキンに限った話ではありませんが、子テーマを利用している場合は子テーマのskinsフォルダに、親テーマを直接利用している場合は親テーマのskinsフォルダに[uc-mod]をフォルダごとアップロードして下さい。特別な理由が無い限りは子テーマを使った方がよろしいかと思います。
スキンファイルのインストールフォルダ
簡単に図解？するとこんな感じです。
├ [images]
├ [skins] ← この中に[uc-mod]をフォルダごと入れます
├ amp.css
├ before-main.php
│
├ その他 子テーマに含まれるファイル
│
└ style.css
FTPクライアントかレンタルサーバーのファイルマネージャーを使用してスキンファイルをアップロードするか、あらかじめSimplicity子テーマのzipファイル内にスキンのフォルダを放り込んでおいて、ダッシュボードからインストールしてもOKです。
アップロードまたは子テーマのインストールが済んだら、外観 > カスタマイズ > スキンから[uc-mod]を探して下さい。優先順位を下げてあるので下の方に表示されていると思いますが、後は有効化して保存するとスキンが適用されます。
スキンご利用上の注意と免責事項
cssの変更だけなら一旦style.cssやmobile.css、responsive.cssをバックアップして、中身は初期状態に戻してしていただいた方が確実かと思います。明らかに影響が無いクラスセレクタに対しての記述だけなら特に問題は無いはずですが。
もしスキンを有効化した途端に「なんじゃこりゃぁあ！」となった場合は、落ち着いてスキンを外せば元に戻りますし、出来ればそうなる前にライブプレビューで表示を確認しながら有効化する事をお薦めします。
デベロッパーツールを使って何パターンかの解像度でひと通り表示確認はしたつもりですが、私が普段利用していない表示スタイルやウィジェットが使用されていた場合に見落としもあるかと思いますので、何かお気付きの点があればお手数ですが連絡をいただけると助かります。
免責事項
最後にお約束的な免責事項を。
という事でひとつお願いいたします。もっとも、そんな大それた被害が出るような物騒な代物では無いと思うんですけどね…一応、念の為。
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
