【simplicity2カスタマイズ8手順】ワードプレス初心者でもデザインをシンプルおしゃれに

  • このエントリーをはてなブックマークに追加

スポンサーリンク

【お知らせ】

【男性の人相鑑定始めました】こんなアドバイスできます

みやゆうの最新情報は「にんぽて」TOPページをご確認下さい。

ども!美容研究家忍者みやゆうです!

ワードプレス初心者でも楽々ブログが運営できるsimplicity!本当にありがたいです♪

シンプルおしゃれにカスタマイズしたいな♪と思い変更したデザインをまとめときます。

【simplicity2カスタマイズ8手順】手順でワードプレス初心者でもデザインをシンプルおしゃれに

どこを変更したか自分でも後でわかるようにメモです。

僕のブログっぽいデザインでカスタマイズしたい方はご参考までに。

simplicity2をカスタマイズ!変更したデザイン一覧

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

simplicityを作った神様わいひらさんは小テーマはそのままでいいよ!バージョンアップしなくてもいいよ!と言ってくれていますが、親テーマを2にアップデートするのに合わせて小テーマも2にしました!

(ぶっちゃけると説明ちゃんと読まずにアップデートして、その流れで間違えて小テーマを消してしまいました。笑)

皆様は間違えないようにお気をつけください。

ということでカスタマイズした箇所をメモっときます。

SEOに強くて、使いやすいWordpress無料テーマ「Simplicity」のカスタマイズ方法を19のポイントで紹介します。

シンプルおしゃれなMASALOGの管理人まさとしさんの記事をかなり参考にさせて頂きました。ありがとうございます♪

【1】グローバルメニューのカスタマイズ

オフィシャルサイトとブログの内容が重複するので、前はブログタイトル下のメニュー自体を消していました。

今回はメニューを表示させようかなと!!

外観→カスタマイズ→スキン

・スキン選択で”オレンジメニュー(サブメニューなし)”を選択

外観→カスタマイズ→色

・グローバルナビ色を”#000000”に変更

・グローバルナビリンク色を”#ffffff”に変更

・グローバルナビリンクホバー色を”#b10000”に変更

【2】”記事を読む”と”続きを読む”を消す

一覧リストの”記事を読む”や”続きを読む”はいらないかな〜ということで消しました!

外観→カスタマイズ→テーマ内テキスト

・「記事を読む」の変更を空欄に

・「続きを読む」の変更を空欄に

【3】上へ戻るボタンのカスタマイズ

はい!忍者なんでね!手裏剣にしました♪笑

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

・トップへ戻るボタンに画像を指定で画像を変更

【4】見出しのカスタマイズ

見出し2は背景が黒で文字は白、見出し3を文字下に線、見出し4を文字前に四角のスタイルに設定しました。

管理メニュー→テーマの編集→スタイルシート(style.css)

.article h2 {
  background-color: #000000;/* 見出し背景色 */
  border-left: 0 none;
  color: #fff;/* 文字の色 */
  padding: 15px 30px;/* 文字の位置 */
    margin-bottom: 35px;/* 見出し下の空白*/
}

.article h3,
#comment-area h3,
#related-entries h3{
	font-size:23px;
	border-bottom: 3px solid #b10000;
}

.article h4 {
    border-left: 30px solid #b10000;
    border-bottom: 0px;
    padding: 5px 0 5px 10px;
    margin-bottom: 30px;
}

・スタイルシート(style.css)に上記コードをコピペ(色等は好みに合わせて変えてみてください。)

【5】記事間に線を引く

うっすら仕分けしてあった方が見やすいと思い、記事間に線を引きました。

管理メニュー→テーマの編集→スタイルシート(style.css)

/* 記事間に線を引く */
#main .entry {
 border-bottom: 1px solid #F0F0F0;
 padding-bottom: 15px;
}

・スタイルシート(style.css)に上記コードをコピペ

【6】フォントの色を少しだけ灰色に

文字フォントの色はガッツリの黒より少し灰色の方が目がチカチカしないので変更です。

管理メニュー→テーマの編集→スタイルシート(style.css)

/* フォントを灰色にする */
body{
 color:#555555 !important;
}

・スタイルシート(style.css)に上記コードをコピペ

【7】ロゴを真ん中に

ロゴを真ん中に設定しました。

今は背景が白ですが、宣材写真等撮ったら背景画像を入れようと思ってます。

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

・サイトタイトルの中央寄せをチェック

【8】メインカラムとサイドバーの囲い線を消す

記事一覧とサイドバーを囲む線を消しました。

管理メニュー→テーマの編集→スタイルシート(style.css)

/* mainとsidebarの枠線を消す */
#main,#sidebar{
 border:none !important;
}

・スタイルシート(style.css)に上記コードをコピペ

ブログデザインはおしゃれシンプルが最強!!

最初は色々やりたくなるんですが、最終的にはどんどん排除していくおしゃれシンプルスタイルが最強だなと!

ブログ内に使う色を絞って、デザインをシンプルにすればそれっぽく見えますね♪笑

カスタマイズしたらやったことを追記していきますのでご参考までに!

デザインの変更は自己責任でお願いいたします。

  • このエントリーをはてなブックマークに追加

FOLLOW

【お知らせ】

【男性の人相鑑定始めました】こんなアドバイスできます

みやゆうの最新情報は「にんぽて」TOPページをご確認下さい。


トップへ戻る