WPテーマをSANGOに変えてからやったカスタマイズまとめ

どうも、あず(@yuuki_azusa)です

WPテーマをSANGOに変えたのをきっかけに、カスタマイズにめちゃくちゃ力を入れています。

SANGOを使っている人のお役に立てればと思い、私が行ったカスタマイズを全部公開します\(^o^)/

まだカスタマイズ方法の記事が書けていないものは、随時追加していきますのでお待ちください。

SANGOってどんなテーマ?

画像出典元:WordPressテーマ「SANGO」20の魅力

SANGOは、Webメディア「サルワカ」から生まれた有料WordPressテーマです。SANGOにはたくさんの魅力があります。ブログ、アフィリエイト、企業ホームページ、様々な用途できっと活躍するはずです。

引用元:WordPressテーマ「SANGO」20の魅力

美しく、ついつい訪れたくなるデザインは、販売開始直後からブロガーを中心に大きな話題になりました。

テーマを作成したサルワカのファンだった私。もちろん購入したので、今みなさんがみているこのブログのテーマはSANGOを使っています。

SANGOを使って感じたレビューはこちらの記事に書いています。

[kanren2 postid=3074]

なぜSANGOをカスタマイズするのか?

SANGOはそのままで使っても、本当にすばらしいテーマです。カスタマイズの必要もないくらいに。

それでも私がSANGOをカスタマイズするのは…ただの趣味です(・▽・)

色を変えたり、アイコンを少し小さくしてみたり、SANGOの開発者さんが動くほどでもないようなカスタマイズは、ユーザーが個々で伝えていければと思っています。

なので、私は自分が行ったカスタマイズ方法を、他のユーザー様に伝えるために記事を書いています。

私が行ったSANGOのカスタマイズ

デフォルトのカスタマイザーから行える方法は省略します。

PHPやCSSにコードを追加する必要があったものだけ、紹介していきますね。

いろいろな色のふきだしを使えるようにした

[kanren2 postid=”3467″]

シンプル is ベスト。ですが、この色しか使えないのがつらい。

ということで、こんな感じで作ってみました。

後日、デフォルトのふきだしをカスタマイズする方法も公開予定です。

【SANGO】ショートコードで使える会話風ふきだしをコピペで作ろう!」では、基本の1色と12色のバリエーションを用意しています。

ミドルメニュー設置&フッター固定

[kanren2 postid=4993]

スマホ表示のときにアフィンガーのようなミドルメニューが表示されるようにし、そのメニューをそのままフッターに固定しています。

内部リンクボックスのデザインを変えた

[kanren2 postid=3744]

内部リンクボックスを自作し、好きな色を使えるようにしました。

デフォルトはこんな感じ。

カスタマイズするとこんな内部リンクボックスが使えるようになります。

【SANGOカスタマイズ】コピペで内部リンクをラベル付きのボックスデザインにしよう!」では、コピペで使えるように4種類×13色のボックス例を紹介しています。

外部リンクボックスのデザインを変えた

[kanren2 postid=3159]

こちらはSANGOにデフォルトで用意されているものを、CSSでデザイン変更しています。

SANGOの外部参考リンクデザインをCSSで変える。コピペOKなコード13例」では、コピペだけで使える13種類の例を挙げています。

↑ こんな感じの外部リンクボックスが使えるようになります。

見出しのデザインを変えた

[kanren2 postid=”249″]

この記事に乗せているものと今のものはデザインが違いますが、同じ方法で見出しのデザイン変更ができます。

見出しの種類は、サルワカさんが書いてくれていますのでそちらを参考にしてください。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選|サルワカ

この記事を書いた人欄の改良

スマホから見たときに、SNSアイコンが大きすぎて2行になるのが気になったので小さくしてみたり、いろいろと色を変えてみたり…。

[kanren2 postid=3166]

コメント欄をすっきりさせた

わかりますかね…この違い…(;∀;)

スマホから見たときに、コメント欄の横幅がパツパツで見栄えが悪かったので、スッキリさせました。

こちらはひとつの記事にするほどでもないので、ここにコード置いておきます。

子テーマのstyle.cssにコピペしてください。

[aside type=”normal”]CSS

/*--------------------------------------
コメント欄について
--------------------------------------*/

/* コメント欄の文字サイズ変更 */
.commentlist {
font-size: 0.9em;
}
/* 横幅すっきり */
.commentlist {
padding: 1em;
}
[/aside]

関連記事部分の見出しデザインを変更

どうしても、この見出しが好きになれなかったので変更しました!サルワカさんごめんなさい!

私と同じデザインにするのであれば、以下のコードを子テーマのstyle.cssにコピペでOKです。

[aside type=”normal”]CSS

/*--------------------------------------
関連記事見出しデザイン
--------------------------------------*/
.related-posts {
font-weight: bold;
text-align: left;
margin-bottom: 2em;
font-size: 0.8em;
}
#main .h-undeline {
padding: 1em 0.5em 1em;
margin: 1em 0 1em;
font-size: 1.1em;
color: #555555;
text-align: center;
background: -webkit-repeating-linear-gradient(-45deg, #ffe6ee, #ffe6ee 3px,#fff0f5 3px, #fff0f5 7px)!important;
background: repeating-linear-gradient(-45deg, #ffe6ee, #ffe6ee 3px,#fff0f5 3px, #fff0f5 7px)!important;
}
#main .h-undeline:after {
background-image: none;
}
[/aside]

サルワカさんの見出しデザイン、「.h1」の部分を「#main .h-undeline」にして使えば変更できます。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選|サルワカ

引用デザインの変更

後日、複数のデザイン例を挙げて記事化する予定です。

レビューボックスのカスタマイズ

こちらも後日、複数のデザイン例を挙げて記事化する予定です。

リスト表示の枠を変更

画像引用元:記事に様々なスタイルの箇条書きを挿入する

リストタグを使うと自動で挿入される、この枠を変更しました。

後日、複数のデザイン例を挙げて記事を公開予定です。

インフィード広告の挿入

SANGOでインフィード広告を挿入する方法は、マサオカ(@‪iMassa07‬)さんが詳しく解説してくれていますので、下記の参考リンクをご覧ください!

SANGOにAdsenseインフィード広告を設置する|マサオカブログ

今後もカスタマイズ記事を追加します

既成テーマを使うということは、誰かのセンスに全てを任せるということです。

SANGOはとても素敵なテーマなんですが、少し手を加えるだけでオリジナリティが出ますので、この記事に書いていることを活用してもらえると嬉しいです(・∀・)

まだ記事が書けていない分や、カスタマイズしたことを忘れていて掲載していないものは、Twitterでご連絡いただければ優先的に書かせていただきます。

あず
お気軽にご連絡ください!

私のCSSの知識は「ああしたい、こう変えたいが手にとるようにわかる CSS基礎」という本と実際に自分でカスタマイズする経験だけでできています。

自分でいろいろできるようになりたい人は、ぜひ読んでみてください。

最後まで読んでくれてありがとうございました。あず(@yuuki_azusa)でした

2 Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です