【WordPress、SANGO】カスタマイズ記事まとめ&デザインの参考にしているブログ

https://shikamori-p.com/wp-content/uploads/2019/01/2019-01-21.jpg
バビ

ごきげんよう、ハイパーマルチブロガーのバビです。

私は複数ブログを運営してますが、すべてWordPressとテーマSANGOと子テーマPORIPUを使用しています。

SANGOもPORIPUもこのままでも十分完成されたデザインではあるのですが、自分の好みや、自分なりに考えるユーザビリティなども考えて、色々なカスタマイズをしてきました。

すべてではないのですが、その一部を記事にしているので、このページでまとめて紹介したいと思います。

合わせてカスタマイズやデザインの参考にしたブログも紹介してます。

ブログ作成の参考にどうぞ(=゚ω゚)ノ

機能をカスタマイズ

Googleスマホ検索結果にサムネイル(アイキャッチ)画像を出す方法

Google検索したときに、下の画像のようなサムネイル(アイキャッチ)が出ているサイトと出ていないサイトがありますよね?

Googleスマホ検索結果のサムネイル画像サンプル

これを表示させるようにするカスタマイズです。

他サイトに出ていなくて、自サイトだけ出ていればそれだけ目立って有利ですし、逆に自サイトだけ出ていないとそれだけ不利になってしまいます。

未実装の方は是非導入しましょう。

※SANGOの場合はテーマ自体に実装済みです。

【WordPress】Googleスマホ検索結果にサムネイル(アイキャッチ)画像を出す方法(コピペでOK)

Pinterestの保存ボタンを画像に表示させる方法

記事内の画像の上にPinterestの保存(シェア)ボタンを表示させる方法です。

SANGO用で解説していますが、他テーマでもやり方は一緒です。

Pinterestは今後日本でも流行ると思うので、早めに導入しておいた方がいいですよ。

【WordPress SANGO】Pinterestの保存ボタンを画像に表示させる方法

ウィジェット以外の場所にアドセンス広告を設定する方法

SANGO用のカスタマイズ。

  • タイトル下(タイトルとアイキャッチの間)
  • 目次直上
  • 3番目のhタグの上

といった場所にアドセンスを設置する方法について書いています。

色々検証して、現在は使用していないものもありますが、ブログによってアドセンスの適切な配置は違うので、色々試してみたほうがいいと思います。

【SANGO】ウィジェット以外の場所にアドセンス広告を設定する方法

デザインをカスタマイズ

WordPress全般のデザインカスタマイズです。

テーマに関わらず使えるコードです。

Gutenbergのリストブロックをチェックマークにするカスタマイズ

Gutenbergのリストブロックが味気なかったので、チェックマークにしてみました。

  • こんな
  • 感じ
  • です

コピペで簡単にカスタマイズできて、好きなマークにも変えられます。

【Gutenberg】リストブロックをチェックマークにするカスタマイズ

Rinker(リンカー)をおしゃれにカスタマイズ

Amazon、楽天などの物販アフィリエイトの強い味方「Rinker」。

色合いやデザインをちょっとおしゃれな雰囲気にカスタマイズしています。

PC表示
スマホ表示

SANGO以外のテーマで検証していませんが、たぶんいけるはずです。

当ブログのカスタマイズの人気記事で、コードもよくコピーされているのですが、なかなか使っている方を見つけられません…。

Rinker(リンカー)プラグインをおしゃれにカスタマイズする方法

オシャレな丸いSNSフォローボタンを設置する

「JINみたいなSNSフォローボタンが欲しい!」

と思って作成したカスタマイズ。

↑JINのボタン
↑私のカスタマイズ

どのテーマでも実装可能です。

オシャレな丸いSNSフォローボタンを設置する【WordPressカスタマイズ】

カテゴリウィジェットの「子カテゴリ」を非表示にする方法

このブログのように、カテゴリーがごちゃごちゃしてるとき、サイドバーの子カテゴリーを見えなくするカスタマイズです。

BEFORE
AFTER

すっきり見やすくなります。

カテゴリウィジェットの「子カテゴリ」を非表示にする方法【WordPress】

デザインをカスタマイズ(SANGO)

WordPressテーマSANGOのデザインカスタマイズです。

SANGOの関連記事ショートコードをテキストリンク(文字)にするカスタマイズ

SANGOの関連記事ショートコードの↓これをテキストリンクに変えるカスタマイズです。

【SANGO】関連記事ショートコードをテキストリンク(文字)だけにするカスタマイズ

これだとリンク先の記事のタイトルを変えたとしても自動で反映されるので管理が楽です。

【SANGO】関連記事ショートコードをテキストリンク(文字)だけにするカスタマイズ

【SANGO】記事下シェアボタンをオシャレな丸に変更する

上のSNSフォローボタンと合わせて導入してほしいSANGO用カスタマイズです。

デフォルトの四角いシェアボタンをかわいい丸に変更。

色をそろえるとスタイリッシュにもなります。

オシャレな丸いSNSフォローボタンを設置する【WordPressカスタマイズ】

【SANGO】スマホフッター固定の丸いシェアボタンを設置する

SANGOのスマホフッターに丸いシェアボタンを設置するカスタマイズ。

「SHARE」と書かれたボタンを押すと、こんな感じで上にシェアボタンが表示されます。

デザインは数パターンあります。

【SANGO】スマホフッター固定の丸いシェアボタンを設置する

【SANGO】シェアボタンをかわいい吹き出しにするカスタマイズ

上のカスタマイズの応用で、吹き出し型でクリックするとびよんと伸びるシェアボタンのSANGO用カスタマイズです。

noteで100円で販売しています。

noteのほうでは実際の動きの動画もあるんので、それだけでも見てください。

なかなか笑えますw

【SANGO】スマホで上にスクロールしたらヘッダーを表示する

こちらもSANGO専用カスタマイズです。

通常時隠れていて、上にスクロールするとヘッダーが表示されます。

すでにPORIPUでヘッダーが 小さくなって固定されるものが導入されているのであまり必要性はないかもしれませんが、画面が大きく表示されるメリットがあります。

特にサイテーションを狙わないのであればこちらでもいいかもしれません。

SANGOのボックスのショートコードを増やす方法

こんな感じで表示される

[box class="box6"]ここに文章[/box]

とか、

タイトル

こんな感じで表示される

[box class="box26" title="タイトル"]ここに文章[/box]

などのボックスは簡単に追加することができます。

Gutenbergが標準になったので、もうあまり使う場面はないかもですが、便利です。

【SANGO】ボックスのショートコードを増やす方法!CSSサンプルも紹介

SANGOの箇条書き(リスト)のショートコードを増やす方法

  • 要するに
  • こういう
  • やつですね

[list class="li-check"]
〜箇条書き〜
[/list]

リストのショートコードもボックスと同じ要領で簡単に増やすことができます。

【SANGO】箇条書き(リスト)のショートコードを増やす方法!CSSサンプルも紹介

カスタマイズ、デザインの参考にしているブログ

ブログのデザインやカスタマイズを考える際に参考にしているブログをまとめてみました。

カスタマイズの参考にしているブログ

for men

WordPress特にSANGOのカスタマイズといえばこのブログ。
かなりの数のカスタマイズを使わせていただいています。

マサオカブログ

SANGO子テーマPORIPU製作者まっさーさんのブログです。
このブログに実装されたカスタマイズはほとんどPORIPUに導入されていますが、それ以外にも役立つSANGOカスタマイズ記事があります。

ぽんひろ.com

こちらのカスタマイズサイトはテーマに依存しないカスタマイズが豊富。
Cocoonのスキンも作成されていて、Cocoon、JIN、SANGOとテーマ別のカスタマイズもあります。

デザインの参考にしたブログ

デザインや配色の参考にさせていただいたブログです。

monecre

おしゃエナを作るにあたって一番参考にしたブログ。
ゴールドの色が好き。

blancoo house

個人ブログとは思えない、まるでファッション系のサイトのようなブログ。
本当はこういうブログをやりたいのです。
「DigiPress COLORS」というテーマらしいのですが、色んなレビューを見るとSEO的には弱そうです。

ははらく

配色の参考になったブログ。
アイキャッチもサイトカラーで統一されていて、ブログ全体のデザインバランスを考えるのに参考になりました。

UIPOT. tokyo

こちらも配色の参考にしたブログ。
サイト全体がメインカラーと同系色でまとめられていて、その配色が秀逸です。
やってみると分かりますが意外と難しいんです。

Migaru-Days

関連記事やメニューのデザインが好きです。
スマホメインで考えると、アイキャッチは横長より真四角に近い方がいいのでは?と思っていたらすでに採用されていて驚きました。

 

コメントを残す

メールアドレスが公開されることはありません。