MENU

フォロー

LOST ARK（ロストアーク）の攻略を多数掲載中！

Simplicityのサイドバーの基本とフォーム関係のスタイルをSTORKテーマ風にカスタマイズ！

2017.11.26｜7年前81

こんにちは、SHUMiSTです。

Simplicity（シンプリシティー）テーマを使用して、STORK（ストーク）テーマを再現というかデザインを近づけるカスタマイズ第１０回目です。

前回は、ページトップやカテゴリーページの記事一覧をSTORK（ストーク）テーマのマガジンタイプ風にするカスタマイズを行い、予定していたすべての記事一覧カスタマイズが完了しました。

今回は、前回予定していた通り、Simplicity（シンプリシティー）テーマのサイドバーの基本とinputを使用する検索ボックスやカテゴリー・アーカイブのドロップダウンセレクトボックスなどのフォーム関係のスタイルをSTORK（ストーク）テーマ風にカスタマイズしていきます。

追加ソースはなるべく、子テーマのスタイルシート（style.css）に追加しましょう。
また、テンプレートファイルに変更を加える場合は親テーマの該当ファイルを子テーマのディレクトリにコピーし、子テーマで変更を加えましょう。

スポンサーリンク

サイドバーの基本とフォーム関係のスタイルを変更しよう！

第７回で既にサイドバーの幅を300pxから336pxにしてあるので、今回は基本とフォーム関係のスタイルを変更します。

メディアクエリにサイドバーのフォントサイズを設定

第３回で追加してあるメディアクエリ（768px以上）の設定にサイドバーの基本フォントサイズを設定します。

追加先のメディアクエリ

@media only screen and (min-width: 768px) {
//この括弧内に追加する
}

追加ソース

    #sidebar {
        font-size: .9em;
    }

サイドバーの基本スタイルを設定

サイドバーの見出しやウィジェットの基本となるスタイルを設定します。

追加ソース

#sidebar h3 {
    margin-bottom: 0;
    background: #1bb4d3;
    color: #ffffff;
    font-size: 1em;
    padding: 0;
    border-radius: 3px;
    margin-top: 0;
    overflow: hidden;
    padding: 0.75em 0.8em;
}
#sidebar .widget {
    margin: 0 0 3em;
}

inputを使用する検索ボックスなどのフォーム関係の基本スタイルを設定

inputを使用する検索ボックスやカテゴリー・アーカイブのドロップダウンセレクトボックスなどのフォーム関係の基本となるスタイルを設定します。

追加ソース

input[type="text"], input[type="password"],
input[type="datetime"], input[type="datetime-local"],
input[type="date"], input[type="month"], input[type="time"],
input[type="week"], input[type="number"], input[type="email"],
input[type="url"], input[type="search"], input[type="tel"],
input[type="color"], select, textarea, .field {
    display: block;
    padding: 10px 2%;
    margin-bottom: 14px;
    font-size: 1em;
    color: #666;
    border: 3px solid rgba(51, 51, 51, 0.1);
    border-radius: 1px;
    vertical-align: middle;
    max-width: 96%;
    max-width: 100%\9;
    background-color: #FFFFFF;
    -webkit-transition: background-color 0.24s ease-in-out;
    transition: background-color 0.24s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}
input[type="text"]:focus, input[type="text"]:active,
input[type="password"]:focus, input[type="password"]:active,
input[type="datetime"]:focus, input[type="datetime"]:active,
input[type="datetime-local"]:focus, input[type="datetime-local"]:active,
input[type="date"]:focus, input[type="date"]:active,
input[type="month"]:focus, input[type="month"]:active,
input[type="time"]:focus, input[type="time"]:active,
input[type="week"]:focus, input[type="week"]:active,
input[type="number"]:focus, input[type="number"]:active,
input[type="email"]:focus, input[type="email"]:active,
input[type="url"]:focus, input[type="url"]:active,
input[type="search"]:focus, input[type="search"]:active,
input[type="tel"]:focus, input[type="tel"]:active,
input[type="color"]:focus, input[type="color"]:active,
select:focus, select:active,
textarea:focus, textarea:active,
.field:focus, .field:active {
    background-color: #f7f8fa;
    border: 0;
    box-shadow: none;
    color: inherit;
    border: 3px solid rgba(51, 51, 51, 0.1);
}

サイドバーの検索ボックスのスタイルを設定

上記までのカスタマイズで基本となるスタイルは設定できたので、サイドバーの検索ボックスのスタイルをSTORK（ストーク）テーマ風になるようにスタイルを設定します。

追加ソース

#sidebar #searchform {
    position: relative;
    height: 40px;
    margin-bottom: 1.5em;
    margin-top: 0;
}
#sidebar #s {
    position: absolute;
    padding: 12px 1%;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    height: auto;
    color: #666;
    max-width: 100%;
	line-height: normal;
}
#sidebar #searchsubmit {
    position: absolute;
    right: 10px;
    border: 0;
    display: block;
    height: 100%;
    padding: .8em .8em;
    font-size: 1.1em;
    color: #333;
    margin: 0;
}

既存のスタイルにサイドバーの検索ボックス関係の要素を追加

第３回、第４回、第７回、第８回、第９回で追加した既存のスタイルに検索ボックス関係の要素を追加します。

追加前のソース

#header-in:before, #header-in:after,
.menu:before, .menu:after,
#h-top:before, #h-top:after,
#body-in:before, #body-in:after,
#main:before, #main:after,
#list .entry:before, #list .entry:after,
#list a.hover-card:before, #list a.hover-card:after,
.s-large_thumb_style #list:before, .s-large_thumb_style #list:after,
.s-large_thumb_style #list .hover-card .entry-card-content:before,
.s-large_thumb_style #list .hover-card .entry-card-content:after,
.s-tile_thumb_style #list:before, .s-tile_thumb_style #list:after,
.s-tile_thumb_style #list .hover-card .entry-card-content:before,
.s-tile_thumb_style #list .hover-card .entry-card-content:after {
    content: "";
    display: table;
}
#header-in:after, .menu:after, #h-top:after,
#body-in:after, #main:after, #list .entry:after,
#list a.hover-card:after,
.s-large_thumb_style #list:after,
.s-large_thumb_style #list .hover-card .entry-card-content:after,
.s-tile_thumb_style #list:after,
.s-tile_thumb_style #list .hover-card .entry-card-content:after {
    clear: both;
}

追加後のソース

#sidebar #searchformのbefore、after要素を追加します。

疑似要素でのclearfix（clear:both）は、本来は各所で何度も使用するため専用のクラスを用意した方が良いですが分かり易いように下記のように記載しています。
#header-in:before, #header-in:after,
.menu:before, .menu:after,
#h-top:before, #h-top:after,
#body-in:before, #body-in:after,
#main:before, #main:after,
#list .entry:before, #list .entry:after,
#list a.hover-card:before, #list a.hover-card:after,
.s-large_thumb_style #list:before, .s-large_thumb_style #list:after,
.s-large_thumb_style #list .hover-card .entry-card-content:before,
.s-large_thumb_style #list .hover-card .entry-card-content:after,
.s-tile_thumb_style #list:before, .s-tile_thumb_style #list:after,
.s-tile_thumb_style #list .hover-card .entry-card-content:before,
.s-tile_thumb_style #list .hover-card .entry-card-content:after,
#sidebar #searchform:before, #sidebar #searchform:after {
    content: "";
    display: table;
}
#header-in:after, .menu:after, #h-top:after,
#body-in:after, #main:after, #list .entry:after,
#list a.hover-card:after,
.s-large_thumb_style #list:after,
.s-large_thumb_style #list .hover-card .entry-card-content:after,
.s-tile_thumb_style #list:after,
.s-tile_thumb_style #list .hover-card .entry-card-content:after,
#sidebar #searchform:after {
    clear: both;
}

カテゴリー・アーカイブなどのドロップダウンセレクトボックスのスタイルを設定

カテゴリー・アーカイブなどのドロップダウンから選択できるセレクトボックスのスタイルを設定します。

外観->ウィジェット->カテゴリーまたはアーカイブの設定->ドロップダウン表示にチェックしている場合に適用されます。

追加ソース

.widget select {
    margin-top: 1em;
    width: 100%;
    max-width: 100%;
}

カスタマイズまとめ

今回のカスタマイズにより、サイドバーの基本と検索ボックスやカテゴリー・アーカイブのドロップダウンセレクトボックスなどのフォーム関係のスタイルがSTORK（ストーク）テーマ風になりました。

今後、プラグインなどでサイドバーにウィジェットを設置する際に、プラグインなどで優先順位が上位のスタイルを設定していない限りは、inputタグを使用するフォームやドロップダウンから選択するセレクトボックスがある類のウィジェットも同様に変更されるはずです。

もし、変更されない場合は優先順位が上位のスタイルが設定されていると思うので、更に優先順位が上位になるように設定（!importantを使用するか、より詳細に要素を指定）すれば良いと思います。

次回は、Simplicity（シンプリシティー）テーマのトップページでは人気記事を表示し、それ以外のページでは新着記事を表示する大変便利なオリジナルウィジェット「新着・人気記事」をSTORK（ストーク）テーマ風になるようにスタイルを変更するカスタマイズを行います。

Simplicity（シンプリシティー）テーマの元々の機能やソースを流用して、STORK（ストーク）テーマに近づけているため、STORK（ストーク）テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。

STORK（ストーク）テーマの機能面などを利用したい方はSTORK（ストーク）テーマを購入してご利用ください。

今回のカスタマイズ前後のスクリーンショット

カスタマイズ前

カスタマイズ後

第９回：記事一覧をマガジンタイプに変更編を読む

SimplicityをSTORK風にカスタマイズシリーズ目次へ

スポンサーリンク

この記事が気に入ったら
いいね！しよう！

最新記事をお届けします。

書いている人

SHUMiST

趣味人

書いている人”SHUMiST（シュミスト/趣味人）”は自他共に認める「割と極度に面倒くさがり」です。 よく人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はＯ型なんですけど「本当にＯ型？」とか言われることが多い。なぜ、WEB関係に手を出したのかが自分でも疑問。

Follow Me

カテゴリー

アーカイブ