スポンサーリンク

stinger5 固定ページを1カラムにカスタマイズ

2016年9月28日stinger 51カラム, stinger5, カスタマイズ, ランディングページ, 固定ページ

stinger5

 

stinger5は投稿ページおよび固定ページとも2カラムです。今回は新た
にアフィリエイト用に、固定ページを作成して1カラムのランディング
ページを作成するカスタマイズ方法です。

 

スポンサーリンク

stinger5 固定ページを1カラムにカスタマイズ

商品をアフィリエイトするには、1.商材の選定2.適正なキーワード
の選定3.ランディングページ(1カラム)の作成という手順が必要と
なっています。

いきなり商品のランディングページ(1カラム)にリンクさせる前に、
自分のブログ等にその商品に対する売込みを記事にして、そこから商品
のランディングページ(1カラム)に誘導させるのがよりベターだと思
う。

 
そこでstinger5で固定ページによるランディングページ(1カラム)の
作成にトライしてみた。

 

まずは参考にしたサイト「ネットでファン」
様のコードを使わさせていただきます。
アリガトウございます。

 

1カラム 固定ページテンプレート (one-column.php)を作成

下記コードを「terapad」等でコピペする。

このファイルを名前を付けて保存する時、「one-column」のかぎカッコ
内の文字をファイル名にして、拡張子はphpに変更して保存する。(も
ちろん文字コードは「UTF-8N」で保存する)

 

 

保存されたファイルを「FFFTP」等でテーマの入っているフォルダーに
挿入する。

私の場合は子テーマに挿入した。

 

スタイルシートで装飾

下記コードをスタイルシートに記述。
私の場合子テーマに記述した。

 

 

スタイルが反映されない ?

スタイルシートで1カラム記事タイトルの非表示・フッターの非表示と
記事エリア調整をカスタマイズしても反映されない???
このやり方だとなぜかスタイルシートでカスタマイズしたコードが反映
されなかった。

 
ワードプレスのキャッシュ関係のプラグインを停止、およびブラウザの
履歴およびキャッシュの削除を施しても反映されなかった。

これは私だけなのか?

「functions.php」の変更または追記が必要なのか?

色々勉強してカスタマイズ3週間。ようやくたどり着いた答えがでまし
た。

 

固定ページテンプレート (one-column.php)をカスタマイズ

なので1カラム 固定ページテンプレート (one-column.php)を自分なり
にカスタマイズしてみました。
1カラム 固定ページテンプレート (one-column.php)を開きます。

 

固定ページの記事幅を広げる

 

「<main>」のコードを削除して下記コードを追記した。

 

 

サイドバーを非表示(1カラム)に下だけでは、記事の幅は変わらない
ので、ランディングページ(LP)として読者にアピール出来るように記
事幅を広げた。

max-width:1100px」のところで好みの記事幅に変更できます。

 

タイトルの装飾

 

アフィリエイト用固定ページのタイトルを強調したいので、フォントを
カスタマイズするためのコードを追記した。
「<h1 class=”entry-title”>」の下に、下記コードを追記した。

 

 

別にいいよ!!!  なら削除。

 

ブログのファビコンを変更

ファビコンをカスタマイズしている方は以下コードを変更

 

 

上記コードを下記コードに変更

 

これは私の場合です。

1カラム用の固定ページを開いた時、ファビコンが変わっていなかった
為です。

 

固定ページ用フッターをカスタマイズ

フッターを非表示にしたらページの最後が、なんか寂しい気がします。
なので敢えてフッターを挿入させた。

私の場合フッターは3分割しています。ランディングページでは記事に
集中してもらう為に、表示させたくない。でもなんか味気ない?

 
なのでフッターの3分割したエリアを削除したフッターにした。
一番下にある下記コードを削除する。

 
「<?php get_footer(); ?>」

 

削除したらそこに下記コードを追記した。

 

 

このフッター用コードは私の場合です。

「ページトップに戻る」や、「スマホ用のフッターカスタマイズ」等を
しているので、ここは親テーマの「footer.php」、または子テーマの
「footer.php」内のコードを追記します。

次にここで自分がいらないコードを削除します。

「記事タイトル」とか「キャッチフレーズ」とか「カスタマイズ項目」

 

アイキャッチ画像を文字の間が狭すぎる

 

アイキャッチ画像上下の間隔が狭すぎるので広げてみた。

 

 

上記コードを下記コードに変更

 

 

 

私の場合の1カラム 固定ページテンプレート (one-column.php)

 

stinger5で、アフィリエイト用の1カラム固定ページ(ランディング
ページ)のカスタマイズは一先ず終了です。
備忘録のため、1カラム 固定ページテンプレート (one-column.php)の
私の場合のカスタマイズ後のコードをここに残して置きます。

 

 

 

アフィリエイトによる固定ページでの記事作成手順

ワードプレスの「固定ページ」内にある「新規追加」をクリックして、
記事を作成します。
記事作成が終わったら、右側にある「ページ属性」に注目。

エ・・・?そんなの無いよ!!!

と言う方は、画面右上の方に「表示オプション」のボタンがあるのでク
リックしてください。

次に「ページ属性」の項目にチェックを入れてください。そうすれば表
示されるはずです。

 
1カラム001

 
「ページ属性」タブ内にある「テンプレート」と言う項目があります。

現状では「デフォルトテンプレート」となっていると思います。

そこをクリックして、「デフォルトテンプレート」から「1カラム」に
変更する。

 
1カラム002

 
次にアイキャッチ画像ですが、投稿ページの最初に表示させてる場合は
横幅を800px以上の画像がいいみたいですね

 
記事が出来上がったら、公開にするか非公開するか決める。
次にその固定ページで作成した記事をメニューに表示させるか、させな
いかを決める。

 
これはいろんな意見があると思います。メニュー欄に表示させておけば
いつでも閲覧できる。

 
いやそうではなくて、アフィリエイト記事内にリンクさせて希望者だけ
閲覧できる方が良い。

 
はたしてドッチがいいのか?

 
私には ワカリマセン!!!

 

まとめ

 

stinger5で固定ページをランディングページ(1カラム)を作成するカ
スタマイズには、たいへん苦労しました。

スタイルシートに記述したコードが、反映されなかった事が一番なやみ
ました。

結局原因はわかりませんでした。

尚、このカスタマイズ時のバージョンは

ワードプレス ・・・ WordPress 3.9.9

stinger5 ・・・ stinger5ver20141123

 
それ以外のバージョンでは未確認なので、もしかしたらスタイルシート
の記述したとおり反映するかも?

 
stinger5で固定ページによるランディングページ(1カラム)の完成画
像です。

 

1カラム003

 

下の画像はフッター部分です。

1カラム004

 

 

スポンサーリンク