【SWELL】ブログパーツの基本をわかりやすく解説！カスタマイズ実例５選も紹介

サイトデザインのカスタマイズってむずかしいんじゃないの？

SWELLの「ブログパーツ」を使えば誰でも簡単にカスタマイズできます

でも「CSSコード」が必要なんじゃないの？

いいえ。この記事で「CSSコード」を全く使わないカスタマイズの実例を５つ紹介します

CSSの知識がなくても大丈夫！SWELLの「ブログパーツ」でおしゃれにカスタマイズできます

リタイアかわうそです。ご訪問ありがとうございます。

「記事の書きやすさ」や「標準装備された豊富な装飾」などで、ブロガーに大人気のワードプレス有料テーマ「SWELL」。

SWELLを使ったオシャレなサイトを見ると「こんな風にカスタマイズしてみたい」と憧れますよね。

でも「私ってそんなにパソコンは得意な方ではないし、CSSの知識もないし、サイトのカスタマイズなんてちょっとむずかしそうだわ」と感じていらっしゃる方はいませんか。

大丈夫です！！

もちろん、わたしはCSSの知識はまったくありません。

でも、SWELLの「ブロックパーツ」の基本的な使い方さえ押さえておけば、だれでも（それなりの）オシャレなサイトを作ることができるんです。

この記事では、「パソコンはあまり得意ではないけど、サイトをおしゃれにカスタマイズしてみたい」という方のヒントになるような情報を提供します。

ブログパーツを使った当サイトの「カスタマイズの実際」を実例に、具体的な使用方法も紹介します。

SWELLの「ブログパ―ツ」っていったい何？

ブログパーツとは、専用のエディ―ターで作成したコンテンツを、サイト内の好きな場所に表示させることができる機能のことです。

当サイトのトップページ内の「新着記事」「おすすめ記事一覧」もブログパーツ機能をつかっています。

ブログパーツ機能を使えば、サイドバーにも好きなコンテンツを表示させることができます。

ブログパーツ機能について紹介しているSWELL公式のサイトです。

はじめに、最低限知っておきたいブログパーツの使い方を説明します。

基本的な使い方は、以下の２ステップです。

では、ステップごとにわかりやすく説明をしていきます。

【ステップ１】ブログパーツのコンテンツをつくる

１）ブログパーツのエディ―ターでコンテンツを作成する

ブログパーツのエディーター画面を開いて、テキストや画像などを入れます。

終了したら「公開」にしてください。

２）作成したブログパーツの「呼び出しコード」をコピーする

こちらがブログパーツの「呼び出しコード」です。

【ステップ２】ブログパーツをサイト内の好きな場所に表示させる

１）【外観】 → 【ウィジェット画面】をひらく

２）表示させたい場所に【カスタムHTML】をスライドする

３）【カスタムTHML】にブログパーツの「呼び出しコード」をペーストして保存する

「カスタムTHLM」へ先ほどコピーした「呼び出しコード」をペーストします。

４）表示画面で確認をする

無事、トップページに表示できました。

CCS未使用！当サイトのブログパーツを使った「カスタマイズ実例」５選

当サイトでブログパーツを使ってカスタマズした実例５選です。

いずれも、 「SWELLブログパーツの基本的な使い方 」【ステップ❶】と【ステップ❷】の手順に沿って作りました。

カスタマイズ❶【サイドバー】お知らせコーナー

外観→ウィジェット「共通サイドバー」「共通サイドバー（スマホ版）」にブログパーツを設置

サイドバーに表示している「お知らせコーナー」です。

ブログパーツにテキストを入力し画像をはりつけただけで、簡単にできます。

カスタマイズ❷【サイドバー】お気に入り記事コーナー

サイドバーに表示している「お気に入りの記事コーナー」です。

ブログパーツのコンテンツは、以下の方法つくりました。

１）ブロック画面の「投稿リスト」をクリックする

２）settingタブを押して記事の表示設定をする

当サイトでは、以下の設定にしています

３）pikupタブを押して「投稿IDを直接指定」に表示させたい記事の投稿IDを入力する

こちらが「投稿ID」の入力画面です。

お気に入り記事の投稿IDを入力すると、ブログパーツのエディーター画面がこのようになります。

カスタマイズ❸【トップページ】新着記事コーナー

外観→ウィジェット「トップページ上部」にブログパーツを設置

トップページに表示している「新着記事エリア」です。

赤枠が、ブログパーツでつくった部分です。

青枠は、初期設定でもともと表示されている「新着記事一覧」です

初期設定の「新着記事」の上に最新の記事を２つ大きく目立つように表示させたくて「トップページ上部」にブログパーツを配置しました。

トップページ「新着記事コーナー」のブログパーツは、以下の方法つくりました。

１）タイトル部分の画像をはりつける

「CANVA」でつくったタイトル用の画像をはりつけました。

スマホで見ても見やすいよう、画像内のフォントサイズを調整しました。

２） ブロック画面の「カラム」をクリックして ２分割（50×50）を選択する

３）右左のカラムにそれぞれ ブロック画面の「投稿リスト」から記事一覧を表示させる

３）settingタブを押して記事の表示設定をする

当サイトでは、以下の設定にしています

カスタマイズ❹【 トップページ 】ごあいさつコーナー

トップページに表示している「ごあいさつコーナー」です。

背景色は、「フルワイルドセクション」というパターンを使っています

１）パターンの「フルワイルドセクション」をクリックする

２）背景色や境界線の設定をする

わたしは、上部境界線を「波」高さ５に設定しています。

カスタマイズ➎【 トップページ 】おすすめ記事コーナー

トップページに表示している「おすすめ記事コーナー」です。

紹介したいテーマ別に記事を表示しています。

現在は、「ブログに関する記事」「６０代シニアにおすすめ」の２テーマを掲載しています。

「カスタマイズ❸【トップページ】新着記事コーナー 」と同じ手順で作っています。

「ブログについての記事」コーナー

「６０代シニアにおすすめ」コーナー

まとめ

今回は、SWELLのブログパーツの基本的な使い方と当サイトの「カスタマイズ実例５選」を紹介しました。

ブログパーツの基本的な使い方をマスターするだけで、SWELL初心者の私でも、あっという間にサイトデザインのカスタマイズができました。

CSSの知識が全くない６０代シニアの私にとって、SWELLは頼もしい相棒です。

この記事を読んでいただいた方が、少しでも参考していただければ嬉しいです。

これからもSWELLの力を借りて、訪問してくださる方にとって「見やすい」サイト作りをめざしていきたいと思います。

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

カスタマイズの参考になる記事を集めました