Ver1.3.1をリリースしました(11/22)

SANGOをカスタマイズガイド風のデザインにする方法(子テーマ)

このページでは、SANGOを「カスタマイズガイド」風のデザインにする方法を紹介します。つまり、今みなさんがご覧になっているこのページのようなデザインになります(少し違いはありますが)。 

カスタマイズ後のイメージ

カスタマイズ前の注意点

このカスタマイズは自己責任で行って頂く必要があります。以下の点にご了承頂ける方のみ、ご利用可能となっています。

  • 本カスタマイズ内容は、今後のアップデート(ver1.3以降)には対応しておりません。テーマをアップデートされると、エラーが生じたり、うまく動かない機能が出てくる可能性があります。
  • あくまでもご要望に応じて作成したものです。明らかなバグを除いてサポートは行いませんので、ご注意ください。
  • HTMLとCSSおよびWordPressについての最低限の知識がある方のみ、ご利用ください。

また、以下の点にもご注意ください。

  • カスタマイズガイドのような、サイドバーの「クリックで開く」機能は実装なし(常に開きっぱなし)
  • トップページやカテゴリー/アーカイブページの記事一覧レイアウトは「カードタイプ」のみ(横長には対応していません)。
  • 専用の子テーマをご利用頂く必要があります

手順1:専用の子テーマを導入

はじめに、専用の子テーマを導入してください(SANGOの本テーマと、子テーマの両方をインストールして、子テーマの方を有効化してください)。

専用子テーマをダウンロード

子テーマの導入の仕方はこちらの記事で解説しています。

WordPressで子テーマを活用して安全にカスタマイズを行う方法

手順2:タイトルの配置設定

「外観」⇒「カスタマイズ」⇒「サイトの基本情報」で「大画面表示時にもロゴを中央寄せ」にチェックを入れます。これを忘れると、タイトルがズレてしまうのでご注意ください。


手順3:ウィジェットの設定

3-1:サイドバーと追尾サイドバーはオフに

外観のウィジェット設定から、サイドバーと追尾サイドバーの中身を空にしてください。これらがONになっていると、変なところにウィジェットが表示されてしまいます。

3-2:「スマホ用ナビドロワー」で固定サイドバーの中身を設定

左側の固定サイドバーに表示する内容は「スマホ用ナビドロワー」ウィジェットで設定します。

①のようなアイコン付きのメニューは、下のリンク先で紹介されているコードを「カスタムHTML」ウィジェットに貼り付けることで表示させることができます。

ウィジェット用メニューボックスの設置方法

②のようなメニューは「カスタムメニュー」ウィジェットで表示させることができます。メニューは、管理画面の外観⇒メニューから新しく作ることができます。FontAwesomeのアイコンを合わせて使うのがおすすめです(例:<i class="fa fa-home"></i> ホーム)。

3-3:その他のウィジェットを設定

上記以外のウィジェットは本テーマと同じように使って頂くことができます。

ウィジェットの設定をする
ウィジェットの設定をしよう:広告の貼り方も解説

手順4:固定サイドバー上部の設定

続いてタイトルまわりの設定です。上の画像のように、タイトル、画像、検索ボックスを縦に並べて表示させることができます。

子テーマ内の header.phpを編集します。まずは、下記の部分を見つけましょう。

header.php
<div class="drawer__title dfont">
	<span class="main-c">★固定サイドバーのタイトル★</span>
	★ここに画像タグ<img ~>★
	<label class="close" for="drawer__input"><span></span></label>
	<div class="widget widget_search">

↑ 上のコードの★の部分を編集することになります。

★固定サイドバーのタイトル★を、表示したいテキストに置き換え、★ここに画像タグ<img ~>★の部分を使いたい画像のimgタグに置き換えます。ちなみに先程の例で載せていた山のアイコン画像は、FLAT ICON DESIGNでダウンロードできます。


手順5:ヘッダーアイキャッチ画像を設定

 

トップページのタイトル下には「ヘッダーアイキャッチ画像」を設定することができます。2分割ヘッダーアイキャッチ画像には対応していないのでご注意ください。

ヘッダーアイキャッチを設定する
ヘッダーアイキャッチ画像を設定しよう

参考:カスタマイズガイド風の配色にするには

SANGOのカスタマイズガイドでは、初期設定から少し配色を変えています。

  • 背景色:#c8e4ff
  • メインカラー/ヘッダー背景色:#70b7ff

どれも管理画面の「外観⇒カスタマイズ⇒色」で指定することができます。


これでカスタマイズガイド用の基本的な設定は終了です。あとは、ウィジェットを追加したり、メニューを追加したりと、ご自由にカスタマイズをして頂ければと思います。