「カビトリ」風のトップページにカスタマイズする方法

ぼくが運営しているサイトのひとつに「カビトリ」というサイトがあります。

for-menと同じくらい愛情をもって作成したサイトです。

PC時のトップページ

MOBILE時のトップページ

カビトリのデザインはSANGOのマテリアルデザインよりも、フラットデザイン寄りにカスタマイズしています。

MENくん

フォントも細くしたり、色合いも優しい色にしてあります!

くま3号

スッキリしてシュッとしてるな

この記事ではカビトリと同じようなトップページにできるカスタマイズを紹介します。

このカスタマイズではPORIPUを使います

おすすめ記事を表示させるのにPORIPUを使用しています。PORIPUはSANGO公認の子テーマになります。

カスタマイズは自己責任でやろう

自己責任の意味がわからない方初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

カスタマイズは自己責任。ぼくはこんな風に思っています。

SANGOとPORIPU側での
準備

目次へ戻る

今回のカスタマイズにはカスタマイザーでの準備が必要です。

外観→カスタマイザでの設定
  1. PORIPUの設定でおすすめ記事の設定
  2. 色の設定
  3. デザイン・レイアウト設定で記事一覧レイアウトの設定
  4. SANGOオリジナル機能の管理で記事一覧のタブ切り替えを設定
  5. 詳細設定でサイドバーの設定
くま3号

多く見えるけど、ポチポチするだけだからすぐ終わんよ

①おすすめ記事の設定

外観カスタマイズPORIPUの設定トップのおすすめ記事

この画像には alt 属性が指定されておらず、ファイル名は Image-14.png です

上の2つにチェックを入れます。表示する記事はお好きなように設定してくださいね。

②色の設定

外観カスタマイズ

この画像には alt 属性が指定されておらず、ファイル名は Image-15.png です

色を設定する項目です。たくさん設定する項目があります。

カビトリの色設定

背景色#f5f8fa
メインカラー#72d3ee
薄めの下地色#bbdfed
アクセントカラー#ff6f61
リンク色#1da1f2
ヘッダー背景色#72d3ee
ヘッダータイトル色#ffffff
ヘッダーメニュー文字色 #ffffff
ウィジェットタイトル色 #ffffff
ウィジェットタイトル背景色#72d3ee
フッターウィジェットの背景色#e1e8ed
フッターウィジェットの文字色#5a5a5a
MENくん

参考程度にカビトリのカラーを書いておきました

デザイン・レイアウト設定で記事一覧レイアウトの設定

外観カスタマイズデザイン・レイアウト設定記事一覧レイアウト

この画像には alt 属性が指定されておらず、ファイル名は Image-16.png です

このようにチェックを入れます。ただ、このへんは人の好みなのでどちらでも大丈夫です。

SANGOオリジナル機能の管理で記事一覧のタブ切り替えを設定

外観カスタマイズSANGOオリジナル機能の管理記事一覧のタブ切り替え

この画像には alt 属性が指定されておらず、ファイル名は Image-17.png です

タブ切り替えを有効にします。有効にしたら、タイトルとカテゴリーIDを記入しましょう。

サイドバーの設定

外観カスタマイズ詳細設定

この画像には alt 属性が指定されておらず、ファイル名は Image-19.png です

詳細設定の中にある上の項目にチェックを入れてください。

MENくん

あとはCSSでデザインをフラットにするだけ!

カビトリ風のデザインにカスタマイズする
CSSコード

目次へ戻る

こちらを追加CSSもしくは子テーマのstyle.cssに追加してください。

まとめ

この記事を書こうとした時に、カビトリでCSSが全部消えたので一度死にましたが、なんとか前の状態まで持ってこれました。

復旧にあほほど時間かかったにも関わらず、カスタマイズ記事自体はすぐ書けましたw

コメントを残す

メールアドレスが公開されることはありません。