stinger5トップページに独自案内用ボックスを追加して集客

新型コロナウイルス北海道の感染場所最新情報!

 

新型コロナ北海道内の感染者数動向の最新情報!

新型コロナの5類移行に伴い、指定した医療機関からの「定点把握」による全国の感染状況を初めて発表。そこで北海道内（特に釧路・札幌）で感染された動向の最新の状況を配信しています。

www.net.y-taka.biz

 

 

stinger5トップページに独自案内用ボックスを追加して集客

stinger５のトップページに独自案内用（お知らせ）ボックスを作成して、ブログを更新しても常に読んで貰いたいお知らせ等を、案内用のページに書き込んで置けば、読者様からのクリック率もアップすると思います。

トップページに案内用ページを追加させる

どこに表示させるかというと、グローバルメニューと投稿ページの間に表示さ
せました。
カスタマイズ前の画像

カスタマイズ後の画像

固定記事のタイトルを表示させて、クリックすればその内容ページへジャンプ
する仕組みです。

カスタマイズ概要

今回のカスタマイズで修正するファイルは２つ、Stinger５の「itiran.php」と僕は専用子テーマを使用しているので子テーマの「style.css」です。

子テーマを使用していない方は、「style.css」です。

まずは「itiran.php」に追加していきます。

「itiran.php」に追加

追加前のコードは以下のようになっていると思います。
（先頭行です。）
[php]
?<div id=”topnews”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<dl class=”clearfix”>
<dt> <a href=”<?php the_permalink() ?>” >
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( ‘thumb150’ ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src=”<?php echo get_template_directory_uri(); ?>/images/no-img.png” alt=”no image” title=”no image” width=”100″ height=”100″ />
<?php endif; ?>
</a> </dt>
<dd>
<h3><a href=”<?php the_permalink(); ?>”>
<?php the_title(); ?>
</a></h3>
<div class=”blog_info”>
<p><i class=”fa fa-clock-o”></i>&nbsp;
<?php the_time(‘Y/m/d’) ?>
&nbsp;<span class=”pcone”><i class=”fa fa-tags”></i>&nbsp;
<?php the_category(‘, ‘) ?>
<?php the_tags(”, ‘, ‘); ?>
</span></p>
</div>
[/php]
上記コードの

「?<div id=”topnews”>」の前に

下記コードを追記します。
[php]
<div class=”topper”>
<h2>INFORMATION</h2>
テーマはニュースと初心者に役立つ情報をみなさんにお届けします
<blockquote>
<h3>注目のコンテンツ</h3>
<br>
<ul>
<li><a href=”リンクさせたいＵＲＬ”>タイトル</a></li>
<li><a href=”リンクさせたいＵＲＬ”>タイトル</a></li>
<li><a href=”リンクさせたいＵＲＬ”>タイトル</a></li>
</ul>
</blockquote>
</div>
</pre>
[/php]

私の場合、先頭行を追加してそこに追記しました。
追記したらコード内にある下記コードをお好みに変更します

①　「<h2>INFORMATION</h2>」の「INFORMATION」　のページタイトルをお好みに変更する。

②　その下の「テーマはニュースと初心者に役立つ情報をみなさんにお届けします」もお好みの文章に変更する。

③　「<h3>注目のコンテンツ</h3>」の「注目のコンテンツ」もお好みに変更します。

④　「<li><a href=”リンクさせたいＵＲＬ”>タイトル</a></li>」
内の”リンクさせたいＵＲＬ”にリンク先のＵＲＬを、タイトル箇所にはそのタイトルを入力します。

⑤　注目のコンテンツ内のコンテンツを増やす場合は、「<li><a href=”リンクさせたいＵＲＬ”>タイトル</a></li>」
を追加します。

定期的に読者に案内情報を変更する時は、④・⑤のところを変更します。
あなたのブログにも依りますが、コンテンツの数が多いと、記事が読まれなく
なる可能性があると思います。

なのでコンテンツは２～３個が妥当だと思います。
ファイルを更新ボタンをクリックして、表示させると、下記のようになると思
います。（僕の場合です。）

ＣＳＳにコードを追記します

子テーマを使用してる場合は、子テーマのスタイルシート(style.css)に追記しますが、

ＰＣのみの表示の場合
/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 780px) {
}

子テーマ内に上記コードが記述されていれば、その中に記述します。

無ければ新たに上記コードの「{」と「}」のあいだに下記のコードを記述します。
子テーマを使用していない場合は、
stinger５のスタイルシート(style.css)の上記コード内に下記コードを追記します。
[css]
/*—————————–
topper
——————————*/

.topper {
background: none repeat scroll 0 0 #ededed;
border-top: 6px double #ccc;
margin-bottom: 10px;
margin-top: 0;
padding: 10px 10px;
border-bottom: 6px double #ccc;
box-shadow: 0 10px 25px -10px #333;

}
.topper h2 {
background: none repeat scroll 0 0 #3556b3;
color: #FFFFFF;
font-size: 20px;
line-height: 30px;
margin: 0px 0 20px 10px;
padding: 5px 10px 5px 20px;
border-left: 20px solid #3556b3;
}

.topper p{
font-size: 14px;
margin: 0px 0 10px 10px;

}

.topper img{
width: 98%;
height: 98%;
margin: 0px 10px 10px 10px;
padding: 0px 20px 10px 0px;
}

.topper blockquote {
font-size: 14px;

background-color: #ffffff;
background-position: left top;
border-left: 10px solid #3556b3;
margin: 10px 0 10px 10px;
padding: 10px 15px 10px;
}
[/css]

あなたが表示させたいエリアのところにコードを追記してください。

尚、タブレットにも表示させたい場合は、

/*media Queries タブレットサイズ
—————————————————-*/
@media only screen and (max-width: 780px) {
}

のところに追記または新たに上記コードを作成して、その中にコードを追記します。

すべての端末に表示させたい場合は

上記で説明した指定場所以外に記述、または端末指定コードを記述しないで追記コードを記述します。
以上で完成です。

今後今以上に個性が出るようにカスタマイズしていきます。

スタイルシート(style.css)コードの修正

色々とブログをカスタマイズしていくと、不具合が発生したのでスタイルシート(style.css)に記述したコードを修正しました。
以下のコードに変更した。
[css]
/*—————————–
topper
——————————*/

.topper {
background: none repeat scroll 0 0 #ededed;
border-top: 6px double #4169E1;
border-left: 6px double #4169E1;
border-right: 6px double #4169E1;
margin-bottom: 10px;
margin-top: 0;
padding: 10px 10px;
border-bottom: 6px double #4169E1;
box-shadow: 3px 3px 1px #666;　/* ボックスにシャドウ */
-moz-box-shadow: 3px 3px 1px #666; /* Firefox */
-webkit-box-shadow: 3px 3px 1px #666; ; /* Chrome, Safari */
background-color:#fff;
-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Color=’#666666′, Direction=135, Strength=5);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=’#666666′, Direction=135, Strength=5);
display:block;
width: 88%;
}
.topper h2 {
margin: 0px 10px 20px 10px;
}

.topper h3 {
font-size: 20px;
color: #4169E1;
text-align: center;
margin: 0;
}

.topper img{
width: 98%;
height: 98%;
margin: 0px 10px 10px 10px;
padding: 0px 20px 10px 0px;
}

.topper blockquote {

font-size: 14px;
background-color: #ffffff;
background-position: left top;
border-left: 10px solid #ff7ddf;
margin: 10px 0 10px 10px;
padding: 10px 15px 10px;
}

.topper ul {
list-style:none;
}

.topper ul a {
text-decoration: none;
}
[/css]
修正したらすっきりしてちょっと目立った感じがしました。しばらくはこれで行きたいと思ってます。

参考にした記事一覧
金猿日記　様より
WordPressで固定ページの内容をトップページなどに表示させる方法

 

上記記事を参考にして貰いいました。

アリガトウございます。

まとめ

記事を紹介する事は大事な事ですが、たくさん書いていくと最初に書いた記事とか、常に読者に知らせておきたい事ってあると思います。

それらをトップページの最初の方に設置しておけば読者に常に目に入ると思います。

この中に自分のアフィリエイト広告なども入れて置くと、いいと思います。いろんな活用方法があると思います。

是非使ってみてください。