初心者でも簡単!Simplicityで見出し・線・記事を読むボタンをカスタマイズ

magazines-716801_1920-400x270-MM-100

当サイトは、シンプルで人気のテーマ「Simplicity」を使用して運営しております。

初心者にも簡単にカスタマイズが出来る、大変有り難いテーマです。

今回は、少しでも記事が見やすくなるようなカスタマイズをしてみました。

コピペするだけで簡単に出来てしまうので、コードとかさっぱりの方も是非参考にしてください♪( ´▽`)

スポンサーリンク
トップページ 広告W336×280

カスタマイズするには子テーマのダウンロードから

まず、「Simplicity」の子テーマをダウンロードしましょう。

「親テーマ」をカスタマイズしてしまうと、「Simplicity」がアップロードされた際、すべてのカスタマイズが消えてしまいます。

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

子テーマのダウンロードはこちらから♫

「Simplicity」開発者わいひら様公式ページ

「見出し」をカスタマイズして見やすくする

h2タグをカスタマイズ

使用しているとわかると思いますが、記事中でh2タグを使った箇所には「使った」とわかる大きな印(縦線)が左側についてしまいます。

それを隠したいのと、色を付けて見やすくするのが目的です。

ここではロリポップを使用してご説明しますが、ファイル名は同じなのでどこのサーバーを使用していても手順は同じです。

まず、ロリポップFTPページへログインします。

*ログインの仕方

「 ユーザー専用ページ」からログイン →「アカウント情報」→ サーバー情報の「ロリポップ!FTP」へログインすればOKです。

「wp-content」をクリックします。

スクリーンショット_2016-02-23_15_51_53

「themes」をクリックします。

スクリーンショット_2016-02-23_15_54_49

「simplicity2-child」をクリックします。

スクリーンショット_2016-02-23_15_57_54

「style.css」をクリックします。

スクリーンショット_2016-02-23_16_02_28

 以下のコードを、「/* Simplicity子テーマ用のスタイルを書く */」の下にコピペしましょう。

 .article h2 {
 background-color: #57B196;
 border-left: 0 none;
 color: #fff;
 padding: 15px 30px;
 }

貼り付けると、このような感じになります。

スクリーンショット 2016-02-23 16.02.52

背景の色を変更したかったら「#57B196」の部分を、また文字の色を変更したかったら「#fff」の部分を替えれば色が変わります♫

ちなみに「色」は、こちらを参考にしてください\(*^o^*)/

WEBセーフカラー216色

色見本 Webセーフカラー216色

そして、「保存する」をクリックし、サイトを開き直してみると!

きちんとh2タグの変更が反映されていると思います。

変更が反映されないときの対処法

たまに、きちんと変更が反映されない場合があります。

それは、ブラウザに変更前の情報が残ってしまっているときです。

それをクリアしてあげないと、変更された状態は表示されません。

この作業を「キャッシュをクリアする」と言います。

キャッシュをクリアするやり方は、使用しているブラウザによって異なります。

「ブラウザ」「キャッシュ」「クリア」などで検索すると出てきますが、詳しく載っているこちらのサイトを載せておきますので、参考にしてください。

ブラウザのキャッシュクリアの方法を教えてください。

h3タグをカスタマイズ

h3タグは、記事中で使用すると灰色の下線がつきますが、こちらも色を変えて目立つようにしたいというのが目的です。

先ほどと全く同じ手順でコードを書き込むページまで行き、先ほど貼り付けたコードの下に、こちらをコピペしましょう。

.article h3,
#comment-area h3,
#related-entries h3{
 font-size:23px;
 border-bottom:5px solid #57B196;
 padding:10px 0;
}

これでサイトを開き直してみると、h3タグの変更もきちんと表示されていると思います。

追記:h4タグもカスタマイズしました!!

h4タグだけカスタマイズしてなくて、ずっと気になっていたのですが、ようやくカスタマイズ出来ました\(*^o^*)/

このようにオシャレになりました!!

スクリーンショット 2016-03-13 23.47.13

このコードをコピペしてください♫

(色はお好みで変更してください)

.article h4 {
 border-bottom:3px solid #57B196;
 position: relative;
 color: #111;
 font-size: 1.143em;
 font-weight: bold;
 margin: 0 0 1.5em;
 padding: 0.5em 0.5em 0.5em 1.7em;
}

h4:before{
 content: "";
 position: absolute;
 background: #57B196;
 top: 0;
 left: 0.4em;
 height: 12px;
 width: 12px;
 transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}
 
h4:after{
 content: "";
 position: absolute;
 background:#57B196;
 top: 1.0em;
 left: 0;
 height: 8px;
 width: 8px;
 transform: rotate(15deg);
 -moz-transform: rotate(15deg);
 -webkit-transform: rotate(15deg);
 -o-transform: rotate(15deg);
 -ms-transform: rotate(15deg);
}

見出しをカスタマイズするだけで、記事の見た目がかなり変わりますよね(*^o^*)

どんな種類の見出しにするか、どんな色にするか考えたりするだけでもかなり楽しいです。

見出しの種類につきましてはこちらを参考にしてください♫

賢威カスタマイズ研究所

自分好みにサイトをカスタマイズしちゃいましょう\(^o^)/

記事と記事の間に線を引いて見やすくする

記事一覧

トップページに表示される「記事一覧」に線を引いて見やすくします。

先ほどのコードの下に、こちらのコードをコピペしましょう。

#main .entry {
 border-bottom: 1px dotted #333333;
 padding-bottom: 15px;
}

すると、このように記事と記事の間に線が引かれて見やすくなります♫

スクリーンショット_2016-03-14_0_48_16

線の種類は他にもあります。

変更したいときは、先ほどのコードの「dotted」の部分を線の名前(dashedなど)に変更すればOKです。

スクリーンショット 2016-02-23 17.39.31

追記:

幾つか試してみましたが「dashed」と「dotted」以外は見た目はそこまで変わらない直線になりました。

使用するテーマによって表示が異なるかも?しれないので、色々と試してみることをおすすめします。

わたしは「Simplicity」しか使用していないためここではわからず…

すみません(><)

関連記事

記事に表示される「関連記事」にも線を引いて、更に見やすくしましょう。

先ほどのコードの下に、こちらのコードをコピペします。

同じように保存してサイトを開き直して確認しましょう。

このように、きちんと線が入ってて見やすくなってればOKです(*^o^*)

スクリーンショット 2016-03-14 1.37.14

スマホも確認してみましょう♫

追記:サイドバーの装飾がやっと出来ました!!

何度もトライして出来なかったサイドバーの装飾。

やっと理由がわかりました(^o^;

わたしはずっと、いろいろなサイトを参考にしながら、

#sidebar h4 {
 font-size:20px;
 border-bottom:5px solid #57B196;
 padding:10px 0;
}

とコピぺしていましたが、わたしのサイトのサイドバーはh3だったんです!

そういうことにも気付かないほどの初心者です。笑

でもまぁ、今回勉強になったので良かったです\(^o^)/

ということで、正しいコードはこちら!

(色は好みで変更してください)

#sidebar h3 {
 font-size:20px;
 border-bottom:5px solid #57B196;
 padding:10px 0;
}

これを張り付ければ、こんな風になります♪

スクリーンショット 2016-03-15 7.31.23

こっちもおしゃれなのでオススメ!

(こちらも同じく、色は好みに合わせて変更してください)

#sidebar h3{
 position: relative;
 font-size: 1.143em
 font-weight: bold;
 margin: 0 0 1.5em;
 padding: 0.5em 0.5em 0.5em 1.5em;
 border-bottom: 2px solid #57B196;
}
 
#sidebar h3:before{
 content: "□";
 font-size: 120%;
 position: absolute;
 color: #57B196;
 top: -0.8em;
 left: 0.3em;
 height: 12px;
 width: 12px;
}
 
#sidebar h3:after{
 content: "□";
 font-size: 120%;
 position: absolute;
 color: #57B196;
 top: -0.5em;
 left: 0;
 height: 12px;
 width: 12px;
}

これを貼り付けると、こんな感じになります♪( ´▽`)

スクリーンショット 2016-03-15 7.39.27

2つの四角の色は、変えた方がもっとおしゃれですね!

そこはお好みで(*^o^*)

「記事を読むボタン」をカスタマイズして見やすくする

色を変える

先ほどのコードの下に、こちらのコードをコピペします。

.entry-read a{
 color:#fff;
 font-size:14px;
 background-color:#FF837B;
 border:1px solid #FF837B;
 border-radius:2px;
 padding:3px 10px 3px 5px;
 text-decoration:none;
 }
 
.entry-read a:hover{
 color:#fff;
 background-color:#FFC3BF;
 border:1px solid #FFC3BF;
}

同じようにしてサイトを開き直して確認すると…

スクリーンショット 2016-02-23 19.03.18

右側に移動する

「記事を読むボタン」を右側に移動すると、視覚的に開きやすくなるのでおすすめ♫

先ほどのコードの下に、こちらのコードをコピペします。

.entry-read {
 text-align: right;
 margin-right: 10px;
}

保存をするとこんな感じに♪( ´▽`)

スクリーンショット 2016-02-23 19.39.23

ちゃんと記事の右側に移動してくれました!!

(右に寄り過ぎだな〜と思ったら、数字をお好みで変更してください)

「関連記事」の「記事を読むボタン」もカスタマイズする

右側に移動させたい場合

.related-entry-read {
 text-align: right;
 margin-right: 10px; 
}

追記:モバイル表示だけカスタマイズ

モバイル表示にだけ反映させたい場合は、「mobile.css」にコピペすればOKです♫

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

コードはこちら。

.entry-read a{
 display:none;
}

関連記事の「記事を読むボタン」も非表示にしたければ、こちらのコードをご使用ください。

同時に非表示にすることが出来ます。

.entry-read, .related-entry-read {
 display: none;
}

「本文抜粋」を非表示にする

コードはこちら。

.entry-snippet{
 display:none;
}

関連記事の「本文抜粋」も非表示にしたければ、こちらのコードをご使用ください。

同時に非表示にすることが出来ます。

.entry-snippet, .related-entry-snippet{
 display:none;
}

まとめ

初心者だと、「カスタマイズ」とか「コード」とかって何だか難しそうなイメージでつい敬遠しちゃいますよね(^^;

わたしもそうでした。

でも、たもつさんのブログを参考にさせていただき、簡単にカスタマイズすることが出来ました。

本当に感謝です(;-;)

参考にさせていただいた記事はこちら。

初心者でもできた!「Simplicity」でカスタマイズしたこと6つ!

カスタマイズをしていて思ったことは、1つ出来ると嬉しくなって、2つ出来ると楽しくなって、どんどんやりたくなってしまうな〜(=´∀`)人(´∀`=)ということです。

わたしも色々と勉強して、たもトピさんや他のブロガーさんたちみたく、参考にしてもらえるように頑張りたいと思います。

とりあえず、また新たにどこかカスタマイズしたら載せま〜す♫

この記事を読んでいただき、どうもありがとうございました!!

またお会いしましょう。

初心者でも簡単!Simplicityで見出し・線・記事を読むボタンをカスタマイズ
この記事をお届けした
ポントピの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク
トップページ 広告W336×280
トップページ 広告W336×280

役に立ったらからシェア♪

気になるからフォロー♪

トップへ戻る