1.8.6 Released !

トップページ用固定ページ(1カラム)のサンプルコード

「SANGOデモページのトップページ用固定ページ(1カラム)はどのように作ることができるのか」というお問い合わせを何度か頂いたので、サンプルコードとして公開します。

トップページ用固定ページの使い方

固定ページを新規追加し、サイドバーの「固定ページ属性」から「トップページ用(タイトルなど出力なし)」を選びます。

トップページ用を選ぶ

これで1カラム用のレイアウトでページが表示されるようになります。ホーム(トップページ)に固定する方法は「固定ページをトップページに指定する方法」をご覧ください(テーマにかかわらず、WordPress共通の操作です)。

ソースコード

トップページ用固定ページのデモで使用されているコードをそのまま以下に載せます。こちらのコードを投稿編集画面の「テキスト」にコピペすれば同じレイアウトの画面を作ることができます(「ビジュアル」ではなく「テキスト」欄の方です)。
ただし、画像タグは「ここに画像」などと表示しているため、差し替えていただければと思います。

テキスト
[texton img="画像URL" title="Let’s get rolling."]

こちらは固定ページでテンプレートを「トップページ用」にした場合のページサンプルです。サイドバーもページタイトルも表示されません。言うなれば、まっさらなキャンバス。ショートコードや装飾機能を組み合わせて、自由に表現をしましょう。

[tensen]

[yoko3 responsive]
[cell]
ここに画像
3列の横並びショートコードを使えば、このように画像を横に並べることができます。
[/cell]
[cell]
ここに画像
それぞれの列に画像を貼付け、さらに文章を書き込めば、このようなデザインになります。
[/cell]
[cell]
ここに画像
もちろんリンクやボタンを貼ることもできます。
[/cell]
[/yoko3]

[yoko2 responsive]
[cell]
ここに画像
[/cell]
[cell]
<h2>初心者でも使いやすいWordPressテーマ</h2>
SANGOはデザイン、使いやすさ、内部SEO、とあらゆる面で優れたWordPressテーマです。多数のショートコードや、装飾機能により、HTMLやCSSの知識が無くとも、幅広い表現をすることができます。
[btn href="リンク先のURL" class="raised red-bc strong"]詳しく見る[/btn] 
[/cell]
[/yoko2]
<h2 class="hh hh1" style="text-align: center;">SANGOの記事一覧</h2>
ここに画像

[yoko2 responsive]
[cell]
<p class="hh hh5 pastel-bc ct">カテゴリー1</p>
[catpost catid="カテゴリーID"] 
[/cell]
[cell]
<p class="hh hh5 pastel-bc ct">カテゴリー2</p>
[catpost catid="カテゴリーID"]
[/cell]
[/yoko2]

↑こちらは「指定したカテゴリーの記事を、指定した数だけ表示させる」ショートコードを使ったものです。

ショートコードはショートコード一覧に記載のあるもののみを使っています。また、一部オリジナル見出しを使っています。

40 COMMENTS

no 2019/10/12

アップデートなどの更新や回答、いつもありがとうございます。

トップページ用1カラムでコンテンツを2列3列で表示させる
[yoko3 responsive]や[yoko2 responsive]、[yoko3]、[yoko2]を利用させていただいています。

例えば[yoko3]だと「1:1:1」ですが
これをPCで表示させるときに「2:1」のように
左と中央のコンテンツ2つの幅を1つとして使えるようにして、右側は今まで通りコンテンツ1つ幅のように分割はできないでしょうか?

なにか方法があればよろしくおねがいします。

回答を見る
レミイ華月 2019/08/24

はじめまして、お世話になります。

サイトのトップを『トップページ用固定ページのサンプル』のようにしたく
固定ページを新規追加し、サイドバーの「固定ページ属性」から「トップページ用(タイトルなど出力なし)」を選び、投稿編集画面の「テキスト」にコードをコピペしました。

通常の文章などですと背景は白のままなのですが、こちらをコピペした部分は背景が
グレーになってしまい困っております。

背景を白にする方法はありますでしょうか?

回答を見る
あん 2019/05/10

http://wanwan-box.com
の最近追加されたイラストのように小さく、横に何個か表示したいのですが可能でしょうか?(サイドバーなしで)

回答を見る
YUKA 2019/04/27

サルワカ様、SANGOを2サイトで愛用させていただいているYUKAと申します。
私のサイトでも、サルワカ様のトップページ用固定ページデモを参考にトップページを作成したのですが、「記事一覧」を表示するときに「同じサイトにある2つのカテゴリー」ではなく「2つのサイトのそれぞれ最新記事」を表示させることはできませんでしょうか。
同じサイトの最新記事は現在表示ができておりますので、別サイトの最新記事の表示方法をご教授いただければと思います。
よろしくお願いいたします。

回答を見る
こびと 2019/04/24

お世話になっております。
HTML、CSS、WPの勉強をしており、SANGOに行きつき購入させていただきました。

タイトル通りで、トップページに特定カテゴリー(今回はお知らせ)を日付とタイトルを一覧表示させたいです。
できれば、「一覧を見る」などのボタンもあれば助かります。
カード(アイキャッチ+タイトル)での一覧表示はこちらで勉強させていただき表示できたのですが、アイキャッチ画像は不要なのです。

よろしくお願いいたします。

回答を見る
Kaito 2019/04/15

はじめましてKaitoと申します。
SANGOがリリースされてから長い間お世話になっております。
CSSなど初心者で申し訳ないのですが、
固定ページのみ記事ページとは別のCSSを読み込ませるカスタマイズ方法をご教示いただけますでしょうか?
具体的にはlinktoをCSSで「続きが読む」と表示されるようにしているのですが、固定ページでも表示されてしまい、どうにかして消したい所存です。
お忙しいところ大変お手数ですが、ご教示よろしくお願い致します。

回答を見る
マサ 2018/09/27

度々の質問失礼致します。トップページ用の1カラム固定ページのコンテンツの最大幅を小さくしたい場合はどのように設定すれば良いのでしょうか?

回答を見る
マサ 2018/09/17

初めまして。wordpress自体初心者です。
カテゴリページを1カラムにしたいのですが可能ですか?
もし可能ならやり方を教えて頂きたいのですが。

回答を見る
mkt2 2018/09/16

はじめまして。1点質問させていただきます。
トップページ用固定ページ(1カラム)及び、他固定ページでも活用したいのですが、一定の範囲に背景色を横幅いっぱいまでひくことはどのように行えばいいでしょうか?
具体的には以下のHPのように
https://www.kuraseru.co.jp/
各要素(Service、News)ごとに背景色を変えて、情報が異なることを表現したく。

お手数かけてすみませんが、ご教示いただけると助かります。

回答を見る
山本 2018/09/05

質問させてください。
「固定ページをトップページに指定する方法」で設定→表示方法→フロントページの表示とありますが、フロントページの表示という項目がありません。

恐れ入りますが、ご教授お願い致します。

回答を見る
yama 2018/08/24

[texton img="画像URL" title="Let’s get rolling."]

をフロントページのテキストに挿入しました。
Let’s get rolling. の色を変える方法を教えてください。

回答を見る
mico 2018/05/31

はじめまして。
1カラムサイドバーなしで、サルワカさんが公開されているサンプルコードをそのまま投稿編集画面の「テキスト」にペーストしてみたのですが、
画面の余白がデモページより大きくなってしまい、相対的に文字や写真が小さくなってしまいます。

Version: 1.4.1 子テーマ使用です。
何か、他の設定が必要でしょうか?対処法があればお知らせいただけるでしょうか。

回答を見る
sora117 2018/05/30

はじめまして。

1カラムサイドバーなしで、ヘッダーアイキャッチ画像を表示させるようにしたかったのですが、

テンプレート トップページ用固定ページ(1カラム)の設定で、
トップページ用1カラム(タイトルなど出力なし)にし、 ヘッダーアイキャッチ画像を表示(トップページにのみ表示される巨大なアイキャッチ画像)をしましたが、
アイキャッチ画像が出ない状態になります。

トップページ用1カラム サイドバーあり(タイトルなど出力なし)の設定にかえるとアイキャッチ画像がでてくるようになります。

Version: 1.4.1 子テーマ使用です。
何か、他の設定が必要でしょうか?

回答を見る
スキナレ 2018/05/22

こんにちわ。(#^.^#)

横2列表示で指定したカテゴリーIDで記事出力ショートコード張り付けたのですが、
見出しは表示されても記事が表示されません。

コードが間違っているのですかね。

よろしくお願いいたします。

[yoko2 responsive][cell]
エンタメ[catpost catid="3" num="10"]
[/cell][cell]
スポーツ[catpost catid="9" num="10"]
[/cell][/yoko2]

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン