WordPressテーマ「simplicity2」用に群青系スキンを作ってみました


ワードプレステーマは定番のスティンガーやビズベクトル等を使っていたのですが、今は わいひら様のsimplicity2を使わせていただいてます。

非常にシンプルでカスタマイズがしやすく、お気に入りのテーマです。

素人ながらCSSの参考記事を見様見真似で群青色をメインにした 「simple-ultramarine」シンプルで落ち着いた雰囲気で目に優しい配色を重視したカスタマイズを作ってみました。

男女問わず誰でも使っていただける様なスキンになったかなと思います。
良かったら使ってみてください。

 カスタマイズしたパーツの紹介

  1. 背景イメージとカラムを半透明化
  2. グローバルナビをカスタマイズ
  3. サイドバーのカテゴリーなどの見出しに背景を付ける
  4. 見出し「H1~H4」のカスタマイズ
  5. 投稿一覧リストに影を付け浮き上がらせ「記事を読む」を右寄せ
  6. メタ情報の上下にラインを付け中央寄せにする
  7. サムネイル画像にマウスが乗った時の動作に変化を加える
  8. 関連記事一覧リストにボーダーラインを付け「記事を読む」を右寄せ
スポンサーリンク

背景イメージとカラムを半透明化

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-96

背景イメージ

薄い群青色をナビ下から段々と濃くしております。

これは単純に作成したイメージ画像を アップロードしたURLを指定して画面いっぱいに設定し、固定しているだけです。

ご自身で設定される場合は、アップした画像などを背景に指定するか、カスタマイザーの色で配色を指定するといい感じになります。

カラムの半透明化

個人的にですが、背景に色を付けた場合 カラムは真っ白よりも気持ち薄っすらと 透かせてあげた方が全体的に綺麗な印象だったので、メインとサイドともに少し透かせてみました。

グローバルナビをカスタマイズ

%e7%84%a1%e9%a1%8c

群青色をメインにグローバルメニューをカスタマイズしてみました。

グローバルナビリンク色も黒だと見にくいので白にしてます。

分かりにくいですが、群青単一色だとボケた感じになるので、ナビ上下に灰色のラインを引いて引き締めた感じに仕上げました。

サイドバーのカテゴリー等の見出しに背景を付ける

saido

サイドバー各ウィジェットの見出しに背景を付けました。

群青色を見出し背景にして、文字を白にして中央に表示させています。

見出しをカスタマイズ

H1~H4の見出しをカスタマイズしました。

群青色ベースなので見出しも少しカッコよくしてみました。

投稿一覧のカスタマイズ

投稿リストを見やすくしました

元々は区切りが無かったので、一覧リストを囲い込み影を付けて浮き上がらせた事により、見やすくカッコイイ感じに仕上げました。

記事を読むのカスタマイズ

少し「記事を読む」の部分を 目立たせてあげたかったので、ボタン化にして 左よりも右にあった方が見やすいと思ったので右寄せにしてみました。

メタ情報のカスタマイズ

投稿本文と一覧リストのメタ情報中央にし、上下にラインを付けました。

サムネイル画像に動きを付ける

少し分かりにくいですが、サムネイル画像にマウスを置くと少し半透明になって浮いてくる感じです。

関連記事一覧リストのカスタマイズ

%e9%96%a2%e9%80%a3%e8%a8%98%e4%ba%8b%e4%b8%80%e8%a6%a7%e3%83%aa%e3%82%b9%e3%83%88

関連記事一覧に区切りがなかったのでボーダーラインを引きました。

「記事を読む」をボタン化し、右に寄せました。

群青色でまとめたので見やすくなったかなと思います。

まとめ

全体的に落ち着いた雰囲気のスキンを探してる方はおすすめです。

スキンの使い方は子テーマのskinsのフォルダに入れてカスタマイザーのスキンから「simple-ultramarine」を選択して使用して下さい。ダウンロードは以下からどうぞ

分かりにくい場合、もしくはsimplicity2子テーマのダウンロード等は、simplicityから

『WordPressテーマ「simplicity2」用に群青系スキンを作ってみました』へのコメント

  1. 名前:kyan 投稿日:2017/07/11(火) 16:37:51 ID:a467ca8c7 返信

    けんじさん

    kyanです。先日はありがとうございました。
    質問前に悩んでたのが嘘みたいに解消しましたm(__)m

    今回もタイル2列時の件で質問させてください。

    質問内容:
    PC版は追加CSSに先日頂戴しましたアドバイス「#main {padding: 20px 10px;}」を
    追加することでアーカイブ/カテゴリ表示時にもタイル2列で表示されるようになりましたが、
    モバイル版では1列表示のままになってしまい、隙間があいてしまいます。

    こちらも先日の事例同様、Paddingのとりすぎによるもの?と推測しましたが、
    どこをどのように追記することでタイルが2列で表示されるようになりますでしょうか。

    捕捉・設定した項目など:
    なお、「Simplicity2」標準のスキン(例:ギンガムチェック(爽やか))選択時は無設定で
    タイルが2列で表示されます。
    また、「レイアウト(全体・リスト)」中の「完全レスポンシブ表示を有効」にチェックを
    つけています。

    設定、サイトは前回質問させていただいたものと同様です。
    http://kyan.mixh.jp/

    お手すきの際で結構でございますので、ご教示いただけますでしょうか。

    何卒宜しくお願い致します。

    • 名前:kyan 投稿日:2017/07/11(火) 16:46:33 ID:a467ca8c7 返信

      けんじさん
      度々の投稿失礼致します。

      上記のタイル2列で表示されない事象はスマートフォン上(といいますか、横の解像度が狭いデバイス上)で発生します。
      「Simplicity2」標準のスキンでは、同様の事例だとタイル自体が縮小されてタイル2列の形態は維持されます。

      舌足らずで申し訳ございません。

      どうぞ宜しくお願い致します。

    • 名前:けんじ 投稿日:2017/07/13(木) 12:14:45 ID:b63de6f5d 返信

      kyanさん
      たびたび不具合の報告すいません。
      元々ブログカードのような一覧スタイルで、
      見やすく設定しておりましたので^^;
      カスタマイズから追加CSSで大丈夫ですので
      スタイルを以下のように設定していただいて、
      #main .entry.entry-tile {
      padding: 0;
      }
      もちろん0でも構わないのですが、気持ち余白を取った方がキレイかと思います。
      なのでpaddingを0~見やすいように設定してください。
      何かあったらまた教えてください。
      どうも素人作なもので失礼いたしました。

  2. 名前:kyan 投稿日:2017/06/22(木) 18:38:58 ID:32060f765 返信

    けんじさん
    お返事頂きありがとうございます。

    おかげさまで、ご教示いただきました方法で無事に表示できました。
    メインカラムはどのページでも同じ設定を使っていると思っておりました。
    ありがとうございましたm(__)m

    • 名前:けんじ 投稿日:2017/06/22(木) 23:44:33 ID:43c645ba2 返信

      いえいえ、ブログの方にお礼まで、ありがとうございました。
      また何か要望などございましたら気軽にコメントください。

  3. 名前:kyan 投稿日:2017/06/17(土) 03:41:39 ID:0722ba8da 返信

    けんじさん
    はじめまして!
    「simple-ultramarine」はとても美しいスキンで一目惚れしました。

    早速設定しておりますが、2つほどどうにもうまくいかず、ご教示いただければと思い質問させていただきます。

    その1:
    レイアウト(全体・リスト)>一覧リストのスタイルより「2列カラム」を選択しますと、TOPページでは但しく2列カラムになりますが、カテゴリ別のTOPページでは1列(左寄せ)になってしまいます。
    正しく2列に表示させるためにはどのようにしたらよいでしょうか。

    その2:
    「続きを読む」が右寄せはされますが、アイコン化されません。
    子テーマのcssはすべてインストール時状態です(但し、過去に右寄せする記述をしたことがありましたが、うまくいかなかったため削除済です)。
    何か確認するポイントなどありますでしょうか。

    自分でも見落としてるポイントもあるかと思いますので、追加情報が必要でしたらお知らせいただけると助かります。

    何卒宜しくお願い致します。

    • 名前:けんじ 投稿日:2017/06/18(日) 11:55:19 ID:1718cf853 返信

      初めましてkyanさん。

      レイアウト(全体・リスト)>一覧リストのスタイルより「2列カラム」を選択しますと、TOPページでは但しく2列カラムになりますが、カテゴリ別のTOPページでは1列(左寄せ)になってしまいます。
      正しく2列に表示させるためにはどのようにしたらよいでしょうか。

      上記引き用の件ですが、基本的に全体「body部分」からフロートが解除されるようなレイアウト変更は、していませんので、
      メインとサブ二列並びに、なっていないということはスタイルの変更もしくは記述のキーネームが違っているのか、だと思うのですが、
      どういう状態なのか、サイト自体を見てみないと分からないので、すいませんが、どこをこうするといった事ははっきりとは言えません。

      「続きを読む」が右寄せはされますが、アイコン化されません。
      子テーマのcssはすべてインストール時状態です(但し、過去に右寄せする記述をしたことがありましたが、うまくいかなかったため削除済です)。
      何か確認するポイントなどありますでしょうか。

      上記二つ目の件ですが、これは単純にスタイルシートで右寄せ、ボーダーで囲いバックグラウンドにカラーを入れてるだけなので、ブラウザのデベロッパーなどで簡単に調べることができます。

      自分でも見落としてるポイントもあるかと思いますので、追加情報が必要でしたらお知らせいただけると助かります。
      と言って頂いてるので、分かることはすべて見てみますので一度サイトを見せていただけませんか?

      • 名前:kyan 投稿日:2017/06/21(水) 11:54:16 ID:8963d6c6b 返信

        けんじさん
        お返事頂きありがとうございます。

        あのあと自分でもさらに色々設定してみたのですがうまくいかず、
        原因切り分けのため新規にwordpressをインストールしました。

        設定:
        ・Wordpress バージョン 4.8–ja
        ・テーマ:Simplicity2 使用
         (実際のカスタマイズはSimplicity2 childより変更)
        ・スキン:simple-ultramarine 使用
        ・レイアウト(全体・リスト):タイル2列 に設定
        ※その他の設定は行っておりません。

        当初書き込み致ました、
        >「続きを読む」が右寄せはされますが、アイコン化されません。
        件は問題なく表示されました。
        元がうまく表示できない理由はまだ不明ですが、さしあたりスキンに依存しない部分と思われますので
        本件クローズいただければと思いますm(__)m

        2列カラムが表示されない件ですが、
        再現致しましたので下記にURLを書き込ませて頂きます。

        状況:
        ・TOPページからの記事一覧では、正常に2列表示されます。
         http://kyan.mixh.jp/
        ・アーカイブ一覧では、2列表示されません。
         http://kyan.mixh.jp/2017/06/
        ・カテゴリ一覧では、2列表示されません。
         http://kyan.mixh.jp/category/a/

        他にも足りない情報等ございましたら摘示いただければと思います。
        どうぞ宜しくお願い致します。

        • 名前:けんじ 投稿日:2017/06/21(水) 18:26:05 ID:e50cc25bf 返信

          kyanさんサイトの方を見させていただきましたところ、原因が判明しました。
          paddingの取り過ぎだと思います。

          トップページが二列並びになっているのは、トップのメインカラムと、
          その他アーカイブやタグ等のページは、別のセレクタを使っているようです。

          そこで、スタイルシートで調整していただきたいのですが、
          外観のカスタマイズから追加CSSに、以下のようにスタイルを追加してみてください。

          #main {padding: 20px 10px);} これを追加して一度サイトをいてみてもらえますか?

          もしこれでスタイルが効かない場合は、 他に使っていない場合、!importantを使えば優先的にスタイルが効くはずです。

  4. 名前:dailymochi 投稿日:2017/05/07(日) 23:08:17 ID:b49d01656 返信

    コメント失礼いたします。
    初めまして、dailymochiと申します。
    こちらで紹介されていた。『サムネイル画像に動きを付ける』を使わせていただきました。カーソルを合わせるとふわっとなるのはどうやっているのか気になってのでとっても嬉しいです!
    素晴らしい記事ありがとうござます。

    • 名前:けんじ 投稿日:2017/06/06(火) 03:52:03 ID:53df28cf5 返信

      dailymochiさんコメントありがとうございます。
      返信が遅くなり申し訳ありません。
      すこし入院していたもので、、、

      こちらで紹介されていた。『サムネイル画像に動きを付ける』を
      使わせていただきました。カーソルを合わせると
      ふわっとなるのはどうやっているのか気になってのでとっても嬉しいです!

      上記の引き用の件ですが、
      スタイルシートで動きを付けるものは沢山あるので、
      カーソルを合わせた場合に動きを付けるのは、ホバーエフェクトと言います。
      他にも、ページを表示した時に付ける動き、クリックすれば変換する
      エフェクトなど色々なスタイルシートだけで様々なエフェクトを付けることが出来るので、
      いろいろ試してみてください。コメントありがとうございました。m(_ _”m)

  5. 名前:青好き 投稿日:2017/03/14(火) 14:10:39 ID:47894c8e2 返信

    「simple-ultramarine」が大変気に入りました!
    本当に欲しかったタイプのスキンです!!
    ただ、ほんの少しだけ青を明るくしたいなぁと思っております。

    何かいい方法はあるでしょうか?

    • 名前:けんじ 投稿日:2017/03/14(火) 14:56:43 ID:f949d523e 返信

      青好きさんありがとうございます。
       
      変更箇所は全体的にですか?それとも部分的にですか?
       
      明るくするなら「simple-ultramarine」
      のstyleシートを編集する必要があるのですが、
      どこの部分を変えたいとお考えでしょうか?

    • 名前:けんじ 投稿日:2017/03/14(火) 15:04:40 ID:f949d523e 返信

      もう一つ簡単な方法があります。
      例えば、変更したい場所がサイドバーの見出しだとします。
      テーマのカスタマイズの下の項目に追加CSSがありますね?
      ここにスタイルをこのように
      #sidebar h3 {
      background-color: #4c8cb3;
      }
      こうすれば、このセレクタだけ色が変わります。

      ちょっとこの色は極端に明るくしてますが好みの色に調整してください。

  6. 名前:itnandemo 投稿日:2017/02/09(木) 00:30:08 ID:ec5c7d5ef 返信

    けんじ様

    私のブログで、”simple-ultramarine”での常時SSL化の対応方法についてコメントいただきありがとうございました

    次の休日に試してみようと思います

    取り急ぎお礼まで。

    • 名前:けんじ 投稿日:2017/02/09(木) 01:12:39 ID:e250e57e1 返信

      itnandemoさん。
      simple-ultramarineは、単純にCSSだけなので、
      何か不具合があれば、パス部分を全部取っ払ってください。
      おかげさまで、修正してアップする事が出来ました。

      私のブログまでコメントありがとうございます。

  7. 名前:そら豆 投稿日:2017/02/04(土) 10:26:13 ID:dda57b46d 返信

    やはり反映されず、試行錯誤しましたが、サイト内カスタマイズの”CSSを追加する”に
    li{
    margin-bottom: 1m;
    }
    で無事反映されることができました。

    HTMLを確認しても確かに#the-content
    になっていますがなぜ反映されなかったかは不明のままです。

    しかし問題の件に関しましては、無事に反映されましたので、ありがとうございました。
    本当に詳しく教えていただき、けんじさんに感謝です。

    • 名前:けんじ 投稿日:2017/02/04(土) 18:16:58 ID:69f1e4255 返信

      自分の作成途中のテーマと間違って見てました。
      marginが重なった可能性もありますが…
      simplicityはarticle 要素でマークアップしてたような気がして、
      それだとコンテンツ部分が独立したセクションになるのかな?知識不足で申し訳ないです。
      article liに対してのmarginが正解だと思います。
      でも無事解決されたようなので良かったです。

      リストにmarginを与えると確かに見やすいですね
      おかげさまでコメントフォームのリストをキレイに出来ました。
      テーマ作成のヒントになり、いい質問ありがとうございました。

  8. 名前:そら豆 投稿日:2017/02/03(金) 19:10:32 ID:1a2b95530 返信

    ん〜。どちらを試しても反映されていないようです。
    私のやり方が悪いのですが…

    とりあえず一度見てもらいたいのですが、問題の箇所のサイトは公開すらしていないので、アドセンス審査用のサイトにテストページを作りました。
    テーマがsimplicityではないですが、よろしければ見ていただけると助かります。

    • 名前:けんじ 投稿日:2017/02/04(土) 00:39:23 ID:2b1bf26eb 返信

      先ほど確認しましたが、記事内のリスト「li要素ですね?」に適応するわけで、
      そのサイトのテーマに対してのスタイルは、

      ポストコンテンツのliに対して
      .post-content li {
      margin-bottom 1em;
      }

      こうなりますが、根本的にテーマの作者によってHTMLの書き方が違うので、
      そのテーマの吐き出したコードにスタイルを当てるのが妥当な事になります。

      まず、変更するリストが入る要素のIDもしくは、Classに対して
      CSSの変更箇所にmarginを与えてあげる事です。

      例えば、simplicityのポストコンテンツならば、
      <div id=”the-content” class=”entry-content”>
      「記事の内容部分」
      < /div>
      HTMLがこうなってますね?

      優先度の高いIDにスタイルを付けると
      #the-content li {
      margin-bottom: 1em;
      }
      こうなります

  9. 名前:そら豆 投稿日:2017/02/03(金) 07:05:15 ID:1a2b95530 返信

    なぜか質問の一部が表示されていませんでした…
    後者のmarginで行段落を開けたいということです。

    cssに加えたいのですが「simple-ultramarine」のstyle.cssのどの部分に加えるべきか悩んでおります。

    • 名前:けんじ 投稿日:2017/02/03(金) 09:24:14 ID:f2a7e49de 返信

      もともとIDやClassが付いてないので、そのまま
       
      li {
      margin-top:1em;
      margin-bottom:1em;
      }
       
      これを追加するだけでいいのですが、グローバルナビなどに影響されるとあれなんで、、
      記事内に適用するには、「simplicity」だと
       
      .entry-content li {
      margin:1em 0;
      }
       
      これで大丈夫だと思いますよ。

  10. 名前:そら豆 投稿日:2017/02/03(金) 00:22:37 ID:1a2b95530 返信

    初めまして。
    現在2つ目のサイト作成にあたって、けんきちさんが作成された「simple-ultramarine」を使用させていただいております。

    素晴らしいデザインで大変感謝しております。
    必要なところはCSSを書き換えているのですが、1点程ご質問させてください。

    …略
    でリストを作った場合はいいのですが、
    <li style…略
    でリストマーカーを使用したリストを使用すると、少し行間が狭くなってしまうので、line-heightではなくmarginで行間を調整しようと思っています。

    その場合はstyle.cssのどの部分に記入すればいいでしょうか?
    .post-meta のところか.entry .post-metaのところか、または自分で新たに記入していくのかで迷っています。

    初歩的な質問に加え、長文をお許しください。
    宜しくお願い致します。

    • 名前:けんじ 投稿日:2017/02/03(金) 06:02:32 ID:c4381a104 返信

      初めまして そら豆さん。
      メタ部分の間隔のことなのか、新たにリストスタイルを追加するのか、
      私が無知すぎるせいか、少し質問の意味が理解できてなかったんですが
       
      li要素の次のマーカーの間隔を開けることですかね?

      • リスト リスト リスト リスト リスト
      • リスト リスト リスト リスト リスト
      • リスト リスト リスト リスト リスト

       
      例えば、上記の様line-heightだと全体的に行間が開くだけで、マーカーからマーカーまでが狭く感じるから
       
      以下のように行間ではなく、marginで段落間を開けたいということですか?

      • リスト リスト リスト リスト リスト
      • リスト リスト リスト リスト リスト
      • リスト リスト リスト リスト リスト

       
      line-heightプロパティを与えると、行間全体が開いてしまう。なので
       
      (ID or CLASS) li {
      margin: 1em 0;
      }
       
      こういう風にリストの項目間に間隔を開けるだけなら
      cssにmarginを与えてあげるだけでいいのですが、間違ってたら申し訳ないです。
       
      サイトのここ!ってとこを見ればすぐ解るのですが…

  11. 名前:素人ブロガー 投稿日:2017/01/15(日) 22:24:34 ID:c2404e159 返信

    「simple-ultramarine」は素晴らしいの一言です。
    早速私のブログに使わせて頂きました。
    まさに理想のデザインでめちゃくちゃお気に入りです。
    素晴らしいスキンをありがとうございました!
    また新作が出ればサイトを覗かせて頂きます。

    • 名前:けんきち 投稿日:2017/01/16(月) 01:13:09 ID:eb883b725 返信

      こんばんは、素人ブロガーさん。
      丁重なコメントと、この度は「simple-ultramarine」のダウンロードをして頂き有難うございました。
      今年に入って、Wordpressのオリジナルテーマを作っていますので、最近は記事の更新をサボっていますが、例えば、こんな色のベースで出来上がったスキンが欲しい等の要望がもし、ございましたら作成してみますので、良ければまた、覗いて頂けたら幸いです。