2020-01-25こんにちは。マリ(@damarino_oheya)です!このブログはワードプレステーマの「SANGO」を使っています。はてなブログから移転してきて2ヶ月、SANGOの使い方にも慣れてきました。SANGOは約1万円の有料テーマですが、お高い分、かなりメリットが多いです。「SANGOカスタマイズガイド」を見れば、SANGOの使い方が全て分かるところが凄いです。マリSANGOは機能が多すぎて分かりにくいかと思いきや、カスタマイズガイドで丁寧に解説されているので変に迷うことがありません。私が気に入っているのは全記事の「ID」を一覧で見れるショートコード(記事を書くときの装飾)が数え切れないほど多い固定ページをホーム固定できるというところ。流行りの「固定ページのホーム固定」も、カスタマイズガイドを見ながら作れば簡単です。SANGOでトップページをホームページっぽくシンプルにカスタマイズしました|TOPのホーム固定ただ、機能がかなり多い分、2ヶ月たってやっと慣れてきたという感じです。このブログはスマホからのアクセスが7割と多いので、スマホからのデザインには気を使っているつもりです。この記事では、SANGOのスマホデザインでカスタマイズしたことをまとめています。up)の内部リンクデザインハンバーガーメニューの下に「MENU」文字SANGOのスマホ版|ナビドロワー(ハンバーガー)の中でカスタマイズしたことウィジェット用メニューボックス|中身のカスタマイズウィジェット用メニューボックス|タイトルをカスタマイズウィジェットのタイトルデザインおわりにSANGOのカスタマイズ方法|追加CSSからカスタマイズは「外観→カスタマイズ→追加CSS」で行っています。FTPソフトを使う方法もありますが、一度サイトを真っ白にしてしまったので、それ以来怖くて触れません。SANGOのスマホ版|TOPページでカスタマイズしたことトップページでカスタマイズしたことはこちら。up)の内部リンクデザインハンバーガーメニューの下に「MENU」文字ナビメニューの背景色SANGOのデフォルトではナビメニューの背景色は白なので、好きなカラーに変更しました。up」というおすすめ記事はウィジェットを使っています。「ウィジェット→トップページ記事一覧上」に「カスタムHTML」で作っています。カスタムHTMLの中身はこんな感じ。up記事:内部リンクで好きな記事リンクボタン:投稿ページで「〜〜一覧はこちら」のリンクボタンを作ってコピペ(中央寄せ)新着記事の見出し:タイトルと同じデザインのものを作るCSSはこちらです。背景色は「green」ですがお好きな色でどうぞ。up)の内部リンクデザイントップページの内部リンクカードを少し変えています。文字サイズホバー時に浮き上がる&カラー変更なし(白)CSSはこちらです。background:#fff;}ハンバーガーメニューの下に「MENU」文字デフォルトは3本線のみなのですが、それだと何なのかよく分からないので下に「MENU」という文字をつけています。こちらは検索していたらマクリンさん(@maku_ring)のツイートで知りました。2018このブログのCSSはこんな感じに少しアレンジしています。letter-spacing:0.1em;}SANGOのスマホ版|ナビドロワー(ハンバーガー)の中でカスタマイズしたことスマホ版のナビドロワー(ハンバーガーメニュー)の中もウィジェットで設定するのですが検索カスタムHTML:ウィジェット用メニューボックスカスタムHTML:おすすめ記事カスタムHTML:プロフィールカテゴリータグクラウドという順番で設置しています。ここでカスタマイズしたことはこちら。カスタマイズしたことウィジェット用メニューボックスの中身のデザインウィジェット用メニューボックスのタイトルデザインウィジェットのタイトルデザインウィジェット用メニューボックス|中身のカスタマイズウィジェット用メニューボックスの設置方法は「SANGOカスタマイズガイド」のこちらのページに記載されていますが、この中身を少しカスタマイズしています。font-size:0.7em;}アイコンはFontawesomeのアイコンを使っていますが、SANGOのデザインと合っていて可愛いですよね。ウィジェット用メニューボックス|タイトルをカスタマイズデフォルトではフォントはいじられていないので、フォント:Quicksand文字間:広く背景色:任意のカラーという感じでカスタマイズしました。background-color:#dadada!important;/*お好きな色*/}ウィジェットのタイトルデザインウィジェットはサイドバーでも使っているので、以前からサイドバー用ウィジェットのタイトルデザインは変えていました。ハンバーガーの中にウィジェットを持ってくると、サイドバーと同じデザインにはならないみたいなんですよね。カスタマイズし、先ほどのウィジェット用メニューボックスのタイトルデザインに合わせました。text-align:center;}おわりにSANGOのカスタマイズ記事はたくさんありますが、スマホ版のカスタマイズは検索してもよく分からないことが多かったので、このような記事にしてみました。正直なところハンバーガーの中身とかは自己満足ですね。私の場合はブログを好きなデザインにカスタマイズすることで記事を書くモチベーションになるのでちょこちょこカスタマイズをしています。マリ他にも色々やっているので少しづつまとめていきたいです。コメントをキャンセルメールアドレスが公開されることはありません。雑記Aboutマリ身軽に暮らす日々のことを書いています。育児中だからこそシンプルな暮らしで楽するヒントを綴ります。長所を知って好きな自分を知ろう!私の長所100個一覧にしてみた。