By: Heisenberg Media
Simplicity2.1.5のアップデータを入手しようとして、Simplicityのサイトを開いてた時に、これまでのものとブログデザインが違っていることに気づきました。
サイドバーには、「スキン機能でSIMPLE BLACKを適用中」と書いてあり、その下に次のようなブログカードが置かれていました。
http://wp-simplicity.com/simple-black/
黒系Simplicityスキン「SIMPLE BLACK」
この白と黒を基調としたシンプルなスキン「SIMPLE BLACK」を作成されたのは、NEKO LIFEを運営されているアオイ(ΦωΦ)さんです。以前にも「チョコレート」というデザインスキンを作成しているそうです（こちらが好みという人も多いのではないかと思います）。
https://neko-life.com/simplicity-skin-simple-black/
スキンの設定方法は簡単です。次のスリーステップだけです。
- スキン「SIMPLE BLACK」をダウンロードして解凍
- Simplicity2の子テーマ内「skins」フォルダに解凍した「simple-black」フォルダごとアップロード
- -管理画面からカスタマイザーのスキン設定で「SIMPLE BLACK」を選択
アオイさんは「子テーマ」での利用を次のように強く呼びかけておりましたので、紹介してきます。アップデートをする度に書き換えるのは、かなり面倒な作業になるので、アオイさんの指示そおり「子テーマ」を使うべきだと思います。
必ず「子テーマ」を使ってください！
親テーマだとアップデート時に上書きされるのでカスタマイズしたものが消えてしまいます。
「SIMPLE BLACK」導入後の不具合と対応
このシンプルなスキン「SIMPLE BLACK」はアオイさんが、知人のブログ用に作ってみたものだそうです。とてもいい感じのデザインなので、私も早速ダウンロードして使ってみました。
子テーマにインストールするとカスタマイズのスキンから「SIMPLE BLACK」を選択できるようになります。
やはり、なかなかのデザインです。
ところが、よく見ると、SIMPLE BLACKを適用中というSimplicityのサイトとは異なる表示になっている箇所があることに気がつきました。ヘッダーとメニューバーの間に、白い線が入ってしますのです。私のサイトの設定が、そのような指示をしているということなのでしょうが、原因を特定することはできませんでした。
また、個別記事を見た時に、タイトル下にある黒の期日とカテゴリーを表示する部分の目立ちすぎる感じがして気になりました。固定ページでは、Stingerのような感じの明るいグレイなのに、個別記事では印象的な黒なのです。この辺は、好みの問題なのでしょうが、固定ページと同じように変更したいと思いました。
そこで、アオイさんが作成されたスキン「SIMPLE BLACK」のコードをstyle．cssに追記してみることにしました。カスタマイズでは、特定のスキンは選択しない設定にしました。
また、個人的に気になっていた個別記事下の表示部分を変更するために、次のようにスキン「SIMPLE BLACK」のコードを変更しました。
/************************************
** メインカラム（#main、記事、固定ページなど）
************************************/
.post-meta {
margin-top: 0;
font-size: 13px;
}
.hentry .post-meta {
margin-bottom: 0;
background-color: #F7F7F7;
color: #474A4D;
font-size: 13px;
}
.list .post-meta {
background: none;
color: #9f9f98;
}
まとめ
アオイさんが作成されたスキン「SIMPLE BLACK」をもとにして、ブログデザインをさらに変更することができました。「skins」フォルダーにコードを置かない形での導入ですので、モバイル端末での表示は、「SIMPLE BLACK」にはなっていません。こちらも気になっています。
