STINGER WordPress

WordPressテーマSTINGER8のちょっとだけカスタマイズ!

投稿日:

STINGER8

STINGER8はとてもシンプルなWordPressのテーマです。

とてもシンプルで良いテーマですが、見た目で気になった所をカスタマイズしてみます。

カスタマイズの知識があまりないので、できる範囲で勉強を兼ねて挑戦したいと思います。

カスタマイズにあたってはすべて子テーマを使用します。間違っても子テーマを入れなおせばやり直しができますので。

子テーマに必要なファイルを追加するには「STINGER8のカスタマイズ準備編」を参照ください。

https://side-biz.コム/affiliate/wordpress/stinger8_preparation-customization

 

必要なファイルを子テーマのなかに準備できたら

ダッシュボード → 外観 → テーマの編集

と進みます。

テーマの編集

編集するテーマを選択が「STINGER8 Child」となっていることを確認してから作業に入りたいと思います。

 

フッターの横幅を広げて背景に画像を指定する

使用するのは「style.css」です。

下記をstyle.cssを開き、一番下に追加しました。

#headbox-bg {
         background-image: url(画像のURL.jpg);
         height:120px;
}

最初に背景画像の指定がうまくいきませんでした。URLの記載がおかしいようでしたので、メディアライブラリに登録してからURLをコピペし、表示されるようになりました。

色のみの指定の場合は「background-image」を「background: #カラーコード;」で。

高さの「height:120px;」はお好みの高さに数字を調整してみました。

 

記事エリアを広げてみる

PCサイズの記事エリアの狭い感じがしたので少し広くしました。

STINGER8のスタイルシートを見てみたら、全部の横幅は1060pxでした。

使用するのは「style.css」です。とりあえず1200pxにしてみました。

#content{
max-width:1200px;
}

とても簡単にできました。

 

掲載日と執筆者の非掲載

記事に執筆者と掲載日が表示されます。これを表示しないようにしたいと思います。

記事以外でもサイドバーの最新記事にも掲載日が表示されてましたので、全て探しながら非表示にしていきます。

記載されている場所は、

記事部分(個人投稿ページ) 使用するのは「page.php」です。子テーマにファイルを入れます。

投稿日と更新日関連の部分を削除か、あどで分かるように/**/でコメントアウトします。

<div class="blogbox">
<p><span class="kdate">
<?php if ( get_the_date() != get_the_modified_date() ) : //更新がある場合 ?>
投稿日:<?php echo esc_html( get_the_date() ); ?>
更新日:<time class="updated" datetime="<?php echo esc_attr( get_the_modified_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_modified_date() ); ?></time>
<?php else: //更新がない場合 ?>
投稿日:<time class="updated" datetime="<?php echo esc_attr( get_the_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_date() ); ?></time>
<?php endif; ?>
</span></p>
</div>

執筆者は上記部分のすぐ下、下記部分を削除。

<p>執筆者:<?php the_author_posts_link(); ?></p>

 

サイドバーの新着記事一覧 使用するのは「newpost.php」です。子テーマにファイルを入れます。

<div class="blog_info">
<p><?php the_time( 'Y/m/d' ); ?></p>
</div>

 

全体を見てまだ残っているようでしたら、同じように非表示にしたいです。

 

H2タグ・H3タグの変更

STINGER8はタグのデザインがとてもシンプルです。が、シンプルすぎる。

NxWorldさんのサイトを参考にさせていただきました。洗練されたデザインのサイトです。

シンプルなHTMLとCSSコピペで実装できるタイトル

 

使用するのは「style.css」です。

H2タグで使用したのは「26.吹き出し#1」です。

/* 中見出し */
h2 {
position: relative;
padding: .5em .75em;
background-color: #708090;
color:#fff;
font-size: 20px;
border-radius: 6px;
}
h2::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #708090;
}

サイトに記載されている「h1」を「h2」に変更して「style.css」に追加しました。

文字色が黒だと目立たないので上から5行目の後に「color:#fff;」と文字が小さかったので「font-size: 19px;」を追加しました。

色もサイトの色に変更しました。

「border-radius」とはボックスの角の丸くするときに使うそうです。

 

続いてH3タグです。

同サイトの「50.マーク#2」を使いました。

上記と同じようにサイト記載のCSSの「h1」を「h3」に変更しましたが、できませんでした。

「.post」を追加しました。

/*小見出し*/
.post h3 {
position: relative;
padding: 0 .5em .5em 2em;
border-bottom: 1px solid #ccc;
}
h3::before,
h3::after {
position: absolute;
content: '';
border-radius: 100%
}
h3::before {
top: .2em;
left: .2em;
z-index: 2;
width: 18px;
height: 18px;
background: rgba(150, 150, 150, .5);
}
h3::after {
top: .7em;
left: .7em;
width: 13px;
height: 13px;
background: rgba(210, 210, 210, .5);
}

H3タグはただコピーして「.post」を追加しただけて使いました。

 

以上クイックカスタマイズでした。

スポンサーリンク





-STINGER, WordPress
-, , , ,

Copyright© 初心者の私が副業でどこまで稼げるか , 2019 All Rights Reserved Powered by STINGER.