simplicityの記事を読むの変更やサイドバーの見出しの見た目を変える方法

LINEで送る
Pocket

この記事の所要時間: 221

simplicityのもともとの記事を読むは左側にあったので……これ↑を変更しました。

参考にさせて頂いたのはこれらのサイト

WordPress初心者の僕がテーマ「Simplicity」を使っている理由という記事でも書きましたが、「Simplicity」は管理画面から変更できる項目が多くWordPress初心者でも簡単にブログを始めることができます。けど管理画面で
どーん(^o^)/ 当サイトはWordPressを利用して運用しており、テーマは「Simplicity」を使用…

スクリプトはこちら。

/* 続きを読むを装飾 */
.entry-read a{
color:#fff;
font-size:14px;
background-color:#706caa;
border:1px solid #706caa;
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
}

.entry-read a:hover{
color:#fff;
background-color:#dbd0e6;
border:1px solid #dbd0e6;
}

.entry-read a:before {
margin-right: 5px;
font-family: "FontAwesome";
content: "\f0a9";
}
 

さらに……

/* 続きを読むを右に */
.entry-read {
  text-align: right;
  margin-right: 10px; /* ここはお好みで */
}
 

何をしたかというと、まず続きを読むの色をサイトの色に合わせてブルー系にして、さらに矢印のイラストを入れ、右側に続きを読むを配置しました。これも子テーマのstyle.cssに書き込むだけ。簡単カンタン!

さらに、記事の間や関連記事の間に線を入れる方法とは?

トップページの記事の間と関連記事の間にそれぞれ線を入れました。

/* 記事の間に線 */
#main .entry {
border-bottom: 1px dotted #ccc;
padding-bottom: 15px;
}
/* 関連記事の間に線 */
#main .related-entry {
border-bottom: 1px dotted #ccc;
padding-bottom: 15px;
}

サイドバーの見出しの下に線を入れる方法

これまたサイドバーの見出しがのぺっとしていたので、下に線を入れました。

/* サイドバーにアンダーバー */
#sidebar h4 {
font-size: 20px;
border-bottom: 5px solid #abced8;
padding: 10px 0;
}
 
これで大分見た目も変わってきました!まだまだ変えたいところがあるので、徐々に変えていかねば!です。

水月 和香

TVディレクター, ライター, 翻訳家の卵(勉強中) at フリーランス
報道・ドキュメンタリーを手がけるTVディレクターです。最近ではウェブライターの仕事も。翻訳家(出版翻訳)を目指し勉強中。
英語洋書の多読が趣味。海外ドラマと映画も好きです。
◆◇ 次回予告 ◇◆
次回の記事はたぶん、きっと……
朝型化チャレンジ!で始めた「大人のラジオ体操」 」になる予定です。読み逃しなく♪
RSS購読はこちら →

Fatal error: Call to undefined function is_bottom_sns_btns_visible() in /home/sites/heteml/users/a/q/u/aqualuna/web/jpnet/wp-content/themes/simplicity-child/entry-body.php on line 89