サイドバーの背景を半透明化と「NEW エントリー」を区別化するためにカード型に変更するカスタマイズ方法を解説しています。
また、サイドバーの背景を白色にして半透明化する事でコンテンツを観やすくした。
サイドバーの背景を半透明化
- ここで紹介するgush2のカスタマイズは、私の備忘録です。
- gush2は素でも使える。でも個性を出すためにカスタマイズしよう
- バックアップは忘れずに！！！
以下記事はワードプレス(WP)や、テーマのgush2をカスタマイズしたやり方等を忘れないために書き留めた備忘録です
これらを参考にカスタマイズする時は、自己責任でお願いいたします。
ソースコードを変更する場合は、ＦＴＰソフトを使ってサーバーにアップ。または各サーバーのオプション（ファイルマネージャー）等（例はさくらサーバーです）でカスタマイズを行ってください。
サイドバーの背景を半透明化するのは簡単でした。
サイドバー全体の背景色を白色にして、透明にさせるコードを追記する。
外観⇒テーマ編集⇒スタイルシート(style.css)を開いて以下のコードを子テーマ
に追記した。（作成していない方は親テーマに追記）
[css]
/*———————————
サイドバーの背景を白色にして半透明化
———————————–*/
#sub {
background-color: #FFF;
background: rgba(255,255,255,0.7);/*サイドバー半透明化*/
}
[/css]
NEW エントリーをカード型に変更
デフォルトの「NEW エントリー」の表示は、記事と記事の間に余白があるだけでし
たが、各記事にボックスを作成してカード型に変更した。
デフォルト（変更前の画像）
外観⇒テーマ編集⇒スタイルシート(style.css)を開いて以下のコードを子テーマ
に追記した。（作成していない方は親テーマに追記）
[css]
/*———————————
NEW エントリーをカード化
———————————–*/
.side_new {
margin: 0 0 15px 0;
padding: 10px;
text-align: left;
display: table;
width: 100%;
border: 1px solid #4169E1;
box-shadow: 2px 2px 1px rgba(0,0,0,0.5);/* ボックスにシャドウ */
}
.side_new:hover {
text-decoration: none;
background: #F0F8FF;/* ホバー時背景色を変更 */
}
[/css]
レイアウトが崩れてカード化ができない
なんと！！！右側がはみ出してレイアウトが崩れてしまう。
タブレットもスマホでも同様にはみ出してしまいます。
ボックスの内側の余白はどうしても必要なので、「 padding: 10px;」は変更した
くない。
そこで「width」幅の割合をスマホ・タブレットやＰＣ用にそれぞれ変更させる事
で解決させました。
今度は「NEW エントリー」タイトル下の余白が狭い
「NEW エントリー」タイトルと最初の記事の余白の間隔と1記事以降の余白の間隔
が違っていた。まあ我慢できる狭さだったけど、下記コードを追記して修正した。
[css]
/*——————————————————–
「NEW エントリー」タイトルと最初の記事間の余白の間隔修正。
———————————————————*/
.side_new:first-child {
margin-top: 15px;
}
[/css]
「width」幅変更後の最終カスタマイズコード
スタイルシート(style.css)を開いて以下のコードを子テーマに追記した。（作成していない方は親テーマに追記）
[css]
/*———————————
NEW エントリーをカード化
———————————–*/
.side_new {
margin: 0 0 15px 0;
padding: 10px;
text-align: left;
display: table;
width: 94%;
border: 1px solid #4169E1;
box-shadow: 2px 2px 1px rgba(0,0,0,0.5);/* ボックスにシャドウ */
}
.side_new:hover {
text-decoration: none;
background: #F0F8FF;/* ホバー時背景色を変更 */
}
/*—————————————————-
「NEW エントリー」タイトルと最初の記事間の余白の間隔修正。
—————————————————–*/
.side_new:first-child {
margin-top: 15px;
}
/* タブレット表示設定 */
@media screen and (min-width : 768px){
.side_new {
margin: 0 0 15px 0;
padding: 10px;
text-align: left;
display: table;
width: 97%;
border: 1px solid #4169E1;
box-shadow: 2px 2px 1px rgba(0,0,0,0.5);/* ボックスにシャドウ */
}
.side_new:hover {
text-decoration: none;
background: #F0F8FF;/* ホバー時背景色を変更 */
}
}
/* ＰＣ表示設定 */
@media screen and (min-width : 1024px) {
.side_new {
margin: 0 0 15px 0;
padding: 10px;
text-align: left;
display: table;
width: 92%;
border: 1px solid #4169E1;
box-shadow: 2px 2px 1px rgba(0,0,0,0.5);/* ボックスにシャドウ */
}
.side_new:hover {
text-decoration: none;
background: #F0F8FF;/* ホバー時背景色を変更 */
}
}
[/css]
まとめ
記事と記事の間を区別化する事によって読んでもらいたい記事をすばやく認知して
もらえる効果があります。見た目をオシャレにカスタマイズしてみた。
カスタマイズ後の画像
サイドバーの背景を半透明化は、わりと簡単にできた。
NEW エントリーをカード型に変更については、最初どうして崩れるのかわからず苦
労したが、右側がはみ出るという事は横幅になんか関係があるのではないかと思い、
「width」幅を変更したらできた。
まだまだ多分カスタマイズの余地は有ると思うが、今回はここまでとする
コメント