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

2015年8月27日stinger 5stinger5, トップページ, 独自案内stinger 5, トップページ, 独自案内

stinger5

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

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

  • ここで紹介するstinger5のカスタマイズは、私の備忘録です。
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いいたします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

 

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

 

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

stinger5021

 

カスタマイズ後の画像

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

 

stinger5032

 

カスタマイズ概要

今回のカスタマイズで修正するファイルは2つ、Stinger5の「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=”リンクさせたいURL”>タイトル</a></li>
<li><a href=”リンクさせたいURL”>タイトル</a></li>
<li><a href=”リンクさせたいURL”>タイトル</a></li>
</ul>
</blockquote>
</div>
</pre>
[/php]

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

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

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

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

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

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

 

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

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

CSSにコードを追記します

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

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

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

無ければ新たに上記コードの「{」と「}」のあいだに下記のコードを記述します。
子テーマを使用していない場合は、
stinger5のスタイルシート(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で固定ページの内容をトップページなどに表示させる方法

 

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

アリガトウございます。

 

まとめ

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

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

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

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