賢威8でトップページに固定ページを使わずにフリースペース(自由記入欄)を作る方法(自由コンテンツ+新着記事)

賢威のトップページを固定ページにすることなく、そのまま『最新の投稿』に自由コンテンツ記入欄(フリースペース)を作る方法を案内します。

賢威8のトップページのカスタマイズですが、賢威7でも応用が効くやり方です。

アフィリ王子アフィリ王子

■ブログのトップページにいろんな『仕掛け』を作りたい時があります。
・メルマガ応募ページへのリンク
・アフィリエイトノウハウや稼いだ実績ページへのリンク
・トピック的な話題ページへのリンク、などなどです。


ネット王女ネット王女

普通は固定ページを用意してそれをトップページにするというやり方です。そして・・・
プラグインを使って新着記事を表示させるようにする、というやり方があるようですけど・・・


それをプラグインを使わずにWPの index.php に直接エディタで『加筆修正』するやり方をご案内します。
出来あがりのイメージ画像は下図のような感じです。まさに当ブログのトップページになります。
下図の赤点線で囲った部分(3つの画像とリンクを設置)

賢威カスタマイズ・トップページに自由記入欄を作る方法

サンプル画像は3カラム形式になっていますが4カラムでも2カラムでも自由に設定できます。ただし、スマホで見ると・・・どうしても縦長に表示されるのはやむを得ないところですが。

ここでは

  • トップページに固定ページを使わない(最新の投稿ページ)
  • 自由コンテンツ欄を作る(バナー画像や自由に文章入力)
  • エディタで index.php を加筆修正するだけ

という形でトップページにリンクバナーなどを設置する方法をお伝えします。(簡単です)


秋田秀一秋田秀一

賢威のユーザーならではのカスタマイズです。
賢威ユーザーには html バージョンと WP バージョンの2のテンプレートが用意されます。
その html バージョンの style-guide からお知恵拝借ならぬコピペで持ってくるだけで簡単出来あがり、となります。

WPの index.php を直接カスタマイズする方法・場所の確認【1】

WPの管理画面から『外観』⇒『テーマエディター』から index.php を開いてください。下図のようなイメージです。
賢威8トップページカスタマイズ

19行目と20行目に自由コンテンツを入力します。
※万が一を考えて・・・バックアップは準備しておかれることをお薦めします。

入れ込む画像を準備する【2】

ここでは3カラムの形でリンク用の自由コンテンツを入れることにします。記事ページ用のサムネイル画像を3つ準備します。
私は270×169pxで用意しました。(3カラムを選択したので画像の横幅は270pxにしました)

実は・・・私は画像サイズは基本的に(例外的な作成図などを別にすれば)、1:1.6の黄金比で作成しています。

  • 賢威8のアイキャッチ画像は750×470px ≒ 1.6:1
  • 記事内の画像640×400 = 1.6:1
  • 今回の加工済み画像270×169px ≒ 1.6:1

余計なことかも知れませんが・・・画像ファイルはできるだけ縮小してサイズを小さくすることが大切です。
⇒ スマホでのユーザビリティが高まります。(ファイルサイズの大きい画像はグーグルのスピードチェックでマイナス要因となったりします)

割引券アフィリエイトをアフィリエイトして稼ぐ方法
案内版
割引券アフィリエイト

上記3つの画像が3カラムで表示してあります。
※上記画像にリンクする形で記事ページを用意すればそれだけで、自由コンテンツを作成することができます。

画像の下に改行してテキストリンクを貼ればそれで完成します。たとえばタイトル部分は太字で、記事ページ内容の説明文は通常の文字を入力すれば十分です。

ただ、せっかくなので・・・(いいのか、悪いのかわかりませんが)

htmlからコピペで3カラム形式の『ひな型』をコピーしてくる【3】

賢威8の html 版でスタイルガイド(style-guide)の index.html を開いてください。
ただし・・・賢威は絶えず進化しています。スタイルガイドの index.html のファイルもどんどん進化・改良(加筆修正)されていますので、(私が選択したものと)同じものでないかも知れません。

たとえば、下図のひな型と、その次の図のひな型ではコピーしてくる場所が同じでも html の内容が違っています。

【ケース1】
賢威8トップページのカスタマイズ

【ケース2】
賢威8トップページのカスタマイズ

※ケース1とケース2は、別々のタイミングで賢威会員ダウンロードページからテンプレートをDLしたものです。違っていますね。

よくわからないという方、私の3カラムでも構わないという方へのプレゼント

私のトップページの3カラム形式の自由コンテンツ欄の内容を次にそのまま記載しました。
そのままコピペして19行目と20行目の間にコピペするだけで3カラムの自由コンテンツ欄が完成します。(あとは、自分のブログページや用意した画像等へ変更してください)

<div class=”entry-list entry-list_style02″>
<article class=”entry-list_item”>
<div class=”entry”>
<figure class=”entry_thumb”>
<a href=”https://www.affi8.com/school-map/” target=”_blank”><img src=”https://www.affi8.com/wp-content/uploads/2019/04/19042803.gif” alt=”案内版” width=”270″ height=”169″ class=”aligncenter size-full wp-image-9734″ /></a>
</figure>
<div class=”entry_inner”>
<h2 class=”entry_title”><a href=”https://www.affi8.com/school-map/” target=”_blank”>アフィリエイト専門学校の案内板(学校内の主要記事のご案内)</a></h2><div class=”entry_description”>
まだすべての記事を整理できていません。しばらくお待ちくださいませ。
</div>
</div>
<div class=”ently_read-more”>
<a href=”https://www.affi8.com/school-map/” target=”_blank” class=”btn dir-arw_r”><span class=”icon_arrow_s_right”></span> 続きを読む</a>
</div></div>
</article>
<article class=”entry-list_item”>
<div class=”entry”>
<figure class=”entry_thumb”>
<a href=”https://www.affi8.com/coupon_temp/” target=”_blank”><img src=”https://www.affi8.com/wp-content/uploads/2019/04/19042805.gif” alt=”割引券アフィリエイトをアフィリエイトして稼ぐ方法” width=”270″ height=”169″ class=”aligncenter size-full wp-image-9733″ /></a>
</figure>
<div class=”entry_inner”>
<h2 class=”entry_title”><a href=”https://www.affi8.com/coupon_temp/” target=”_blank”>割引券アフィリエイトをアフィリエイトして稼ぐ方法</a></h2><div class=”entry_description”>
割引券アフィリエイト『そのもの』をアフィリエイトして稼ぐ方法。
</div>
</div>
<div class=”ently_read-more”>
<a href=”https://www.affi8.com/coupon_temp/” target=”_blank” class=”btn dir-arw_r”><span class=”icon_arrow_s_right”></span> 続きを読む</a>
</div>

</div>
</article>
<article class=”entry-list_item”>
<div class=”entry”>
<figure class=”entry_thumb”>
<a href=”https://www.affi8.com/blue-print/” target=”_blank”><img src=”https://www.affi8.com/wp-content/uploads/2019/04/19042802.gif” alt=”割引券アフィリエイト” width=”270″ height=”169″ class=”aligncenter size-full wp-image-9735″ /></a>
</figure>
<div class=”entry_inner”>
<h2 class=”entry_title”><a href=”https://www.affi8.com/blue-print/” target=”_blank”>割引券アフィリエイトで毎月8.5万円稼ぐ青写真</a></h2>

<div class=”entry_description”>
割引券アフィリエイトはPC・スマホ不要のアフィリエイト。身近なところで名刺サイズの割引券を配るだけ(または配布をお願いするだけ)の簡単アフィリエイト。
</div>
</div>
<div class=”ently_read-more”>
<a href=”https://www.affi8.com/blue-print/” target=”_blank” class=”btn dir-arw_r”><span class=”icon_arrow_s_right”></span> 続きを読む</a>
</div>

</div>
</article>
</div>
<h2>新着記事</h2> ※ここに見出し・h2を入れて『好きなようにタイトル』をつけてみてください。

新着記事の見出しも入れてみる【4】

上記プレゼントの『最終行』に記載したようにh2の見出しをお好きなタイトル名を入れてみてもいいかと思います。読者の方への親切です。

※カスタマイズ後は忘れずに『ファイル更新』をクリックしてください。

もし複数カラムではなくて、メルマガ登録ページへのバナーなどを用意するなら・・・【5】

好きなようにバナー画像を用意して(サイズ等はお好みでご用意ください)、お好きなように文章を入れてそのまま(1カラム形式で)加筆修正してもいいかと思います。

19行目と20行目の間に次のような一文を入れることもできます。

<p class=”al-c”><img src=”https://www.○○○.com/images/temp.jpg” width=”640″height=”400″ alt=”バナー画像”><br>
文章を入れる</p>

または・・・

<div class=”al-c”><img src=”https://www.○○○.com/images/temp.jpg” width=”640″height=”400″alt=”バナー画像”>
<p>文章を入れる</p>
</div>

といった形にすると簡単にバナー画像等を入れ込むカスタマイズ完成となります。(もちろん投稿記事ページへリンクを貼ってください)

<a href=”https://www.○○.com/” target=”_blank”>ここにリンク先</a>

まとめ

賢威8のトップページのカスタマイズでプラグインを使わずに簡単に自由コンテンツを入れる方法についてお伝えしました。どうぞお試しください。
(また、やり方がおかしい、という時にはどうぞ遠慮なくご指摘ください)

結論です。

賢威8トップページのカスタマイズで自由コンテンツ(フリースペース)+新着記事の形は、

  • index.php を加筆修正するのが簡単。
  • 固定ページを用意する必要もないし、プラグインも必要ない。
  • 画像サイズは微調整してください。(画像ファイル容量は大きくしない方がお薦めです)



ついでに賢威7のトップページのカスタマイズはこちらです。

賢威7のカスタマイズ(トップページに自由コンテンツを入れる方法)

参考までに賢威7の場合もご案内します。同じように index.php をテーマエディタから加筆修正してください。

<!–▼メインコンテンツ–>
<main>
<div class=”main-conts”> の次の行のところに・・・※ここに自由コンテンツを入れる
※次の行の直前にh2で見出し・たとえば『最新記事はこちら』とか『最新のコンテンツ』などを入れる』と親切。

<h2>最新のコンテンツ</h2>
<?php $post_type = get_query_var( ‘post_type’ );



ここまでありがとうございました。


スポンサードリンク