はじめに
今回は、当ブログ表示画面の細かいカスタマイズを行ったのでそのやり方をご紹介していきます。
同じくWordpressでテーマがstinger3を使っている方の参考になればと思います。
ブログタイトルのCSSの編集
常にブログ最上部に表示されている「ブログタイトル」のCSSを少し変更しました。
まずは管理画面から以下の箇所まで移動しましょう。
ダッシュボード→外観→テーマ編集→スタイルシート(style.css)
上記の箇所より「/*ブログタイトル*/」の部分の内容を変更します。
CSSの編集
・変更前
#container #header #header-in #h-l .sitename {
font-size: 30px;
color: #fff;
margin-bottom: 10px;
line-height: 30px;
}
#container #header #header-in #h-l .sitename a {
text-decoration: none;
font-weight: bold;
}
・変更後
#container #header #header-in #h-l .sitename {
font-size: 30px;
color: #fff;
margin-bottom: 10px;
line-height: 30px;
letter-spacing: 2px;
text-shadow: 2px 2px 2px rgba(51,51,51,0.6);
}
#container #header #header-in #h-l .sitename a {
text-decoration: none;
font-weight: bold;
color: #FFFDE6;
}
#container #header #header-in #h-l .sitename a:hover {
color: #FFDE00;
text-decoration: none;
font-weight: bold;
}
表示のされ方
・変更前
・変更後
変更箇所
とてもシンプルなカスタムですが、追加したのは以下のCSSです。
/*行間を２px空けて表示させる*/
letter-spacing: 2px;
/*文字に影を付ける（2pxで透過率が６０％）*/
text-shadow: 2px 2px 2px rgba(51,51,51,0.6);
/*文字色を変更させる*/
color: #FFFDE6;
/*リンクをマウスオーバー(a:hover)したときのCSSを追記*/
#container #header #header-in #h-l .sitename a:hover {
/*マウスオーバー時のスタイルを指定*/
color: #FFDE00;
text-decoration: none;
font-weight: bold;
}
記事内h2タグのcssの編集
続いて、投稿記事内のh2タグの編集をしていきます。
先ほどと同様の箇所より「/*中見出し*/ h2」の部分の内容を変更します。
CSSの編集
・変更前
h2 {
font-size: 25px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 35px;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #1a1a1a;
color: #333;
line-height: 30px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: -40px;
}
・変更後
h2 {
position: relative;
color: #fff;
background: #99cc99;
font-size: 23px;
line-height: 1;
text-shadow: 2px 2px 2px rgba(51,51,51,0.6);
margin: 40px -50px 10px -50px;
padding: 15px 5px 10px 40px;
box-shadow: 0 1px 3px #777;
}
h2:after,h2:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #336633;
}
h2:after {
left: 0;
border-right: 5px solid #336633;
}
h2:before {
right: 0;
border-left: 5px solid #336633;
}
表示のされ方
・変更前
・変更後
変更箇所
こちらのサイト様でわかりやすく説明しております。
https://weboook.blog22.fc2.com/blog-entry-348.html
記事内h4タグのcssの編集
続いて、投稿記事内のh4タグの編集をしていきます。
当ブログでは文章を囲うときに使用します。
先ほどと同様の箇所より「/*子見出し*/ .post h4」の部分の内容を変更します。
CSSの編集
・変更前
.post h4 {
font-size: 16px;
font-weight: bold;
padding: 10px;
margin-bottom: 20px;
background-color: #f3f3f3;
line-height: 28px;
}
・変更後
.post h4 {
font-size: 14px;
font-weight: normal;
padding: 5px;
margin-bottom: 20px;
background-color: #f3f3f3;
line-height: 20px;
}
表示のされ方
・変更前
・変更後
変更箇所
フォントの太字指定をなくし、サイズも小さめに書き直したくらいです。
最後に
以上がWordpressでstinger3のテーマを使用している方むけの、タグの細かい部分の変更方法でした。