ブログのテーマをSANGOにしました!【WordPress】

こんにちは! しばみー(@shibamilog)です。

とうとうWordpressのテーマをSANGOにしてしまいましたー。かわいくてうれしい!
これまでは無料のテーマ「LION BLOG」を使っていたのですが、テーマを変えて気分一新です!

「LION BLOG」は無料なのに素晴らしいテーマだったのですが、私がCSSに関してチンプンカンプンだったため、使いこなせませんでした。。。

見出し(<h1>など)をいじったら、戻らなくなってしまったのです。

 

ええ、ええ、すべてバックアップを取らず、WordPress上でテーマをいじってしまった私の責任です。「LION BLOG」には罪はありません。

でも、もうそこで「このテーマは私には手に負えない…」と思ってしまったのです。

 

最初にある程度デザインを詰めて、そこからはどんどんテキストを量産したい(あとから修正するのは大変だから)と思っていたので、最初にいじることが自分の能力的にできなかった「LION BLOG」には別れを告げました。さよなら、ライオン。

昔のトップページ

初期型しばみみ(LION BLOG仕様)

HTML/CSSについて本当にわかりやすい説明をされている「サルワカ|サルでも分かる図解説明マガジン」のサルワカさんが作ったテーマがSANGO。
サルワカさんのデザインは本当に素敵で、いつまでも見ていたくなる、読んでいたくなるデザインなんですよー。

 

以前から見出しなどのデザインを学びたくてサルワカは読んでいたのですが、SANGOの存在を知らなかったんです。
知ったとたん、即買い。

 

¥ 10,800(2017年現在。販売数に応じて価格を上げる可能性も書かれてます)なんて安すぎる。
ファンデーション1個くらいのお値段ですよ? 買いますよー。

 

参考 SANGOカスタマイズガイドSANGOカスタマイズガイド

こちらに書かれているとおり、コツコツ変更を加えていくだけで美しくて使っていて楽しいデザインになっちゃいます。

基本的なカスタマイズは公式どおり

色の設定を変更

カスタマイズガイドの「色の設定をしよう」を見ればできます。私でも簡単にできました!

 

色のバランスはこちらのサイトを見ながら修正しました。

Material Design Color -material design palette –

色調を確認できるWebサイトのキャプチャ

「外観」→「テーマ」→「テーマの編集」のCSSにこちらを追加(事前に子テーマの設定を忘れずに!)。

#B2DFDBは私のサイトのテーマカラーにしました。それにロゴの黄色のようなからし色のような色をミックス。

 

見出しのデザインを変更

見出しはこれまで<h2><h3>で書いてきたので、こちらもCSSを変更。

<h4>以降は今まで使っていなかったので、これからは標準装備されているスタイルで変えていこうと思っています。

<h2>見出しはこんな感じ

<h3>見出しはこんな感じ

<h4>見出しはこんな感じ

CSSは

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

で見ながら、自分のテーマカラーを使いながら変更しました。CSSは以下の通り。

entry-content h2 {
padding: 0.5em;/*文字周りの余白*/
color: #010101;/*文字色*/
background: #B2DFDB;/*背景色*/
border-bottom: solid 3px #00796B;/*下線*/
}

 

.entry-content h3 {
padding: .7em 0 .6em 0;
margin: 2.8em 0 1em 0;
border-left: none;
border-bottom: solid 2px #B2DFDB;
border-top: solid 2px #B2DFDB;
color: #454545;
}

 

.entry-content h4 {
margin: 2.8em 0 .7em;
padding: 8px 0 8px 10px;
border-left: solid 2px #B2DFDB;
font-size: 1.1em;
line-height: 1.5;
color: #454545;
}

ちなみにスタイルで装備されているのはこんな感じ。

美しい見出し

美しい見出し

美しい見出し

色は都度変えていく必要がありますけど、これが最初からあるのは本当にありがたい。

アイキャッチ画像を修正

私はもともと「LION BLOG」を使っていたので、アイキャッチの画像サイズを修正する必要がありました。

こちらは同じようにテーマを変更した方のブログ(「初心者がしたSANGOのカスタマイズ記録」)から、以下のコードを貼ることで解決。

.post-thumbnail img {
width: auto;
}

パーマリンク設定を修正

SANGOに変更したところ、記事のURL(パーマリンク設定)が以前の設定に戻ってしまったので修正しました。

これはカスタマイズではないのですが、メモとして残しておきます。

 

「設定」→「パーマリンク設定」から。

WordPressの設定画面

もともと「カスタム構造」を選択していたのですが、「投稿名」にチェックが入ってました。

カスタム構造で、/%post_id%/にチェックを入れて修正(このテキスト自体は残っていた)。

「今週の人気記事」は保留→解決、実装

人気記事のウィジェットがサイドバーにありますが、これは累計なんですね。

毎週ごとの人気記事が出たらいいなあと思って探していたらこちらを見つけました。

参考 SANGOに週間人気記事のランキングをスマートに表示する方法マサオカブログ

このとおりにやってみたはずなんですが、エラーが出るのです。

エラーの出ているWEBページ

Warning: Declaration of WPPopularPostsWidget::update($new_instance) should be compatible with WP_Widget::update($new_instance, $old_instance) in /home/shibamimi/shibami.me/public_html/wp-content/plugins/wp-popular-posts/popularposts.php on line 0

なんか警告されてますけど。。。

CSSも英語もできない私にはちんぷんかんぷんです。なので保留。またいつか挑戦したい。

<追記>

しばみー

私がウッカリしてました! 解決!

プラグインを検索するときに、勘違いして別のプラグインをインストールしてしまっていたのを忘れていました。。。ウッカリすぎる。

それとケンカした状態だったみたいです。

 

ちなみに間違えたプラグインはWPPopularPosts。
名前似てませんか?以下が正しい「WordPressPopularPost」ですよ!

WordPressPopularPostのアイコン

皆さんはちゃんと最初からこちらをインストールしてくださいね。。。

カスタマイズ道は続く

SANGOのカスタマイズについてたくさんブログがあり、これから参考にさせてもらいながら読者の皆さんがうれしくなるようなデザインにしていきたいと思います。

参考 WPテーマをSANGOに変えてからやったカスタマイズまとめあずさんち

 

追記(2018/1/4)

WP Popular Postsはプラグインを削除したときもあったのですが、今はまた入れています(今読んでいるカテゴリ内の人気記事、という項目)。

 

今現在もSANGOに大満足なので、記事を書くことに集中できています。

ありがとうSANGO、早く関連記事を入れたいよSANGO(Google先生がいいよと行ってくれないと無理)。

 

2 Comments

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください