【simplicity】デザイン初心者の僕がやった最低限のブログカスタマイズ備忘録【コピペ用CSS】

WordPressでブログを始めてからずっとお世話になっている「simplicity」。

いろいろと良いこと尽くめなので、カスタマイズをしなくてもそれなりの見栄えってことに甘えて全然カスタマイズに力を入れてませんでした。

でも、simplicityが素晴らしい日本語&無料テーマであるがゆえ、他のブログでも被る被る。使ってるブロガーめちゃくちゃ多い。

「なんか嫌だなー」

「怖いなー」

って思いながらもほったらかしにしていたんですが、ついにこないだ丸1日使って当ブログのカスタマイズを一通りやってやりました! 時間がかかってしょうがねぇ

というわけで、その時の備忘録としてこの記事に残しておこうと思います。まあ、たまたまこの記事を目にされた方にとって参考になればいいかなー

スポンサーリンク
レクタングル(大)広告

カスタマイズ前に気を付けること!

  • 必ずバックアップをとる!
  • 子テーマで修正!
  • 一つずつ動作を確認すること!
  • 僕が使用してるのはsimplicity1です! 2だとうまくできないものがあるかもしれません。

ヘッダーに画像設定

ブログヘッダーの変更はブログカスタマイズの基本中の基本でしょう。

一番最初に目にするヘッダー部分はブログの「顔」と言っても過言じゃないはず。文字だけでも様になるのでやっておいて損はないですよ。

画像の作り方も簡単。設定方法も簡単。

当ブログの画像はWindowsに搭載されている「ペイント」です。サイズは「縦90:横450」なので参考にどうぞ。

文字じゃなく画像が良いって方は、フリーの画像でもおしゃれなものも多いのでそちらもおすすめ。

ヘッダーの設定は

「外観」→「カスタマイズ」→「ヘッダー画像」→「ロゴ画像」

画像を選択して終了。かんたん。

見出しカスタマイズ

こちらもブログカスタマイズの定番ですね。「ブログ 見出し コピペ」などでググればいっぱい紹介しているブログ様がありますので参考にどうぞ。

simplicityのデフォルト見出しはすごいシンプル。これはこれで良いんですが、もう少し見た目に華やかさが欲しいところ。

どうですか?

コードを貼ります⇩

文字の大きさをデフォルトよりも2pxずつ小さくしています。

見出し3は難しかったのでこちらのサイトを参考にしました⇩

この方のブログは見出しだけじゃなく、いろんなカスタマイズを紹介していてめちゃくちゃ参考になります。しかも、ほんとに見やすい・わかりやすい。

グローバルメニューカスタマイズ

色の変更

こちらも設定は簡単。

「設定」→「外観」→「カスタマイズ」→「色」→「グローバルナビ色」

でお好きな色にしてください。

黄色の下線をつける

このままでも良いのですが、もうちょっとだけ色を付けたい!

ということで下線に差し色の黄色を使ってみました。

コードはこちら⇩

※気にするほどではないですが、スマホ表示では少しだけ表示が崩れます。ここは要修正。このカスタマイズをする方はご注意を。

トップページのエントリーカードカスタマイズ

タイル2列に

これも簡単に設定できます。

「設定」→「外観」→「カスタマイズ」→「レイアウト(全体・リスト)」

少し下にいけば「タイル2列」があるのでチェック。

このレイアウトの良いところは、サムネイルが横長なので見切れないこと。デフォルトだとどうじても両サイドが見切れてしまって、ちょっと…って感じです。

これでサムネイルは完璧!

タイル2列時でもカテゴリー表示

タイル2列表示だとデフォルトではカテゴリーは表示されません。

どうしても表示したい!

ということで色々調べたところ、simplicityの掲示板にありました。

コードはこちら⇩

メタ情報&文字色&リンクホバー時の色変更

ヘッダー&グローバルメニューと同じ色にしてトップページ全体に統一感を出しました。

ちょっとだけくどい感じもするので、もしかしたら今後は文字色を緑に変えるかも。要検討。

コードはこちら⇩

抜粋文字を70→50

できるだけスッキリ見せたいので文字を減らしました。

「設定」→「外観」→「カスタマイズ」→「レイアウト(全体・リスト)」→「抜粋文字」

デフォルトの70から50に変更するだけ。

「続きを読む」を削除

こちらも同じ理由で削除。なくても記事を選ぶことぐらいできるでしょ。

「設定」→「外観」→「カスタマイズ」→「テーマ内テキスト」→「続きを読むの変更」

すべて削除するだけです。

サイドバーカスタマイズ

サイドバーにプロフィール画像を設置

サイドバーのこれ。

アバターを設定しました。無料でアバターが作成できるサイトはいっぱいあるのでググってください。ちなみに僕はParsonWorksの公式アプリ『Say,PeoPle!』で作成。

プラグインを使わずに、ウィジェットのテキストのみで完了。プラグインを使いすぎると重くなってアカンらしい(ホンマかどうかは不明)。

詳しくはこちらの記事で説明しています⇩

【超簡単】プラグイン無しでプロフィール欄を作った【simplicity】
この記事を書いてる段階(2016年1月)で、WordPressに引っ越してきてから約2か月経ちました...

見出しのデザイン変更

こちらもできるだけシンプルに。

コード⇩

サイドバーカテゴリーのデザイン変更

ここのカスタマイズはちょっと難しいです。自力じゃ全然無理でした。

コード⇩

※下準備としてHTMLを修正する必要があって、このコードだけだとうまくいきません。詳しくは外部サイトをご覧になったほうが正直早いです。

参考にした外部サイトのご紹介。

別テーマ「STINGER」のサイトですが基本的な考え方は一緒

その他カスタマイズ

リンク画像ホバー時に半透明

デフォルトではホバー時に変化がないので、少しだけ半透明になることで「ここは押せるんだ」って思ってもらえるようにしました。

コード⇩

参考サイト⇩

まだまだ気になるところ多し!

一応完了という事にしていますが、カスタマイズって気になりだしたらとまらない! まだまだ細かいところを直したい!

ですが、カスタマイズの沼にはまり込む前に一旦撤退です。

ちなみに、カスタマイズするときはちょっとでも「HTML」「CSS」の知識があったほうが細かいところまで自分好みにできますよ!

僕もカスタマイズする前に本を読んで勉強しました。僕が読んだのはこれ⇩

いろいろなブログでも紹介してあって購入しました。日本で一番わかりやすい入門書とのこと。実際めちゃくちゃわかりやすかったですよ!

ではでは素晴らしいブログライフを!

関連記事広告
こちらの記事も読まれてます
スポンサーリンク
レクタングル(大)広告
スポンサーリンク
レクタングル(大)広告

コメントをどうぞ

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

*