MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

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

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

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


画像がなくなったので、Simplicityから お借りしました。m(__)m

背景イメージ

薄い群青色をナビ下から段々と濃くしております。 これは単純に作成したイメージ画像を アップロードしたURLを指定して画面いっぱいに設定し、固定しているだけです。

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

カラムの半透明化

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

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

 

群青色をメインにグローバルメニューをカスタマイズしてみました。 グローバルナビリンク色も黒だと見にくいので白にしてます。 分かりにくいですが、

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

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

サイドバー各ウィジェットの見出しに背景を付けました。 群青色を見出し背景にして、文字を白にして中央に表示させています。

見出しをカスタマイズ

H1~H4の見出しをカスタマイズしました。 群青色ベースなので見出しも少しカッコよくしてみました。

投稿一覧のカスタマイズ

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

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

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

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

メタ情報のカスタマイズ

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

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

少し分かりにくいですが、サムネイル画像にマウスを置くと少し半透明になって浮いてくる感じのホバーエフェクトを入れておきました。

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

関連記事一覧の記事と記事の間に区切りが無かったので、ボーダーラインを引き、モアリンク「記事を読む」の部分をボタンにして 右に寄せてみました。

こちらも全体的に、群青色でまとめたので見やすくなったかなと思います。

ダウンロード

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

ダウンロードは以下からどうぞ。

simple-ultramarineのダウンロード

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

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

分かりにくい場合や、デザインの調整・不具合など気軽にコメントください。 あと、Simplicity2や子テーマなどのダウンロードは、simplicityからお願いします。

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメント一覧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      ポストコンテンツのliに対して

      
      .post-content li {
       margin-bottom 1em;
      }

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

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

      例えば、simplicityのポストコンテンツならば、

      
      
      「記事の内容部分」

      HTMLがこうなってますね?

      優先度の高いIDにスタイルを付けると

      
      #the-content li {
          margin-bottom: 1em;
      }
      

      こうなります。

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

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

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

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

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

  • けんじ様

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

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

    取り急ぎお礼まで。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • 初めましてkyanさん。

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

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

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

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

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

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

        あのあと自分でもさらに色々設定してみたのですがうまくいかず、
        原因切り分けのため新規に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/

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

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

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

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

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

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

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

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

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

  • けんじさん

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

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

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

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

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

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

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

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

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

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

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

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

    • kyanさん。たびたび不具合の報告すいません。元々ブログカードのような一覧スタイルで、
      見やすく設定しておりましたので^^;

      カスタマイズから追加CSSで大丈夫ですので、スタイルを以下のように設定していただいて、
      #main .entry.entry-tile {
      padding: 0;
      }
      もちろん0でも構わないのですが、気持ち余白を取った方がキレイかと思います。
      なのでpaddingを0~見やすいように設定してください。

      何かあったらまた教えてください。
      どうも素人作なもので失礼いたしました。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください