こんにちは！ちづみ(＠098ra0209)です。
今回はstorkを使ったトップページのカスタマイズ方法を紹介します。
コピペで行けるようになっていますので、ぜひ参考にしてみてください！
今回のカスタマイズは３つのカテゴリとか、ピックアップ記事が新着記事の上に並ぶようなカスタマイズです。記事のすぐ上の３カラムというのがミソですね（＾_＾）
ウィジェットのPC:トップページ上部に設定する
まず最初に外観→ウィジェットを開きます。
開いたら、今回使うのはPC：トップページ上部です。
ここにカスタムhtmlをグイーーーんと持っていきます！
グイーんといけない人はカスタムhtmlをクリックしてここからPC：トップページ上部をクリック。ウィジェットを追加をクリックします。
カスタムhtmlを選択し、コードを入れる
この中にコードを入れていきます。タイトルはお好みでどうぞ！私はなしにしています。
ここに以下をコピペします。
<div class="flex"> <div class="survise-box"> <a href="△△"><img src="〇〇" alt=""></a> <p>ここに１の説明が入ります。</p></div> <div class="survise-box"> <a href="△△"><img src="〇〇" alt=""></a> <p>ここに2の説明が入ります。</p> </div> <div class="survise-box"> <a href="△△"><img src="〇〇" alt=""></a> <p>ここに3の説明が入ります。</p> </div> </div>
できたら完了ボタンをクリックします。
カスタムcssを設定する
次にcssをつけていきます。
外観→カスタマイズを選択します。
その中の一番下の追加cssを選択します。
ここに以下のコードをコピペします。
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.survise-box{
max-width:230px;
margin:0 4px;
}
.survise-box img{
width:100%
}
.survise-box p{
font-size: 15px;
margin:0;
}
ここまで完了しましたらここから
画像のパスの作成
画像リンクの作成
の２つをしていきます。
画像をアップロードする
次に表示させたい画像をご準備ください。
この記事の場合は707×538ですが、このあたりは同じでなくても大丈夫です。
画像が準備できたらメディアから新規追加でアップロードしてください。
アップロードできたら
こちらをコピーし、
<div class="flex"> <div class="survise-box"> <a href="△△"><img src="〇〇" alt=""></a> <p>ここに１の説明が入ります。</p></div> <div class="survise-box"> <a href="△△"><img src="〇〇" alt=""></a> <p>ここに2の説明が入ります。</p> </div> <div class="survise-box"> <a href="△△"><img src="〇〇" alt=""></a> <p>ここに3の説明が入ります。</p> </div> </div>
こちらの<img src=”〇〇” alt=””>の〇〇の部分を先ほどコピーしたものに置き換えましょう。管理画面を２つ開いて作業がやりやすいかもです。。
これを３つ置き換えましょう。alt=””の部分も適当な名前を付与しておきましょう。
これで画像が表示されたらここまでOKです。
ちなみに私の場合は画像作成はfigmaで行っています。よろしければ参考にどうぞ！簡単なものならcanvaでもできますよ！（＾_＾）
画像リンクを作成する
次に画像をクリックした先を設定していきます。ここは各々によるかと思いますが、特定記事に飛ばしたい場合、特定カテゴリに飛ばしたい場合、その他あるかと思います。
ここでは特定のカテゴリに飛ばす方法をお伝えします。
カテゴリのリンクを調べたい場合、投稿→カテゴリを選択します。
例えばこの画像のように、サイト制作のカテゴリをリンク先にしたい場合サイト制作の下の部分から表示を選択します。
ページが表示されますので、そのリンクをコピーします。
このコピーしたものを先ほどのウィジェットのPC：トップページ上部に導入していきます。
<div class="flex"> <div class="survise-box"> <a href="△△"><img src="〇〇" alt=""></a> <p>ここに１の説明が入ります。</p></div> <div class="survise-box"> <a href="△△"><img src="〇〇" alt=""></a> <p>ここに2の説明が入ります。</p> </div> <div class="survise-box"> <a href="△△"><img src="〇〇" alt=""></a> <p>ここに3の説明が入ります。</p> </div> </div>
今度はこちらの<a href=”△△”>の△△の部分に今のをペーストします。
これを３つ設定します。
これで画像のパスの作成、画像リンクの作成の２つが完了しましたので
追記。これをスマホでも表示させたい場合
この設定はウィジェットの設定上、pcのみの表示になり、スマホでみる場合は表示が消えてしまいます。
これをスマホでも表示させたい場合は以下の通りです。３列だとちょっと見辛いので１列にしています。（なお、管理画面上でもできる範囲の結構スマートではないやりかたですσ(^_^;)ご了承ください。）
まず、PC：トップページ上部で書いたhtmlをコピーし、これをその下のSP:トップページ上部に同じようにカスタムhtmlを置き、ペーストします。
↑このような状態になると思います。
次にcssを追加していきます。
外観→カスタマイズ→追加cssを選択、一番下に以下をコピペします。
@media screen and (max-width: 480px) {
.flex{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.survise-box{
width:100%;
margin:0 auto;
}
}
これでスマホ時はこのように一列に表示されるかと思います。
これはおこのみではありますが！
以上です！
