初心者でもできた!「Simplicity」でカスタマイズしたこと6つ!

2

「Simplicity」を使っている理由の記事でも書きましたが、「Simplicity」は管理画面から変更できる項目が多くWordPress初心者でも簡単にブログを始めることができます。

けど管理画面で出来ることだけだと、どうしてもデフォルト感が抜けず他の方と同じようなデザインになってしまいます。

なので今回は少しでも自分らしさを出すために、子テーマも使ってカスタマイズしてみました!

僕と同じようにコード書いたりできないけど、なんとかカスタマイズしてみたいという方は参考にしてみてください!

【今回おこなったこと】

  • ブログタイトルをロゴに変更
  • 見出しタグの変更(h2、h3)
  • 背景画像の設定
  • 記事と記事の間に線を引く
  • 「記事を読む」ボタンの装飾
  • サイドバー見出しの装飾

当ブログはsimplicity1.9.3を使用していますので、simplicity2以降のバージョンだとカスタマイズがそのまま使えない場合があります。

スポンサーリンク
たもトピ・大

まずは子テーマのダウンロード

スタイルシートなどを変更してカスタマイズする際に親テーマで変更すると、テーマを更新する度に修正しなければならなくなるので、必ず子テーマをダウンロードしましょう!

子テーマをカスタマイズしておけば、親テーマが何度更新されてもカスタマイズをやり直す必要はありません。

参考 Simplicityの子テーマをインストールする方法-公式サイト-

参考 WordPressテーマ「Simplicity」のカスタマイズは子テーマでするといいらしい-おサイフプラス-

ブログタイトルをロゴに変更する

これまではヘッダー画像+タイトルだったんですが、どうもパンチがないのでロゴを作成。

今回は利用したのは「Squarespace Logo」というサイト。

めっちゃ簡単に出来ましたし、ブログのタイトルに使うサイズなら無料で作成できるのでオススメです。

んでもって今回作ったロゴがこちら↓

たもトピ-logo (1)

「simplicity」ならロゴを作れば、「外観」→「カスタマイズ」→「ヘッダー画像」で変更できます。

PCだけじゃなくスマホでも表示されますので一気にイメージ変わりますよ!!

無料版だとロゴの左下にウォーターマークが出ます。

※IEだと「Squarespace Logo」が開きませんでしたので注意!Google Chromeは問題なく開けました。

参考 Simplicityヘッダーのタイトルをロゴ画像に変更するカスタマイズ方法 -公式サイト-

参考 これはおすすめ!超簡単にイケてるロゴを作れる「Squarespace Logo」-男子ハック-

見出しタグの変更(h2、h3)

ずっと変更したかった見出しタグをついに変えました!

どちらも子テーマのスタイルシート(style.css)にコードを追記するだけで変更されます。

h2タグは 「simplicity」作成者のわいひらさんが使われている見出しを、色を変更して使わせていただきました。(初心者なのですいません・・・)

背景の色は #57B196の部分を、文字は#fffの部分を差し替えれば色が変わります。

h3はこんな感じ

こちらはデフォルトの下線の色を変更しただけです。

参考 わいひらさんが使用している見出しタグについて-公式サイト-

参考 少しの労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ -寝ログ-

背景画像の設定

スマホでは反映されませんが、PC表示では薄い灰色に変更してます。

画像があれば「simplicity」だと、「外観」→「カスタマイズ」→「背景画像」で変更可!

今回は「Subtle Patterns」というサイトで背景画像をダウンロードしました。使い方や背景画像の考え方は以下のElloraさんの記事が超絶分かりやすいです!

参考 素人でもブログをちょっとだけオシャレにできるデザインテクニック-Naifix-

 

記事と記事の間に線を引く

線

トップページの記事間をすっきりさせるために線を引きました。

dottedの部分をsolidに変更すれば直線が引けます。

線の種類はこちらの記事を参考にして変更してください!

関連記事の記事間にも線を引きたい場合は、

#main .related-entry { を記述することで関連記事でも同じく線が引けます!

参考 トップページやカテゴリの記事リストに境界線を入れたい-公式サイト-

参考 [ℜ]【Stinger3カスタマイズ】棒線を加えて記事と記事を区別化しよう!-Ryun’s Web Note-

「記事を読む」ボタンの装飾

続きを読む

「記事を読む」ボタンの変更は「TIYUNOTE」さんのブログ記事を参考に色を変更して使わせていただいています!

関連記事の「記事を読む」ボタンも同じく変更する場合は、.entry-read a の部分を、.related-entry-read a に変更して記述すれば関連記事のボタンも装飾できます。

「記事を読む」や本文抜粋を表示させないためには

スマホ表示はよりすっきりと見せたかったので、「記事を読む」ボタンと本文抜粋を削除しました。

スマホ表示の時だけに変更を反映させたい場合は子テーマのmobile.cssに記述すればOKです!

「記事を読む」を表示させないコードがこちら。

本文抜粋はこのコードで非表示になります。

関連記事も非表示にする場合はこれまで通り、entry-readを、related-entry-read に変更して同じこのコードを記述すればいいです。

参考 トップページのサムネイルカード表示について-公式サイト-

「記事を読む」ボタンを右側に移動(PC)

記事を読むを右に

ずっと「記事を読む」ボタンが左側にあるのに違和感を感じていたのですが、右側に移動させる方法が分からずそのままでした。

しかし!

ブログ仲間のオクタニさん(okutani_t)に相談したところ、右側に移動させることができましたので、コードを残しておきます。

貼りつけるのは、これまで通り子テーマのstyle.cssでOKです。

margin-rightは好きな値を指定してください。

これでブログトップページの「記事を読む」ボタンが右側に移動します。

関連記事の記事を読む

同じく、関連記事の「記事を読む」ボタンを右側に移動させたい場合は以下のコードを貼り付けます。

僕はスマホでは「記事を読む」ボタンを非表示にしてますので、スマホの「記事を読む」ボタンがどう表示されるのかを確認していません。

不具合があった場合は適時ご対応ください。

参考 オクタニさんのブログ(vdeep)

 サイドバー見出しの装飾

人気記事

サイドバーの「人気記事」「カテゴリー」などの見出し部分も簡単に装飾しました。

変更するには、#sidebar h4 { の後にコードを記述すればOKです。

僕の場合はすごく簡単に、

と、記述してアンダーラインが出るように装飾してます。

参考 サイドバーの見出しの装飾について-公式サイト-

追記:サイドバーにプロフィールを設置しました

サイドバーにプロフィールを設置する方法 【twitter・LINE@ボタン】
やらなきゃやらなきゃと思いながら3ヶ月も放置していましたが、ついにサイドバーにプロフィールを設置いたしました。今回も他のサイト様の記事を参考...

僕もそうなんですが、気になったブログでは必ずプロフィールを確認するという方が多いので、固定ページだけでなく、サイドバーにもプロフィールを設置しておくのがおすすめです。

また、twitterボタン、LINE@の友だち追加ボタンの設置方法も解説してあります。

おまけ:別のブログで使っている見出しデザイン

このブログ以外にもう1つ「simplicity」を使っているブログがあるんですが、そちらで使っている見出しデザインのCSSもご紹介しておきます!

っと言っても他の方のカスタマイズを参考にさせてもらってるのは変わらないので、本当に感謝です(;´Д`)

h2 (1)

h2は塗りつぶし以外のデザインにしたかったので、「まさろぐ」さんのカスタマイズ記事を参考にシンプルなデザインにしています。

参考 WordPressテーマ「Simplicity」をカスタマイズする16のポイント−まさろぐ−

h3 (1)

h3は「Stinger」のようにアイコンを入れたかったので、「YukiOhno.com」さんの記事を参考に設定しています。

.article h3の部分で点線の下線を引いて、.article h3:beforeの部分でアイコンフォントを指定してあります。

フォント

アイコンを変更するには「FontAwesome」の中から好きなアイコンを選んで、『f○○○』のUnicodeをコピーして、先ほどのコードの『f044』の部分と差し替えればOKです!

直前の『\』なんかを消しちゃうと表示されなくなっちゃうので、『”\f○○○”』になるようにf以下の数字だけを置き換えてくださいね!

参考 少しのレイアウト変更で雰囲気が変わる!Simplicityでカスタマイズした9のこと−YukiOhno.com−

サイドバー見出し

サイドバーの見出しはこんな感じ。

こちらは参考記事のコードをサイドバーのサイズに合わせて調整しただけです(^_^;)

The 他力本願w

参考 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)−賢威カスタマイズ研究所−

まとめ

振り返ると簡単なカスタマイズしかできていないのですが、書き換える場所やコードが分からず1つ1つ検索しなくてはならなかったのでとても時間がかかりました。

参考にさせていただいたサイト様には本当に感謝です!!

今回の僕と同じカスタマイズなら子テーマにコードを記述するだけで簡単にできますので、カスタマイズしてみたいけどもどうすれば分からないという方は参考にしてみてください!

それではまた!!

「ブログ」カテゴリーのおすすめ記事

僕がブログでアフィリエイトするときに意識しているコツとか考え方

Amazonと楽天を併用するなら「もしもアフィリエイト」がおすすめ!

また読みたいと思うブログのたった1つの特徴

僕が行っているブログのカスタマイズ

WordPress初心者のテーマ選びと初期設定、おすすめプラグインについて

プラグインでアドセンスを記事毎に非表示にして代替広告を貼る方法

WordPress記事にYouTube動画を挿入しても読み込みが遅くならない方法

スポンサーリンク
たもトピ・大
たもトピ・大

シェアしていただけると励みになります!

feedlyに登録すると更新情報を受取れます!

follow us in feedly