ハワイのWeb制作会社で働くダンサーのブログ

世界のヘイショーによる個人ブログ。テーマはサイト制作、マーケティング、SEO、アフィリエイト、ハワイ、ポケモン、スケボー、海外就職、ダンスなど。

Stinger8のカスタマイズ。トップページにオリジナルの文章を入れる

2017/06/05

 

こんにちは。世界のヘイショーです。

本日はWebサイト制作、アフィリエイト関連のトピックで、WordPressのStinger8のカスタマイズについて。

 

Stinger 7の時はトップページのカスタマイズを簡単に行うことが出来たのですが、残念ながらStinger 8にはこの機能は無し、ということで本日はStinger 8のトップページのカスタマイズ方法を解説したいと思います。

 

実験台になるのはこちらのサイト。

 

 

今回のカスタマイズ内容は以下の通り。

  • メインカラムにアイキャッチ画像を入れる
  • アイキャッチ画像と記事一覧の間にサイトの紹介文を入れる

 

変更後はこんな感じ。

 

 

 

 

メインカラムにアイキャッチ画像を入れる

 

まずは今設定されているヘッダー画像を削除するところから始めてください。

その後に、home.phpを編集します。

 

変更前

 

<div class="st-main">と<article>の間に以下のコードを挿入します。

HTML

 

CSS

 

以上の内容を踏まえた変更後のhome.phpのコードはこんな感じになります。

変更後

 

これでメインカラムにアイキャッチ画像が入りました。

 

 

 

アイキャッチ画像の下に紹介文を入れる

 

次に、アイキャッチ画像と記事一覧の間に紹介文を入れます。

ここは簡単で、home.phpの中の<article>と<div class="st-aside">の間に文章を打ち込んでいくだけです。

<main></main>で囲っているのは、SEO対策のため。この中に文章をガンガン入れていくことで、トップページのSEO効果を高めることが出来ます。

 

完成後のコードはこんな感じ。

 

 

完成後はこんな感じ。

 

 

箇条書きの箇所をCSSでスタイリングする

このままでも問題はありませんが、「テーマは以下の通り」の下にある箇条書きの部分が少し見栄えが悪いので、改善したいと思います。

以下のCSSをコピペすればOK。

 

 

変更後はこちら。

 

 

少し見栄えが良くなりました。

 

2ページ目以降は記事一覧のみを表示させる

 

これでトップページの説明文の追加は完了ですが、このままではページャーの2ページ目、3ページ目をクリックした時に、記事一覧の上に同じように説明文が表示されてしまいます。

これを防ぐためには、<main></main>で囲まれた箇所を以下のコードで囲んであげてください。

これで2ページ目以降は記事一覧のみが表示されるようになります。

 

カスタマイズは以上になります。

上記のサイトを実際に見てみたい方はこちらからどうぞ。

 

>>> 海外就職、ワーホリ、留学の体験談ブログ

 

 

 

-SEO, Webサイト制作, ブログ
-