WordPressテーマ「Simplicity2」のシンプルな黒系スキン「SIMPLE BLACK」

「Simplicity2」のシンプルな黒系スキン「SIMPLE BLACK」

日本語のWordpressテーマにもいいのが増えてきましたねー。
私もちょっと気になるテーマがあったのでこのブログで1週間ほどこっそり使ってみました。

なぜ1週間かというと、他のテーマに変えたもののやっぱり「Simplicity2」の方が私好みなので戻ってきたというわけです。

さて今回は、知人のブログ用にSimplicity2の黒系デザインスキンを作ってみたので公開しようと思います。

私は以前にも「チョコレート」というデザインスキンを作成してます。1系バージョンの時に作ったのですが「Simplicity2」でも使えると思いますのでよかったら使ってみてください。

リンク Simplicity用デザインスキン 「チョコレート」

初心者にもおすすめの日本語のWordpress無料テーマ「Simplicity」の女子向けスキン「チョコレート」を作りました。
スポンサーリンク

シンプルなブラック系のテーマ「SIMPLE BLACK」

親テーマにも「シック」という黒系スキンがありますが、「SIMPLE BLACK(シンプルブラック)」は微妙な感じでちょこっとカスタマイズしてます。
使っている色も少なくとにかくシンプルなので、落ち着いた感じのブログサイトに合うかなと思います。
あ、写真メインのブログとかにもいいかも。

「HOME」と「記事ページ」のスクリーンショット

カスタマイザーの設定もデフォルトで、色の設定などもしてない状態だと下のようになります。

めちゃシンプル!シンプルにも程があります。

シンプルブラック「HOME」

シンプルブラック「記事ページ」

見出しなどのデザイン

見出し2~4は下のような感じです。

見出し2

見出し3

見出し4

続きを読む」のリンクをボタンにしています。

続きを読む

Simplicity2:背景色の変更方法

ヘッダーと背景の色を揃えたい場合はカスタマイザーで変更してください。

WordPress管理画面から「外観→カスタマイズ→色」で設定します。

「背景色」を「#060000」にすると全体的に色が統一されます。

背景色設定した場合

アイキャッチの表示がおすすめ

アイキャッチを表示するといい感じになるので、投稿ページではぜひアイキャッチを設定してください。

アイキャッチの表示

Simplicity2:投稿ページのアイキャッチ表示方法

投稿ページでアイキャッチを表示する場合は、Wordpress管理画面から「外観→カスタマイズ→レイアウト(投稿・固定ページ)」で設定します。

本文先頭にアイキャッチ画像を表示」にチェックを入れてください。

アイキャッチの表示設定

ダウンロード

Simplicity用デザインスキン
「SIMPLE BLACK」

バージョン 20160421

スキンの設定方法

  1. スキン「SIMPLE BLACK」をダウンロードして解凍
  2. Simplicity2の子テーマ内「skins」フォルダに解凍した「simple-black」フォルダごとアップロード
  3. 管理画面からカスタマイザーのスキン設定で「SIMPLE BLACK」を選択
  4. 後は、背景色など設定してもしなくてもお好きなように!
必ず「子テーマ」を使ってください!
親テーマだとアップデート時に上書きされるのでカスタマイズしたものが消えてしまいます。

リンク Simplicity2の子テーマ

参考 Simplicityのスキン機能の仕様

まとめ

日本語のWordpressテーマも色々使ってみましたが、どれも使いやすくてSEO対策もできていて良いテーマが多いですね。
デフォルトのままでも十分なので、日本語のテーマはもう個人の好みで選んでも、そうハズレはないように思います。

私の場合はちょこちょこカスタマイズするので、その時に一番やりやすかったのが「Simplicity」でした。

先日の記事「ソースコードの表示でCrayon Syntax Highlighterをやめて「highlight.js」にしてみた【Simplicity設置例】」でも感じたのが、子テーマでのカスタマイズのしやすさです。

こんなテーマが無料だなんて、ホント有り難いです。


リンク 「Simplicity」内部SEO施策済みのシンプルな無料Wordpressテーマ

スキン修正(2017.9.25)

カスタマイザーからの設定で、『完全レスポンシブ表示を有効』と『PCでサイドバーをレスポンシブ表示』にチェックが入っていない場合にサイドバーがレスポンシブ表示されてしまうようです。

スキンの設定 

スキンフォルダ『simple-black』内のCSSを次のようにすれば、正常に表示されます。

スキンの修正

スポンサーリンク

シェアする

フォローする