11フォローTwitterFacebookFeedlyRSSサイトデザインを自作テーマに変更しました。692はてブ後で読むLINE購読するこんにちは、SHUMiSTです。Simplicity(シンプリシティー)テーマを使用して、STORK(ストーク)テーマを再現というかデザインを近づけるカスタマイズ第10回目です。前回は、ページトップやカテゴリーページの記事一覧をSTORK(ストーク)テーマのマガジンタイプ風にするカスタマイズを行い、予定していたすべての記事一覧カスタマイズが完了しました。今回は、前回予定していた通り、Simplicity(シンプリシティー)テーマのサイドバーの基本とinputを使用する検索ボックスやカテゴリー・アーカイブのドロップダウンセレクトボックスなどのフォーム関係のスタイルをSTORK(ストーク)テーマ風にカスタマイズしていきます。追加ソースはなるべく、子テーマのスタイルシート(style.css)に追加しましょう。テンプレートファイルに変更を加える場合は親テーマの該当ファイルを子テーマのディレクトリにコピーし、子テーマで変更を加えましょう。既存のスタイルにサイドバーの検索ボックス関係の要素を追加カテゴリー・アーカイブなどのドロップダウンセレクトボックスのスタイルを設定カスタマイズまとめ今回のカスタマイズ前後のスクリーンショットサイドバーの基本とフォーム関係のスタイルを変更しよう!第7回で既にサイドバーの幅を300pxから336pxにしてあるので、今回は基本とフォーム関係のスタイルを変更します。第3回で追加してあるメディアクエリ(768px以上)の設定にサイドバーの基本フォントサイズを設定します。}サイドバーの基本スタイルを設定サイドバーの見出しやウィジェットの基本となるスタイルを設定します。3em;}inputを使用する検索ボックスなどのフォーム関係の基本スタイルを設定inputを使用する検索ボックスやカテゴリー・アーカイブのドロップダウンセレクトボックスなどのフォーム関係の基本となるスタイルを設定します。上記までのカスタマイズで基本となるスタイルは設定できたので、サイドバーの検索ボックスのスタイルをSTORK(ストーク)テーマ風になるようにスタイルを設定します。第3回、第4回、第7回、第8回、第9回で追加した既存のスタイルに検索ボックス関係の要素を追加します。#searchformのbefore、after要素を追加します。疑似要素でのclearfix(clear:both)は、本来は各所で何度も使用するため専用のクラスを用意した方が良いですが分かり易いように下記のように記載しています。both;}カテゴリー・アーカイブなどのドロップダウンセレクトボックスのスタイルを設定カテゴリー・アーカイブなどのドロップダウンから選択できるセレクトボックスのスタイルを設定します。外観->ウィジェット->カテゴリーまたはアーカイブの設定->ドロップダウン表示にチェックしている場合に適用されます。100%;}カスタマイズまとめ今回のカスタマイズにより、サイドバーの基本と検索ボックスやカテゴリー・アーカイブのドロップダウンセレクトボックスなどのフォーム関係のスタイルがSTORK(ストーク)テーマ風になりました。今後、プラグインなどでサイドバーにウィジェットを設置する際に、プラグインなどで優先順位が上位のスタイルを設定していない限りは、inputタグを使用するフォームやドロップダウンから選択するセレクトボックスがある類のウィジェットも同様に変更されるはずです。変更されない場合は優先順位が上位のスタイルが設定されていると思うので、更に優先順位が上位になるように設定(!importantを使用するか、より詳細に要素を指定)すれば良いと思います。STORK(ストーク)テーマ風になるようにスタイルを変更するカスタマイズを行います。Simplicity(シンプリシティー)テーマの元々の機能やソースを流用して、STORK(ストーク)テーマに近づけているため、STORK(ストーク)テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。STORK(ストーク)テーマの機能面などを利用したい方はSTORK(ストーク)テーマを購入してご利用ください。第9回:記事一覧をマガジンタイプに変更編を読むSimplicityをSTORK風にカスタマイズシリーズ目次へSimplicityWordPressPICKUPスポンサーリンクこの記事が気に入ったらいいね!しよう!最新記事をお届けします。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。