※当サイトは、アフィリエイト広告を利用しています。
こんにちは、Webデザイナーのayumiです。
チーム「つむぐ」発足にあたりWebサイトの制作を担当しました。
こちらのサイトは、デザインを「Figma」にて行ったのち、WordPressの有料テーマ「SWELL」にて構築をしています。SWELLでの構築の際に気をつけたポイントを今回はご紹介していきます！
あなたのサイト制作の役に立てれば幸いです！
メインビジュアル
SWELL独自の「ブログパーツ」を使用
SWELLには事前に文章などのブロックを組み合わせたパーツ「ブログパーツ」を制作し、発行されたIDを好きな場所に挿入すれば簡単にさまざまな場所で使いまわせる便利な機能があります。
当サイトのメインビジュアルもブログパーツを使用しました。メインビジュアルは、テキスト込みで書き出された画像を使用することもあるかと思いますが、今回は1部分にアニメーションを使用したかったため、こちらの方法をとりました。
①左サイドメニューから「ブログパーツ」を選択し、横並びの2カラムでテキストエリアを制作。
（左側の「ひとりじゃない。〜あなたの一番の相談相手。」、右側のサービス内容「Webデザイン、Web構築、ライティング」）
②テーマカスタマイズ画面で設定。背景画像を選択、先ほど制作したブログパーツIDを該当箇所に入力。
③余白等必要であれば、追加CSSで調整。
「つむぐ」のこと
コンテンツエリア全体の背景を白色にする
一番上のタイトル（私たち「つむぐ」は〜）から、一番下のボタン（つむぐの活動状況）までを選択し、①の縦3点ボタンをクリックし「グループ化」を選択します。するとエリア全体が1グループになります。（②のマークになっていればOK！）
③にて背景色を選択すれば、コンテンツエリア全体の色が変更できます。
コンテンツエリア全体を点線で囲む
background-image :
linear-gradient(to right, #373C38, #373C38 3px, transparent 3px, transparent 8px), /* 上の線 */
linear-gradient(to bottom, #373C38, #373C38 3px, transparent 3px, transparent 8px), /* 右の線 */
linear-gradient(to left, #373C38, #373C38 3px, transparent 3px, transparent 8px), /* 下の線 */
linear-gradient(to top, #373C38, #373C38 3px, transparent 3px, transparent 8px); /* 左の線 */
background-size:
8px 2px, /* 上の線 */
2px 8px, /* 右の線 */
8px 2px, /* 下の線 */
2px 8px; /* 左の線 */
background-position:
left top, /* 上の線 */
right top, /* 右の線 */
right bottom, /* 下の線 */
left bottom; /* 左の線 */
background-repeat:
repeat-x, /* 上の線 */
repeat-y, /* 右の線 */
repeat-x, /* 下の線 */
repeat-y; /* 左の線 */追加CSSに上記を記載し、エリア全体に点線を表示させています。
イメージ図はPC （タブレット）とスマホで異なる画像を表示させる
「つむぐ」とお客様／ユーザーを繋ぐイメージ図は、Figmaで制作したものを使用しています。PC /タブレット用とスマホ用とでそれぞれ見やすく表示できるよう、2パターンの画像を制作し、固定ページに入れ込んでいます。PC /タブレットサイズではスマホ用画像は非表示、スマホサイズではPC /タブレット用画像は非表示としています。
つむぐの仲間
メンバー画像・名前・肩書きの部分は「カラムブロック」を使用。ブロックメニューでカラム数は4カラムに、カラム設定欄にて「モバイルで2列に表示する」にチェックを入れ、レスポンシブ問題を解消しています。
制作実績
インスタ連携にプラグイン「Smash Balloon Instagram Feed」を使用
制作実績はInstagramにて掲載しています。Webサイトにインスタのサムネイルを表示したり、インスタへリンクさせるためにプラグイン「Smash Balloon Instagram Feed」を使用。
プラグインを追加し、アカウント連携等設定を行えば、固定ページ制作画面等から簡単に配置ができますよ。
提供できる価値
文字のフチ取りにはCSSで「text-shadow」を使用
text-shadow: 1px 1px 0 #DB231A, -1px -1px 0 #DB231A,
-1px 1px 0 #DB231A, 1px -1px 0 #DB231A,
1px 0 0 #DB231A, -1px 0 0 #DB231A,
0 1px 0 #DB231A, 0 -1px 0 #DB231A;文字のフチ取りを表現するにはいくつか方法がありますが、今回は「text-shadow」を使用しました。文字のシャドウを付けることでフチ取りされた文字を実現できます。四隅に対して1度の指示では文字が薄くなってしまうため、同じ指示を重ねることで見やすく表示しています。
つむぐの活動
つむぐの活動履歴をブログでご紹介しています。このエリアは「投稿リスト」ブロックを使用。ブロックメニューで、表示する投稿数や表示順などお好みに合わせて細かく設定が可能です。
お問い合わせ
SNSアイコンはFont Awesomeを使用
X（旧Twitter）やInstagramへのリンク表示には「Font Awesome」のアイコンを使用。詳しい使用方法は公式サイトにも記載されています。SWELL独自にアイコンもいくつか用意されていますが、Font Awesomeを使用すればデザインの幅が広がりそうです。
https://swell-theme.com/customize/3297
ヘッダー／フッター
ヘッダーとフッターに表示されているメニューは、外観＞カスタマイズ＞メニューから設定。
メニュー項目とURLを入力します。ヘッダー・フッター・スマホ用ハンバーガーメニューなどそれぞれ異なるメニューが設定できるので、状況に合わせて細かく設定できるのがうれしいですね。
感覚的にオシャレなサイト作りができるSWELL
SWELLはHTMLやCSSの知識があまりなくても、オシャレ感のあるサイトやブログページが作成できるWordPressテーマです。国産テーマのため、公式サイトを始め、経験者によるたくさんのお役立ちブログが見つかるのもうれしいポイント。
▼SWELL公式ページはこちら
SWELL – シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ
有料テーマではありますが、比較的低価格で高クオリティなサイト作りが可能です。つむぐでもSWELLを使用したサイト制作行っておりますので、お気軽にご相談ください！
