Swell、ブログカードの表示の仕方(公式サイト模擬)

カード編アイキャッチ
ポンデ
WordPressの無料テーマから有料テーマへの変更を考えている皆さん、「Swell」というテーマをご存知ですか?

私は初心者ながらにswellを購入し、他の物を使ったことが無いですが、既におススメです(笑)

Twitterでオススメのテーマを探すとよく「Swell」が出てきますし、気になっている方も多いと思います。

今回も引き続き、「Swell」の購入を迷っている初心者ブロガーの皆さんに向けて、WordPressの知識がほぼゼロの私が、試しに「Swell」を使ったサイトを作ってみたいと思います。

見ていただけましたか?
公式サイトかっこいいですよね!動画動いていたり、上の部分がスクロールと共に追従してきたり!

この公式サイトはSwellを使って作っていると、運営者さんも言っているのでトライしてみましょう。(下図:公式サイトより)

今回は、公式ページのブログカード(下図の赤丸)を再現します。

ブログカードの説明
\\目次から飛べるよ//

ブログカード作り

ブログカードは「canva」というサイトを使って作成しました。

canvaは基本的に商用利用可で、簡単におしゃれな画像、ロゴ、ポスターが作成できます。

今回「Blue and White Abstract Technology Blog Banner」というテンプレートを使って、下のようなブログカードを作成しました。

今度「canva」に関するブログも作りますので、詳細はそちらで説明します。

カード配置

早速、カードの4枚を並列配置していきます。

まずは、「固定ページ」の「新規追加」で固定ページを作ります。

固定ページに名前を付け(私の場合home)、次に「+ボタン」→「フルワイド」を選びます。
※こうすることで、画面いっぱいの幅に広がるブログカード群を作れます

フルワイド内の「+ボタン」→「カラム」を選び、「50/50」を選びます。(33/33/33でも可)

そうすると、二つの四角の領域が出てくるので、その間にカーソルを持っていくと、「+ボタン」が出てくるので、それを押すと、四角の領域が追加できます。

その領域を4つに増やし、「画像」からブログカードを追加していきます。

以上まですると、下図のようにブログカード群が出来上がります。

カードにリンクをつけたい場合は、「1.ブログカードにカーソル」→「2.リンク作成ボタン」→「3.URL」→「4.矢印マーク」でリンクが作成され、ブログカードから飛べるようになります。

最後に、ブログカードの大きさ、上下の空間の隙間の大小、背景色を変更します。

1.フルワイド部分を選択」→「2.点の部分クリック」→「追加設定を表示」でコンテンツの幅をサイト幅にしたり、paddingで空間幅を設計します。

完成!!!

ホーム画面への追加

先ほど作ったブログカードは、固定ページにあり、ホーム画面に反映されていないので、反映させていきます。

まずは、Wordpressの「外観」→「カスタマイズ」→「サイドバー」→「トップページにサイドバーを表示する」のチェックを外します。

こうすることでホーム画面でサイドバーを表示させないようにします。

最後に「WordPress設定」→「ホームページ設定」→「固定ページにチェック」→「ホームページにhomeを選択」でホームページにブログカードを反映できます。

まとめ

完成したのがこれです!!!!

完成形

今回も初心者の私でも簡単に作成できました。
ぜひ試してくださいね!(^^)!

(スポンサーリンク)

よかったらシェアしてね!

コメント

コメントする

\\目次から飛べるよ//
閉じる