migaru-days

身軽なシンプル生活

SANGOのスマホ版デザインでカスタマイズしたこと

SANGOカスタマイズ

こんにちは。マリ（＠damarino_oheya）です！

このブログはワードプレステーマの「SANGO」を使っています。

 

はてなブログから移転してきて2ヶ月、SANGOの使い方にも慣れてきました。

SANGOは約1万円の有料テーマですが、お高い分、かなりメリットが多いです。

 

とくに「SANGOカスタマイズガイド」を見れば、SANGOの使い方が全て分かるところが凄いです。

[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]SANGOは機能が多すぎて分かりにくいかと思いきや、カスタマイズガイドで丁寧に解説されているので変に迷うことがありません。[/say]

私が気に入っているのは

というところ。

流行りの「固定ページのホーム固定」も、カスタマイズガイドを見ながら作れば簡単です。

[kanren id="10378"]

ただ、機能がかなり多い分、2ヶ月たってやっと慣れてきたという感じです。

とくに、このブログはスマホからのアクセスが7割と多いので、スマホからのデザインには気を使っているつもりです。

 

この記事では、SANGOのスマホデザインでカスタマイズしたことをまとめています。

SANGOのカスタマイズ方法｜追加CSSから

カスタマイズは「外観→カスタマイズ→追加CSS」で行っています。

FTPソフトを使う方法もありますが、一度サイトを真っ白にしてしまったので、それ以来怖くて触れません。。。

 

SANGOのスマホ版｜TOPページでカスタマイズしたこと

トップページでカスタマイズしたことはこちら。

[box class="box1" title="カスタマイズしたこと"]

  • ナビメニューの背景色
  • ウィジェットのタイトル
  • おすすめ記事（pic up）の内部リンクデザイン
  • ハンバーガーメニューの下に「MENU」文字

[/box]

ナビメニューの背景色

SANGOのデフォルトではナビメニューの背景色は白なので、好きなカラーに変更しました。

[codebox title="CSS"]

nav.mobile-nav{
  background-color:好きな色;
}
nav.mobile-nav a{
  color:#好きな色;
}

[/codebox]

 

ウィジェット部分のタイトルを変更

トップページ上部の「pic up」というおすすめ記事はウィジェットを使っています。

「ウィジェット→トップページ記事一覧上」に「カスタムHTML」で作っています。

 

カスタムHTMLの中身はこんな感じ。

  • タイトル：Pick up
  • 記事：内部リンクで好きな記事
  • リンクボタン：投稿ページで「〜〜一覧はこちら」のリンクボタンを作ってコピペ（中央寄せ）
  • 新着記事の見出し：タイトルと同じデザインのものを作る

CSSはこちらです。背景色は「green」ですがお好きな色でどうぞ。

[codebox title="CSS"]

/*スマホ＊おすすめ記事タイトル*/
p.strong.dfont.center{
  letter-spacing:0.1em;
  margin: 0em 5em 1.5em 5em;
  position: relative;
  padding: 0.3em 0.4em;
  text-decoration: none;
  color: #fff;
  background: green;
  border-radius: 20px;
  transition: .4s;
  border-bottom:none;
}
/*スマホ＊新着記事タイトル*/
p.center.strong.top-title{
  font-weight: normal;
  letter-spacing:0.1em;
  margin: 2em 5em 1.5em 5em;
  position: relative;
  padding: 0.3em 0.4em;
  text-decoration: none;
  color: #fff;
  background: green;
  border-radius: 20px;
  transition: .4s;
  border-bottom:none;
  font-family: Quicksand;
  font-weight: bold;
}

[/codebox]

 

おすすめ記事（pic up）の内部リンクデザイン

トップページの内部リンクカードを少し変えています。

  • 文字サイズ
  • ホバー時に浮き上がる＆カラー変更なし（白）

CSSはこちらです。

[codebox title="CSS"]

span.tbcell.tbtext{
font-size:14px!important;
}
div.widget_text a.linkto.table:hover{
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    opacity: 1 ;
    background:#fff;
}

[/codebox]

 

ハンバーガーメニューの下に「MENU」文字

デフォルトは3本線のみなのですが、それだと何なのかよく分からないので下に「MENU」という文字をつけています。

こちらは検索していたらマクリンさん（＠maku_ring）のツイートで知りました。

https://twitter.com/Maku_ring/status/1032977029799469056

このブログのCSSはこんな感じに少しアレンジしています。

[codebox title="CSS"]

/*ハンバーガーアイコン*/
#drawer .fa-bars{
 margin-top:0.8em;
}
#drawer .fa-bars:after {
 content: "MENU";
 font-size: 8px;
 padding-top:0.3em;
 font-weight: bold;
 display: block;
 letter-spacing:0.1em;
}

[/codebox]

 

SANGOのスマホ版｜ナビドロワー（ハンバーガー）の中でカスタマイズしたこと

スマホ版のナビドロワー（ハンバーガーメニュー）の中もウィジェットで設定するのですが

  1. 検索
  2. カスタムHTML：ウィジェット用メニューボックス
  3. カスタムHTML：おすすめ記事
  4. カスタムHTML：プロフィール
  5. カテゴリー
  6. タグクラウド

という順番で設置しています。

 

ここでカスタマイズしたことはこちら。

[box class="box1" title="カスタマイズしたこと"]

[/box]

 

ウィジェット用メニューボックス｜中身のカスタマイズ

ウィジェット用メニューボックスの設置方法は「SANGOカスタマイズガイド」のこちらのページに記載されていますが、この中身を少しカスタマイズしています。

  • 文字間（幅）
  • 文字サイズ
  • アイコンの大きさ

[codebox title="CSS"]

/*ウィジェット用メニューボックス内*/
.widget-menu.dfont.cf {/*文字間*/
 letter-spacing:0.15em;
}

.widget-menu.dfont.cf a{/*文字サイズ*/
 height:70px ;
 padding-top:0.2em!important;
}
.widget-menu.dfont.cf ::before{/*アイコンサイズ*/
 font-size:0.7em;
}

[/codebox]

アイコンはFontawesomeのアイコンを使っていますが、SANGOのデザインと合っていて可愛いですよね。

 

ウィジェット用メニューボックス｜タイトルをカスタマイズ

デフォルトではフォントはいじられていないので、

  • フォント：Quicksand
  • 文字間：広く
  • 背景色：任意のカラー

という感じでカスタマイズしました。

[codebox title="CSS"]

.widget-menu__title {
  font-family: Quicksand;
  letter-spacing:0.25em;
  background-color:#dadada!important;/*お好きな色*/
}

[/codebox]

 

ウィジェットのタイトルデザイン

ウィジェットはサイドバーでも使っているので、以前からサイドバー用ウィジェットのタイトルデザインは変えていました。

ですが、ハンバーガーの中にウィジェットを持ってくると、サイドバーと同じデザインにはならないみたいなんですよね。

なのでカスタマイズし、先ほどのウィジェット用メニューボックスのタイトルデザインに合わせました。

[codebox title="CSS"]

/*ハンバーガー内ウィジェットタイトル*/
#drawer h4.widgettitle{
  padding-top:0.8em;
  padding-bottom:0.8em;
  letter-spacing:0.2em;
  font-size:100%;
  font-family:Quicksand;
  background-color:#dadada;/*お好きな色*/
  text-align:center;

}

[/codebox]

 

おわりに

SANGOのカスタマイズ記事はたくさんありますが、スマホ版のカスタマイズは検索してもよく分からないことが多かったので、このような記事にしてみました。

正直なところハンバーガーの中身とかは自己満足ですね。

 

ただ、私の場合はブログを好きなデザインにカスタマイズすることで記事を書くモチベーションになるのでちょこちょこカスタマイズをしています。

[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]他にも色々やっているので少しづつまとめていきたいです。[/say]

このような記事もあります

[kanren id="10378,11079,7339"]