トップページにピックアップ3つを表示させるストークのカスタマイズ方法

こんにちは!ちづみ(@098ra0209)です。

今回はstorkを使ったトップページのカスタマイズ方法を紹介します。

コピペで行けるようになっていますので、ぜひ参考にしてみてください!

今回のカスタマイズは3つのカテゴリとか、ピックアップ記事が新着記事の上に並ぶようなカスタマイズです。記事のすぐ上の3カラムというのがミソですね(^_^)

ウィジェットのPC:トップページ上部に設定する

まず最初に外観→ウィジェットを開きます。

 

開いたら、今回使うのはPC:トップページ上部です。

ここにカスタムhtmlをグイーーーんと持っていきます!

グイーんといけない人はカスタムhtmlをクリックしてここからPC:トップページ上部をクリック。ウィジェットを追加をクリックします。

カスタムhtmlを選択し、コードを入れる

この中にコードを入れていきます。タイトルはお好みでどうぞ!私はなしにしています。

ここに以下をコピペします。

できたら完了ボタンをクリックします。

カスタムcssを設定する

次にcssをつけていきます。

外観→カスタマイズを選択します。

その中の一番下の追加cssを選択します。

ここに以下のコードをコピペします。

 

ここまで完了しましたらここから

画像のパスの作成

画像リンクの作成

の2つをしていきます。

画像をアップロードする

次に表示させたい画像をご準備ください。

この記事の場合は707×538ですが、このあたりは同じでなくても大丈夫です。

画像が準備できたらメディアから新規追加でアップロードしてください。

アップロードできたら

こちらをコピーし、

こちらの<img src=”〇〇” alt=””>の〇〇の部分を先ほどコピーしたものに置き換えましょう。管理画面を2つ開いて作業がやりやすいかもです。。

これを3つ置き換えましょう。alt=””の部分も適当な名前を付与しておきましょう。

これで画像が表示されたらここまでOKです。

 

ちなみに私の場合は画像作成はfigmaで行っています。よろしければ参考にどうぞ!簡単なものならcanvaでもできますよ!(^_^)

無料画像作成ツールなら断然figmaをオススメしたい

2019.03.19

 

画像リンクを作成する

 

次に画像をクリックした先を設定していきます。ここは各々によるかと思いますが、特定記事に飛ばしたい場合、特定カテゴリに飛ばしたい場合、その他あるかと思います。

ここでは特定のカテゴリに飛ばす方法をお伝えします。

カテゴリのリンクを調べたい場合、投稿→カテゴリを選択します。

例えばこの画像のように、サイト制作のカテゴリをリンク先にしたい場合サイト制作の下の部分から表示を選択します。

ページが表示されますので、そのリンクをコピーします。

このコピーしたものを先ほどのウィジェットのPC:トップページ上部に導入していきます。

今度はこちらの<a href=”△△”>の△△の部分に今のをペーストします。

これを3つ設定します。

これで画像のパスの作成、画像リンクの作成の2つが完了しましたので

 

追記。これをスマホでも表示させたい場合

この設定はウィジェットの設定上、pcのみの表示になり、スマホでみる場合は表示が消えてしまいます。

これをスマホでも表示させたい場合は以下の通りです。3列だとちょっと見辛いので1列にしています。(なお、管理画面上でもできる範囲の結構スマートではないやりかたですσ(^_^;)ご了承ください。)

まず、PC:トップページ上部で書いたhtmlをコピーし、これをその下のSP:トップページ上部に同じようにカスタムhtmlを置き、ペーストします。

↑このような状態になると思います。

次にcssを追加していきます。

外観→カスタマイズ→追加cssを選択、一番下に以下をコピペします。

 

これでスマホ時はこのように一列に表示されるかと思います。

 

これはおこのみではありますが!

以上です!