SWELLの始め方は簡単!初心者でも簡単に始めれる方法こちら

SWELLの画像サイズ一覧表|メインビジュアル、メインビジュアル、ヘッダーロゴ

当ページのリンクには広告が含まれています。
アイキャッチ画像一覧

SWELLを始めたけど・・・、画像サイズがわからない
何か画像一覧表みたいなものないかな?

この記事では、SWELLの画像サイズ一覧表にしてまとめてます

ブログ初心者の方は登録しておいた方がいい無料画像サイトを紹介してるのでよければ使ってください

SWELLの画像サイズを全て丸暗記するのは大変ですよね?

ここでは、SWELLの画像サイズ一覧と使いかたをまとめているので覚えてください

この記事でわかること
  • SWELLの画像サイズがわかる
  • 初心者でも使えるおすすめサイトがわかる
  • SWELlの画像サイズの使い方がわかる

以上のことがわかります。「パソコンに詳しくないよ」ってかたでも手順をおっていけば大丈夫です

ジャンプできるもくじ

SWELLの画像サイズ一覧とおすすめサイト

SWELLの画像サイズ一覧とおすすめサイトは以下の通りです

おすすめ画像は好きに使ってください

SWELLで使う画像一覧推奨画像サイズおすすめサイト
プロフィール512px × 512pxいらすとや
アイキャッチ1200px × 630pxCanva+O-DANぱくたそ
ヘッダーロゴ1600px × 360pxCanva
メインビジュアル(PC)1600px × 900pxCanva+O-DANぱくたそ
メインビジュアル(スマホ)390px × 844pxPCと同じ
ファビコン512px × 512pxFont Awesome
N0 IMAGE1200px × 630pxCanva

プロフィール

SWELLのプロフィール画像

SWELLのプロフィールは自分の経歴や趣味を書いたりします。僕の場合は発信情報をプロフィールに書いています

基本的に自分はどんな人物なのかを書くのかを発信します(僕の場合はSWELLとブログの発信してますみたいことを書いてます)

そこで使うSWELLのプロフィールの画像サイズを決めていきます

SWELLのプロフィールの設定方法
  1. 画像作成(おすすめはココナラ
  2. WordPress右上のユーザー名をクリック
  3. カスタムアバターに画像を挿入
  4. 保存して完了

アイキャッチ

SWELLの画像だよ

SWELLのアイキャッチは、記事のトップに表示される画像です。記事のメインみたいなものなのでかなり重要です

僕のおすすめはCanvaでテンプレを作成しておくと次回以降は簡単に作れますよ

SWELLのアイキャッチの作成方法
  1. 投稿画面からアイキャッチ画像より好きな画像を挿入
  2. 更新すれば完了です

SWELLの「ヘッダーロゴ」

SWELLのヘッダーロゴ

SWELLのヘッダーロゴは、サイトの上部に表示されて読者が一番最初に目にさる場所です

ブログの顔みたいな感じです。このロゴに印象によってサイトの印象も変わるのでちゃんとロゴを作成して設定しましょう

雑だとカッコ悪いのできちんと作成して下さい

SWELLのヘッダーの設定方法
  1. カスタマイズ⇨ヘッダー
  2. ヘッダー
  3. 画像サイズの設定
SWELLのヘッダーロゴ1

僕の画像サイズ設定はこんな感じですがお好みでどうぞ

参考

SWELLのヘッダーのカスタマイズの方法とサイズも解説!

SWELLの「メインビジュアル(PC・スマホ)」

SWELLのアイキャッチ画像13

SWELLのメインビジュアルは、メイン(主要)なという意味で読者がブログをおとづれた際にトップページに表示されるイラストのことです

ブログの中でも一番目立つので極めてセンスが問われます

SWELLではパソコン用とスマートフォン用でそれぞれ画像を分けられます

SWELLのメインビジュアルの設定方法
  1. カスタマイズ⇨トップページ
  2. メインビジュアル⇨画像

以下の設定にしてください

SWELLのアイキャッチ画像8

パソコン用とスマートフォン用の画像を設定してCSSの設定をしていきます

追加CSSに以下のコードを貼り付けて下さい

以下の設定を行なって下さい。それでメインビジュアルの設定は完了です

STEP
追加CSSを開きます

カスタマイズ⇨追加CSSを選択

SWELLのアイキャッチ画像10
STEP
CSSを入力して下さい

以下のコードを入力して下さい

.main-text {
  text-align: left;
  font-size: 40px;
  position: relative;
  top: 150px;
}

@media screen and (max-width: 1100px) {
  .main-text {
    font-size: 36px;
    top: 130px;
  }
}

@media screen and (max-width: 959px) {
  .main-text {
    font-size: 32px;
    top: 115px;
  }
}

@media screen and (max-width: 600px) {
  .main-text {
    font-size: 24px;
    top: 60px;
  }
}
アイキャッチ画像11

以上でSWELLのメインビジュアル設定の完了です

ファビコン

ファビコン

SWELLのファビコンは、Webサイトで表示されているタブの画像のことです

ファビコンは簡単に設定できるので今から解説していきます

SWELLのファビコン設定方法
  1. カスタマイズ⇨WordPressの設定
  2. サイトアイコンから画像を挿入して完了です

参考

【完全初心者】SWELLのファビコンの設定方法を解説します

N0 IMAGE

N0 IMAGEは、アイキャッチ画像が設定されていない時に表示される画像のことです

設定はとても簡単です

SWELLのN0 IMAGEの設定方法
  1. カスタマイズ⇨サイト全体設定
  2. N0 IMAGE画像

もし、N0 IMAGE画像の作成が面倒くさい場合は僕の画像を使ってもらって大丈夫です

下に貼っておきますのでご自由にどうぞ

以上でSWELLの画像サイズ一覧表の解説は以上です

最後に

最後まで読んでいただきありがとうございました

今回は「SWELLの画像サイズ一覧表|メインビジュアル、メインビジュアル、ヘッダーロゴ」について解説していきました

この記事ではSWELLの画像サイズをまとめてるのでもしわからなくなった場合はいつでもみにきてください

今回は長くなりましたね

それでは、この辺で終わりたいと思います。ありがとうございました

アイキャッチ画像一覧

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


ジャンプできるもくじ