WordPress無料テーマ「Simplicity2」カスタマイズ備忘録

思い立ったときにカスタマイズ記事をポストしている”ももうら”(@28momoura)です。
記事も書かずに夜な夜なこそこそとカスタマイズしていましたのでとりあえずここまでの備忘録です。

後からカスタマイズの記事を足していたりするのでちょっと読みにくいかも知れませんがあしからず(^^;

テーマSimplicity2」です。
このサイトは、月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』で運営中です。

チェック エックサーバーで初めてのWordPress運営ならこの本がおススメです。

レンタルサーバーの契約からドメイン取得などサイト構築が詳しく書かれています。

カスタマイズ

とはいえ、色々なサイトのカスタマイズを参考にさせて頂いたので正直オリジナリティーはあまり無いかも知れませんのであしからず(^^;

グローバルメニュー

WordPressテーマ「Simplicity2」のグローバルメニューをカスタマイズしてみた

WordPressテーマ「Simplicity2」のグローバルメニューをカスタマイズしてみた
見てね 詳しくはこの記事を参考にして下さい。

メインカラムとサイドバーの枠線を消す

xm-21

僕は消しましたが、この辺はお好みでカスタマイズしてください。

記事一覧サムネイル画像サイズ変更

「Simplicity2」記事一覧サムネイル画像をカスタマイズしてみた

サムネイル画像にエフェクト

xm-20

オンマウスで画像が薄いグレーにエフェクトします。(現在は使っていませんw)

参考 WordPressテーマ「Simplicity」をカスタマイズする19のポイント

記事を読む

xm-22

背景に色を入れて右側(デフォルト:左)に設定しました。また、Font Awesomeでアイコン(f058)を付けています

デフォルトの位置がお好みの場合は「float: right;」を削除してください。
参考 Simplicityの「記事を読む」リンクの体裁を変更しました

記事内の見出し

デフォルトでも十分ですが、見出し一つでサイトイメージが大分変わる事があります。お好みやサイトイメージを考慮して見出しデザインを変えてみて下さい。

以下は僕のサイトの見出しとなります。

見出しh2

見出しh3

見出しh4

サイドバー見出し

あれあれ見出しh4と同じだ。いえいえ「border-left: 8px」になっていますよ(^^;←変えろよ)
参考 シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

タグクラウド

タグクラウドに背景色を付けて文字先頭にアイコン「Font Awesome」を付けてみます。

xm-27

文字の大きさや背景色等はお好みで変えて下さい。
参考 STINGER7:タグクラウドのデザインをカスタマイズする方法【サイドバーウィジェット】

TOPへ戻るボタン

自作ボタンを設定しました。
「カスタマイズ」>「レイアウト(全体・リスト)」>「トップへ戻るボタンに画像を指定で編集可能です。
自作したボタンはこれです。→ xm-18

生成サイト Button Makerで作りました。って、これくらいなら自作できますねww

カテゴリー

「Simplicity2」サイドバーのカテゴリー一覧をカスタマイズしてみた

ヘッダー下カテゴリーボックス

「Simplicity2」ヘッダー下のカテゴリーボックスはインパクトあり!

まとめ

もう少し細かいカスタマイズはしていますが、大まかにこんな感じです。個々のサイトで利用される場合は適時「style.css」で調整してください。

「WordPress有料テーマ」3選!初心者が好みだけで選んでみた

追記

ちょこちょこヘッダー周りを中心にカスタマイズのマネごとをしています。機会があればまたこの記事で紹介できたらと思っています。

おわりです。

4 Comments

サイドに設置するタグクラウドのカスタマイズ!

[…] WordPress無料テーマ「Simplicity2」カスタマイズ備忘録未だ記事数”2”のもも吉(@h_momokichi)です。記事も書かずに夜な夜なこそこそとカスタマイズしていましたのでとりあえずここまでの備 […]

返信する
サイドに設置するタグクラウドのカスタマイズ!

[…] WordPress無料テーマ「Simplicity2」カスタマイズ備忘録未だ記事数”2”のもも吉(@h_momokichi)です。記事も書かずに夜な夜なこそこそとカスタマイズしていましたのでとりあえずここまでの備忘録です。後からカスタマイズの記事を足していたりするのでちょっと読みにくいかも知れませんがあしからずmomoura.com STINGER7:タグクラウドのデザインをカスタマイズする方法【サイドバーウィジェット】今回はSTINGER7のサイドバーウィジェットで表示する「タグクラウド」のカスタ … web-ashibi.net […]

返信する

コメントを残す

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

CAPTCHA