11フォローTwitterFacebookFeedlyRSSサイトデザインを自作テーマに変更しました。843はてブ後で読むLINE購読するこんにちは、SHUMiSTです。Simplicity(シンプリシティー)テーマを使用して、STORK(ストーク)テーマを再現というかデザインを近づけるカスタマイズ第4回目です。前回は、ナビゲーションメニューの作成と全体のヘッダーのナビゲーション部分のデザインを行いました。STORK(ストーク)テーマとそっくりになっている状態だと思います。今回は、まだ不格好でバランスの悪い残りのヘッダー(背景)部分のデザインをカスタマイズしていきます。追加ソースはなるべく、子テーマのスタイルシート(style.css)に追加しましょう。全体のリンクスタイルを設定ヘッダー(背景)の外側、内側ボックスにスタイルを設定メディアクエリにスタイルを追加ヘッダーテキストにスタイルを設定ページトップフォローボタンに色を設定ページトップフォローボタンにスタイルを設定カスタマイズまとめ今回のカスタマイズ前後のスクリーンショット第4回:ヘッダー(背景)部分のデザインを整えよう!今回も、ヘッダー(背景)部分のデザインを手を加えて整えていく前に下準備をします。外観->カスタマイズ->ヘッダーからヘッダー画像の設定をします。Simplicity(シンプリシティー)テーマでは「現在のヘッダー」と「ヘッダー外側背景画像」の2種類のヘッダー画像設定があります。2種類のヘッダー画像設定の違いは、下記の通りです。現在のヘッダー.h-topに設定され、中央寄せのヘッダー画像を設定できます。ヘッダー外側背景画像#headerに設定され、画面幅いっぱいに広がるヘッダー画像を設定できます。STORK(ストーク)テーマでは、画面幅いっぱいに広がるヘッダー画像を採用しているので、今回は「ヘッダー外側背景画像」の設定をします。1ヘッダー背景画像に設定したい任意の画像(サイズ:1920×1080以上を推奨)を選択2保存して公開たったこれだけで、Simplicity(シンプリシティー)では画面幅いっぱいに広がるヘッダー画像を設定することができます。一応、参考画像を添付しておきます。ヘッダー(背景)部分のデザインを設定ヘッダー(背景)部分のデザインを設定する上で必要な下準備は先ほどの手順で完了しました。現状は、下の添付画像のようにヘッダー背景部分の高さがヘッダーテキスト分の高さしかないため、ほとんど見えていない状態になっていると思います。この状態をスタイルを設定することで、STORK(ストーク)テーマのデザインに近づけていきます。第3回でナビゲーションメニューのスタイルを追加しましたが、同様のスタイルをヘッダー(背景)部分にも適用するため、そのスタイルに要素を追加し変更します。auto;}追加後のソース追加する要素#h-top・・・ヘッダー(背景)部分の内側ボックス疑似要素でのclearfix(clear:both)は、本来は各所で何度も使用するため専用のクラスを用意した方が良いですが分かり易いように下記のように記載しています。auto;}全体のリンクスタイルを設定リンクとリンク画像のアニメーションとリンク画像のマウスオーバー時のスタイルを設定します。ヘッダー(背景部分)では、ボタンにマウスオーバーした際のアニメーションやスタイルに使用します。第3回のサイト全体のスタイル設定を行っている場合は不要です。第3回で追加してある以下の2つのメディアクエリ(768px以上、1166px以上)の設定にヘッダー(背景)部分のスタイルを追加します。第2回のカスタマイズでソースを追加したヘッダーテキストスタイルを設定します。Simplicityにヘッダーソースを追加してSTORK風にカスタマイズ!WordPressのSimplicity(シンプリシティー)テーマの流用だけでは対応できない箇所、STORK(ストーク)テーマを再現できない箇所のテンプレートにソースを追加し、STORK(ストーク)テーマに近づけるカスタマイズ紹介記事です。13:16.header-heading・・・見出しテキスト.header-description・・・説明や補足テキスト.header-button・・・メニューボタン3種類のテキストとボタンを設定することができます。設定するテキストやボタンの内容は自由なので各自、自由に使用してください。1px);}ページトップフォローボタンに色を設定STORK(ストーク)テーマには存在しないページトップフォローボタンですが、第1回で書いた通りせっかくなので有効活用します。ページトップフォローボタンは外観->カスタマイズ->SNS->ページトップフォローボタンの表示で表示/非表示を切り替えられます。外観->カスタマイズ->SNS->フォローボタンに色をつけるにチェックをすることで手軽に各SNSに合った色を設定することができます。ページトップフォローボタンにスタイルを設定Simplicity(シンプリシティー)テーマのページトップフォローボタンのスタイルだと少し味気ないのでSTORK(ストーク)テーマ風にします。1px);}カスタマイズまとめ今回のカスタマイズによりヘッダー(背景)部分のデザインが整い、ヘッダー全体のデザインが整いました。これにより、Simplicity(シンプリシティー)テーマのカスタマイズ機能であるページトップフォローボタンが追加されていることとナビゲーションメニューに検索メニューがないこと以外は、ほぼSTORK(ストーク)テーマそっくりの状態になっていると思います。下のカスタマイズ後の画像と違う状態の場合は何かのカスタマイズ手順が抜けていると思ってください。次回は、先ほど言った通りナビゲーションメニューに検索メニューがない状態なので検索メニューを追加し、検索メニューを押した時にSTORK(ストーク)テーマのようにモーダルウィンドウで検索ボックスを表示するカスタマイズを行います。Simplicity(シンプリシティー)テーマの元々の機能やソースを流用して、STORK(ストーク)テーマに近づけているため、STORK(ストーク)テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。STORK(ストーク)テーマの機能面などを利用したい方はSTORK(ストーク)テーマを購入してご利用ください。第3回:ヘッダーデザイン編を読む第5回:検索ボックスのモーダルウィンドウ表示編を読むSimplicityをSTORK風にカスタマイズシリーズ目次へSimplicityWordPressPICKUPスポンサーリンクこの記事が気に入ったらいいね!しよう!最新記事をお届けします。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。