コピペで簡単にできるSANGOのカスタマイズ方法まとめ
▼ どこよりもわかりやすいブログの育て方
▼ シンプルライフに憧れるあなたへ

こんにちは
主婦ブロガーのあず(yuuki_azusa )です。

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

あずさん

今まではCSS?何それ?PHP?無理ゲー。と思っていました。

 

SANGOを使っている人のお役に立てればと思い、私が行ったカスタマイズを公開していきます。

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

スポンサーリンク

SANGOってどんなテーマ?

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

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

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

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

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

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

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

あとは「読まれるブログは読みたいブログだし、まずは存在を認識してもらうことが大切」でも触れましたが、他のSANGERさんとの差別化をして、個性を出すため。

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

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

追記:テーマ変更しました

現在はこのブログも含め、運用しているほぼ全てのブログのテーマを、SANGOから「Diver」に変更しています。

カスタマイズ大好きな私が、CSSやPHPをほとんどいじらなくていいほど、全てが揃っている理想のテーマに出会ってしまいました。

あずさん

CSSは追記で数行しか書いていないので、ブログネタになりませんw

「CSSって何?」というような初心者の方にこそ使ってほしいテーマです。

カスタマイズしなくても「あずさんち」のように、おしゃれで見やすいブログが作れます♡

もちろん私のようにカスタマイズ沼にハマって、抜け出せなくなっている人にもオススメです。

興味があれば、ぜひテーマ詳細を見てみてくださいね♡

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

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

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

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

ですが、この色しか使えないのがつらい。

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

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

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

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

追記
2018年2月9日現在、当ブログではこのカスタマイズを行なっていません。

カスタマイズ方法 SANGOのスマホヘッダーにミドルメニューを表示させるカスタマイズ方法

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

デフォルトのままだと味気ないので、見出しのデザインを変更しています。

あずさん

SANGOはclass指定すればいろいろ使えるんですが、毎回は面倒なので…。

 

SANGOの見出しデザインを変える場合は「SANGO・STORKの見出しデザインを変更するclass指定」を見て、CSSのclass指定を忘れずに!

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

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

内部リンクボックスのデザイン変更

ショートコードで呼び出せる内部リンクボックスのデザインを変えています。

SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ」では誰でも真似できるように、コピペ用のコードも紹介しています。

記事一覧表示を2列から1列に変更

記事一覧表示を「横長カード」に設定した場合、パソコン表示だと2列になるのを1列にするカスタマイズです。

関連記事SANGOの横長記事一覧カードをPC表示でも1列にするカスタマイズ

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

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

カスタマイズ方法 SANGOカスタマイズ|この記事を書いた人欄のSNSフォローボタンのサイズを変える

サイドバーの幅を調整

リクエストがあったので書きました。サイドバーの横幅を広くしたり、狭くしたりできます。

カスタマイズ方法 SANGOのサイドバーの横幅をコピペで変えるカスタマイズ方法

蛍光ペン(文字装飾)の種類を増やした

こんな風に文字の下に線を引く方法です。こちらもリクエストがあったので書きました。

ショートコード化する方法も書いています。

カスタマイズ方法 CSSとHTMLで文字に蛍光ペンで線を引いたようなデザインを作る

タイトルの文字数をカウントできるようにした

「ATLAS」や「Simplicity」では標準搭載されている、記事タイトルの文字数をカウントする機能をつけました。

これによって、1文字ずつ目視で数えたりする必要がなくなりました。

カスタマイズ方法 コピペでOK!記事タイトルの文字数カウンターを設置する方法

投稿一覧に記事IDを表示させた

画像のような感じで、投稿一覧画面から簡単に記事IDが確認できるようにしました。

カスタマイズ方法 WordPress|投稿一覧画面に記事IDを表示するカスタマイズ

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

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

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

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

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

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

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

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

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

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

現在はデザインを変更しています。
/*--------------------------------------
  関連記事見出しデザイン
--------------------------------------*/
.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はとても素敵なテーマなんですが、少し手を加えるだけでオリジナリティが出ますので、この記事に書いていることを活用してもらえると嬉しいです。

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

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

最後まで読んでいただき、ありがとうございましたあず(yuuki_azusa ) でした。
投資に興味がある方はコチラも ▼
スポンサーリンク