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

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

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

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

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

SANGOってどんなテーマ?

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

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

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

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

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

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

WPテーマSANGOを買った「たった一つの理由」と実際に使用したレビュー

2017.09.27

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

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

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

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

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

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

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

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

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

【SANGO】ショートコードで使える会話風ふきだしをコピペで作ろう!

2017.09.29

サンゴ

SANGOのデフォルトのふきだしはコレです。

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

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

あず
私が作ったふきだしは、こんな感じで色がついています。
旦那
何色も追加することができます。

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

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

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

コピペでSANGOのモバイルメニューをミドルメニューにする&フッターに固定するカスタマイズ

2017.10.12

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

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

【SANGOカスタマイズ】コピペで内部リンクをラベル付きのボックスデザインにしよう!

2017.09.30

先ほどから何度も出てきている、この内部リンクボックスは自作しているものです。

【SANGOカスタマイズ】コピペで内部リンクをラベル付きのボックスデザインにしよう!

デフォルトはこんな感じ。どんな色を基本にしていても合わせやすいですね!

こちらも後日、デフォルトの内部リンクボックスをカスタマイズする方法も公開予定です。

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

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

SANGOの外部参考リンクデザインをCSSで変える。コピペOKなコード13例

2017.09.27

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

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

参考

あずさんちトップページ

↑ あずさんちでは、こんな感じに変更しています。

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

コピペでOK★h2・h3・h4タグの見出しデザインをCSSで変えよう

2017.08.07

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

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

参考

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

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

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

こちらはカスタマイズ記事準備中です。お待ちください。

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

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

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

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

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

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

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

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

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

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

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

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

参考

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

この記事を書いた人欄のカスタマイズ

【SANGO】この記事を書いた人欄のSNSフォローボタンのサイズをカスタマイズする

2017.10.03

SNSフォローボタンが、スマホから見たときに中途半端に2段になってしまうのが気になって、小さくしました。

色の変更方法などは、また後日記事にしたいと思います。

引用デザインの変更

何者かになろうとしなければ、何者にもなれない。

by.私

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

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

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

リスト表示の枠を変更


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

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

  • あずさんちでは
  • リスト表示は
  • このようになります

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

インフィード広告の挿入

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

参考

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

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

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

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

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

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

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

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

Amazonでチェック

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

コメントを残す