シンプリシティ2おすすめカスタマイズ④「スマホ版と日付の調整」

酒屋ブロガーカズユキです

今回も

Simplicity(シンプリシティ)2

カスタマイズについて

引き続き書いていこうと思います。

前回までの予告編として、CSSコードを使っての

カスタマイズがメインだとお伝えしています。

「ダッシュボード」より

「外観」⇒「テーマの編集」へ進むと

スタイルシート」の画面が表示されます。

要はここに、どんどん、気に入ったコードを

コピペして貼り付けていくという作業だけなので

誰でも簡単に出来ますのでご安心を。

では早速、貼り付けていってみましょう。

シンプリシティ2おすすめカスタマイズ*スマホ表示

ではまずは、スマホ表示の変更から。

今や、スマホで何でも解決出来る時代ですし

スマホでの閲覧者も、きっとたくさんいるはず!

そんな、スマホユーザーさんにの為にも

少しでも快適に見てもらえる努力は必要です。

では、今回もバシバシ貼り付けてみましょう。

※主にコピペの話というのは、前回まで

散々お話させていただいてるので、

もしまだご覧になってない方はコチラから!

記事を読むボタンの非表示

「記事を読む」ボタンを非表示にすることで

見た目もスッキリしますので、お奨めです。

※デザインによりますのでお好みで

下記コードをスタイルシート最下部に貼り付けます。

/*「記事を読む」を表示させない*/
.entry-read a{
display:none;
}

関連記事の箇所も同じく

下記コードをスタイルシート最下部に貼り付けます。

/*関連記事の「記事を読む」を表示させない*/
.related-entry-read a{
display:none;
}

本文抜粋の非表示

「本文抜粋」の部分を非表示にすることでも

見た目をスッキリさせることになります。

※デザインによりますのでお好みで。

下記コードをスタイルシート最下部に貼り付けます。

/*本文抜粋を非表示*/
.entry-snippet{
display:none;
}

関連記事の箇所も同じく

下記コードをスタイルシート最下部に貼り付けます。

/*関連記事の本文抜粋を非表示*/
.related-entry-snippet{
display:none;
}

ヘッダー下の余白を調整

スマホ画面でも、ヘッダー下に余白があると

どこか不自然に感じたりする方もいるでしょう。

そんな方は余白を調節してみて下さい。

※デザインによりますのでお好みで。

下記コードをスタイルシート最下部に貼り付けます。

/* レスポンシブ ヘッダー画像下の空白を調整 */
@media (max-width: 680px) {
#body {margin-top: 0; }
}

空白の間を調整する際は「margin-top:」の

後ろにある数字を「◯◯px」に変えて下さい。

◯◯の数字を調整することで、空白を

広げたり、狭めたりすることができます。

・・・が、あまり狭くすると、

ヘッダー画像の下が切れてしまいますので、

±5px位で少しずつ調整するのが良いでしょう。

<補足>

「max-width: 」後の数字は、横幅のことで

上のコードだと680pxになっています。これは

横幅が680px以下だと、設定を適用します

という意味になりますが、特に問題がなければ、

いじる必要はないと思います。

自分のデザインに応じて調整してみてください。

シンプリシティ2おすすめカスタマイズ*日付の調整(固定ページ)

では次に固定ページの日付をカスタムします。

「日付を消す固定ページ」

「日付を残しておきたい固定ページ」

用途に応じて使い分けてみて下さい。

固定ページの記事ID

ワードプレスのダッシュボード画面から

「固定ページ一覧」を選び、

非表示にしたいページのタイトル

マウスカーソルをあわせます。

すると、画面左下にアドレスが表示されます。

「post=」の後についている数字が記事IDです。

この画像の場合は「post=5」ですので、

記事IDは「5」ということになります。

固定ページの日付を非表示

次のコードをスタイルシートに貼り付けます。

/*———————————
固定ページの日付を非表示にする
——————————–*/
#post-●● .post-meta,#post-●● .post-meta,#post-●● .post-meta{
display: none;
} /* ●●には記事IDを入れます */

「●●」に固定ページIDを入力。

「#post-●● .post-meta」

1記事分のまとまりですので

消したいページがこれより多い場合は

「#post-●● .post-meta」を追加し、

少ない場合は「#post-●● .post-meta」

減らすことで調整してみて下さい。

記事下「日付とカテゴリ」を小さく

記事下「日付とカテゴリ」を小さくすることで

見た目にもスッキリしますのでおすすめです。

次のコードをスタイルシートに貼り付ける事で

日付とカテゴリの文字を調節できます。

/*  日付・カテゴリの文字 */
.post-meta {
font-size: 14px;
color: #777777;
}

「font-size:」後の数字が文字のサイズです。

必要に応じてお好みのサイズにして下さい。

「color:」の後ろにあるのが、文字の色です。

色は「WEBカラー見本」を参考にして下さい。

因みに上記コードに少し付け加えると

背景の色も調節することができます。

/*  日付・カテゴリの文字、背景色 */
.post-meta {
font-size: 14px;
color: #777777;
background-color:#ffffff;
}

また次のコードを追加することで

記事下に出ている線も消すことが出来ます。

/*  カテゴリの下の線を消す */
.post-meta .category a {
color: #777777;
text-decoration: none;
}

.post-meta .category a:hover {
color: #CC0033;
}

<追記>

ポインタを載せたときの反応を変えたい時は

下記コードを加えることで

色の変化と下線の表示が出来るようになります。

.post-meta .category a:hover {
color: #FF5252;
text-decoration: underline;
}

シンプリシティ2おすすめカスタマイズ*スマホ表示と日付の調整まとめ

では今回はスマホ版の見た目の調節と

日付の調節についてのカスタマイズでした。

どれもスタイルシートの最下部に

貼り付けるだけの作業がほとんどです。

納得いくカスタマイズになるように

あれこれ試しながらでも良いと思います。

また次回の更新をお楽しみに。

では、今回はこの辺で。

ありがとうございました

お問い合わせ&メルマガ

「ブログではちょっと・・・」

という内容に関しては

僕のメルマガから発信していく予定です。

裏情報も混じるかも知れませんので

登録しておいて損はないかと思います。

(不定期ですし、やかましくはしません)

⇒ 酒屋ブロガーのメルマガを無料で読んでやる

※万が一お気に召さなければ解除して

全力でゴミ箱に投げ捨ててやって下さい!

現状、稼げてる人なんて

みんな結構どん底味わってたりしますよ♪

ネットビジネスというのは

少しの努力さえあれば、

必ず結果の出るビジネスです。

諦めさえしなければ

失敗は永遠にやってきません!

⇒ 酒屋ブロガーのメルマガを無料で読んでやる

今後とも、よろしくお願いいたします。

また、ご質問はこちらから

必要であればSkype通話も受け付けてます♪

お気軽にお問い合わせください♪

酒屋ブロガー

一幸(カズユキ)でした。

お気に召しましたら、ぜひ記念に

下記ボタンから応援下さると励みになります♪

最後までお付き合い、ありがとうございました!

シェアする

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

フォローする

トップへ戻る