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

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

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

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

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

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

私が気に入っているのは

• 全記事の「ID」を一覧で見れる
• ショートコード（記事を書くときの装飾）が数え切れないほど多い
• 固定ページをホーム固定できる

というところ。

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

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

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

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

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

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

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

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

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

ナビメニューの背景色

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

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

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

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

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

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

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

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

/*スマホ＊おすすめ記事タイトル*/
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;
}

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

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

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

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;
}

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

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

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

SANGOなら、これでハンバーガーメニューに「MENU」の文字追加できます(^q^)

/*ハンバーガーメニューに文字追加*/#drawer .fa-bars:after {
content: 'MENU';
font-size: 6px;
font-weight: bold;
display: block;
} https://t.co/mBnikDIyRQ

— マクリン (@Maku_ring) August 24, 2018

このブログの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;
}

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

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

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

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

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

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

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

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

/*ウィジェット用メニューボックス内*/
.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;
}

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

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

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

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

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

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

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

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

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

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

/*ハンバーガー内ウィジェットタイトル*/
#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;
}

おわりに

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

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

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

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

SANGOでカスタマイズしたこと【目次・関連記事・記事タイトル・ボックス】

MacBook Airを持ち歩きたい！無印良品のパソコンケースは13インチ対応で良かった