ブログ名を「雑食こじかの知識箱」から「こじかログ」に変更しました。

【SANGOカスタマイズ全集】美しいWPテーマをさらに魅力的に!

この記事は4分くらいで読めます!

やわらかく見易いデザインに一目ぼれして導入したWordPressテーマ「SANGO」。

でも、やっぱりデフォルトのままだとスッキリしすぎていて物足りないような気もしてくるSANGO。(失礼……)

そんなSANGOユーザーさんたちに、僕が実際に行っているカスタマイズを公開します。

はるしか

SANGO以外でも使えるものもありますよ!

注意
テーマテンプレートの中身をさわることが多いので、必ず子テーマを利用してカスタマイズを行ってください。

僕は美的センスが壊滅的なので、主に内部構造をさわるようなカスタマイズを行っています。何か変更をしたら、備忘録も兼ねて随時このページに追記していきますので、SANGOユーザーの方のお役に立てれば幸いです!

デザインのカスタマイズ

ブログ全体のイメージとしてとても大切なデザイン面で変更した部分の紹介です。

サイドバーの幅を変更

こちらの記事を参考にさせていただきました!

参考 SANGOのサイドバーの横幅を広くするカスタマイズゲームのような人生(仮)

サイドバーウィジェットのコンテンツ間の隙間を狭くする

SANGOでは美しいマテリアルデザインをコンセプトにされていて、そのマテリアルデザインはコンテンツ同士の間隔は広い方がキレイに見えるといいます。

それを根底から否定するようなカスタマイズですが、僕自身デフォルトのSANGOより少し間隔が狭い方が好みでしたので……。

cssにチョイ足しで済むのでここで紹介します。

追加するスタイル

style.css
/* ウィジェットの隙間を小さくする */
.widget {
 margin-bottom: .75em;
}

適用前

適用後

SNS Count Cacheを有効化していてもブログにシェア数が表示されないようにする

何言ってるかよく分からないよ……と思うかもしれませんが、シェア数少なすぎて読者に見られたくないけど管理画面で統計だけは見たいっていう複雑なビギナー心があるんです。

SNS Count Cacheでシェア数を取得しつつブログ上に表示させない方法

……需要あるのかなぁ?

フロントページをキレイかつ機能的に!

ブログトップのページがこんな感じになりますよ!

SANGOのフロントページをシンプル&スタイリッシュにカスタマイズ

モバイル表示でミドルメニューを表示する

AFFINGERのようなミドルメニューをSANGOでも使いたい!という時に。あずさんのブログで紹介されていたカスタマイズを利用させて頂きました。

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

※現在は使用していません。

投稿ページ上部のアイキャッチをバイラル風に

SANGOの記事ページ上部にあるアイキャッチとタイトルをまとめて、STORKなどにある”バイラルメディア風”に見せています。

投稿の編集画面で通常とバイラル風を選べる仕様がうれしいですね。

参考 SANGOの記事デザインをバイラル風にするカスタマイズマサオカブログ

ぶっちゃけ、この手のカスタマイズは大好きです!

内部リンクカードに”続きを読む”を追加

すっきりシンプルだったSANGOのリンクカードがこうなります。

cssにコピペ一発でできるお手軽カスタマイズです。
こちらの記事を参考にしました。

参考 【SANGO】ブログカードに「続きを読む」を追加するカスタマイズ | 節約ブログ『節約リッチ生活』節約ブログ『節約リッチ生活』

嫁ちゃんにデフォルトのリンクカードを見せたら

よめねこ

この画像なに?

とか言われちゃってたので、効果はあると信じています!

機能のカスタマイズ

こんな機能が欲しい、を実現するために行ったカスタマイズを紹介します。

開いている記事と同じカテゴリーの人気ランキングを出力する

マサオカブログさんで紹介されていたコードを少しアレンジして、ほんの少し便利にしてみました。

表示中の記事と同一カテゴリーの人気記事をカンタンに出力する方法

上記カスタマイズをテーマテンプレート側に実装してみた

カテゴリー内の人気ランキング出力、ウィジェットで配置するのは便利だけど「PHP Code Widget」プラグインをここでしか使っていないのがもったいなくて、プラグインを外すためにランキングをテーマテンプレートに埋め込んでみました。

【SANGOカスタマイズ】カテゴリー別人気記事をテーマに実装してみた

トップページの上部に人気記事を動的に出力する

本家サルワカさんで紹介されていたカスタマイズ記事をベースに、プラグイン「WordPress Popular Posts」を利用して動的な人気記事表示をしてみました。

SANGOで記事一覧ページに人気記事を動的に表示する方法

“読了目安時間”をプラグインを使わずに表示する

よくある「この記事を読むのに○○分かかります」的なやつを表示するのにプラグインを入れるのが嫌だったので、phpで直に書いてみました。

ブログ記事の読了目安を表示しよう!プラグイン不要のカスタマイズ

今読んでいる章の見出しを画面上部にラベルとして追従させる

記事をスクロールしていくと、今現在読んでいる章の見出しが書かれたラベルが画面最上部にずーっと付いてくるアレです。

サルワカさんで目にした瞬間に欲しくなった機能で、SANGOで似たようなことができないかと思いカスタマイズしてみました。

SANGOで現在の見出しを上部に追従させるサルワカ風カスタマイズ

さいごに

「SANGO」はデフォルトでほぼ完成された美しいテーマです。

やたらとカスタマイズし過ぎると、逆にSANGOの良さを損ねてしまう危険性がありますので、本当に必要な部分で納得のできる範囲でのカスタマイズをおすすめします。

完成されたデザインの中にオリジナリティを出すSANGOカスタマイズ、是非楽しんで下さい!

コメントはありません

haru

はじめまして。SANGO愛用者です。
トップページがとても綺麗で見やすいです!
かなりこだわっているように見えるのでとても興味があります。
これも記事にして頂けたら嬉しいです。

返信する
はるしか

コメントありがとうございます。
綺麗で見やすいだなんて、これ以上ないくらい嬉しいお言葉ですね!
ちょうど記事を書いていたところでしたので、公開させて頂きました。参考にしていただければ幸いです!

返信する

コメントを残す

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