当ページのリンクには広告が含まれています。 ブロックエディタの活用

SWELLで固定ページにプロフィールをオシャレに設置してみた

筆者はこんな人

34インチのウルトラワイドモニター

34インチのウルトラワイドモニターをフル活用! 気分転換で動画を見始めたら止まらない笑

ばらもん。
ばらもん。
AFFINGER6とSWELLを使って、6つのブログを運営しているビール大好き自称鳥人間です!

特化ブログの数

本記事を読むメリット

SWELLの固定ページでオシャレなプロフィールを作成できることが期待できます

SWELLの固定ページでプロフィールを設置する方法

step
1
固定ページのプロフィール完成形

1-SWELL固定ページのプロフィールの完成形

step
2
フルワイドブロックを選択

2-フルワイドブロックを選択

step
3
見出しに『プロフィール』と入力

3-フルワイドブロックが挿入される

step
4
リッチカラムブロックを選択

4-リッチカラムブロックを選択

step
5
リッチカラムが挿入される

5-リッチカラムブロックが挿入される

step
6
左カラムをクリックしてカーソルをセット

6-左カラムをクリックしてカーソルを合わせる

step
7
↑矢印キーを押下するとカラムが選択される

7-上矢印を押下する

step
8
カラム横幅を70パーセントに設定

8-カラム横幅を70パーセントにする

step
9
下にあるカラムにカーソルをセット

9-左カラムの横幅が変更される

step
10
↑矢印キーを押下してカラムを選択

10-下カラムも同じようにして横幅を変更する

step
11
カラム横幅を30パーセントに設定

11-右カラムを30パーセントにする

step
12
左カラムにプロフィール分を入力

12-プロフィールを入力していく

step
13
右カラムにカーソルをセット

13-右カラムにカーソルをセットする

step
14
画像ブロックを選択

14-画像ブロックを選択する

step
15
画像をアップロードまたはメディアライブラリから選択

15-画像をアップロードまたはメディアファイルから選択する

step
16
プロフィール画像が挿入される

16-プロフィール画像を挿入する

step
17
画像のサイズを適当に変更

17-プロフィール画像のサイズを変更する

step
18
画像の下にキャプションを追加

18-プロフィール画像にキャプションを挿入する

step
19
キャプション追加完了

19-プロフィール画像にキャプション入力完了

step
20
リストブロックを選択

20-リストブロックを選択する

step
21
親のリストブロックを選択

21-親リストブロックを選択する

step
22
スタイルの変更と下線を引く

22-リストのスタイル変更と下線を引く

step
23
プロフィール画像の下まで完成

23-プロフィール画像下のリストの設定完了

step
24
フルワイドブロックの端の方をクリックして、コンテンツサイズを変更

24-フルワイドブロックの端っこを選択してサイト幅を選択する

メモ

  • サイト幅
  • 上下のパディング量は、40

step
25
背景画像の設定

25-背景画像にメディアを設定する

step
26
背景画像を設定するとこんな感じ

26-背景画像が挿入される

step
27
テキストカラーをホワイトに設定

27-文字色を白色に変更する

step
28
オーバーレイカラーを黒にして、不透明度は20に設定

28-オーバーレイカラーを変更する

step
29
プロフィールの完成

29-プロフィール完成

ポイントをおさらいしておきます。

本記事のポイントまとめ

  • SWELLの固定ページでプロフィールを作成すときは、フルワイドブロックとリッチカラムを使うとオシャレに仕上がるよ!

以上です。

ばらもん。
ばらもん。
当ブログのAFFINGER6の購入特典をご紹介します。

AFFINGER6のモニター、iPad、iPhoneの見栄え

  1. 適切にリライトをして検索順位を実際に上げた方法(2021年の内容にはなりますが、本質は今現在も同じだと感じています。)
  2. 2024年9月現在で、note累計125冊売り上げた『【本当は内緒にしたい】本業情シスが社内パソコンでサボる2つの手段』←リンクから途中までnoteで読むことができます。

本記事購入時にお送りする閲覧パスワードを入力することで、下記から読むことができるようになります。

  1. 【ブログリライト】12→1位にランクアップさせた手順とは?
  2. 【本当は内緒にしたい】本業情シスが社内パソコンでサボる2つの手段

SWELLも気になるけど、AFFINGER6も触ってみたいなぁ・・・って思われている方は、下記リンク経由でAFFINGER6をゲットしてみてくださいね!

公式ページへ(特典付き)

-ブロックエディタの活用