酒屋ブロガーカズユキです
今回も
Simplicity（シンプリシティ）２
カスタマイズについて
引き続き書いていこうと思います。
前回までの予告編として、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通話も受け付けてます♪
お気軽にお問い合わせください♪
酒屋ブロガー
一幸（カズユキ）でした。
お気に召しましたら、ぜひ記念に
下記ボタンから応援下さると励みになります♪
最後までお付き合い、ありがとうございました！
