他のサイトと差別化をしたい。もっとお洒落にしたい。あなたはそうお考えではないですか？それならば、サイドバーをお洒落にデザインしてみるのはどうでしょう。
このブログのサイドバーをPCでご覧になってください。他のメディアではないような、波型のサイドバーとなっています。サイドバーはPCで表示するときにしか、ほぼ読者に見られませんが、上手にカスタマイズすることでお洒落にしたり、購買につなげることもできます。
この記事ではSWELLを使用する方が、より簡単にお洒落なサイドバーを作る方法を解説していきます。この方法を理解すれば、今まで苦労していたデザインが驚くほど簡単になりますので、ぜひ最後まで読んでいってくださいね。
＼安心して使い続けられるテーマをお探しなら！／
今日から貴方もSWELLERの仲間入り
この記事を書いた人
どんぐり所長
- 2021年1月よりSWELL使用
- 4つのブログサイトをSWELLで運営
- 2サイト、合計80記事をCocoonからSWELLに移行した経験あり
- Twitterフォロワー8,000人以上
- アイキャッチデザイナー
この記事を書いた人
どんぐり所長
- 2021年1月よりSWELL使用
- 4つのブログサイトをSWELLで運営
- 2サイト、合計80記事をCocoonからSWELLに移行した経験あり
- Twitterフォロワー6,800人以上
- アイキャッチデザイナー
SWELLならサイドバーは「ブログパーツ」で作れ
皆さんはサイドバーの設定をする場合どのようにされてますか？ほとんどの方は、ダッシュボードの「外観」→「ウィジェット」で設定されていると思います。通常はこの設定に記事一覧やカテゴリーなどのウィジェットをはめ込んでいって、サイドバーの構成を作っていきます。
思ったデザインにならずに悩んだことがないですか？
ウィジェットでサイドバーを設定する場合、画像の大きさが思うようにならなかったり、良い場所にテキストを置けなかったりと制約が大きく好みのデザインが作りにくい状況です。
そこで登場するのが「ブログパーツ」。ウィジェットのサイドバーに作るのは、「カスタムHTML」ひとつだけです。
ブログパーツでサイドバーを作る方法
あとでわかりやすいように内容に沿ったタイトルをつけましょう。ここでは「サイドバー」というタイトルにしました。
サイドバーをブロックのように分けるのに「フルワイドブロック」を使用します。ひとまとめにしたいブロックごとにひとつのフルワイドブロックを使用し、その中に入れたいブロックを入れていきます。
フルワイドブロックを使用することで、そのブロックごとに色を変えたりすることもできるようになります。
フルワイドブロックと次のフルワイドブロックの間に1pxのスペーサーを入れておくのがコツ。
サイドバーでよく使用するブロックは以下のとおり。
- フルワイドブロック…ボックスごとの区切りに使用
- 画像ブロック…記事へのバナーなどに使用
- SWELLボタン…アフィリンクや記事へのリンクに使用
- 投稿リスト…最新記事や人気記事に使用
- カテゴリー一覧
- リンクボックス…ボックスメニュー作成
- スペーサー…行間調節
入れたい項目をトップページのように作れたら完成！
作成したブログパーツをサイドバーに設定する方法
では完成したサイドバーのブログパーツはどのように設定したらよいのでしょうか。ここでは、ブログパーツをサイドバーに反映させる方法を解説します。
①「ダッシュボード」→「ブログパーツ」
②先程作ったサイドバー用のブログパーツの呼び出しコードをコピーしてください。
カスタムHTMLをドラッグし、共通サイドバーにドロップすることで、設置することができます。
①共通サイドバー内のカスタムHTMLを押す
②「内容」に先程コピーしたブログパーツIDをペースト
③「完了」を押す
これで、ブログパーツで作ったサイドバーが表示されるようになります。
サイドバーをブログパーツで作る利点
ブログパーツでサイドバーを作る利点は大きく2つあります。
- デザインの自由度が高い
- ブログパーツの編集画面1枚でサイドバー全体を管理できる
デザインの自由度は先述したとおり。ウィジェットではほぼ自由が効かない状況ですが、ブログパーツを利用すれば、トップページを作るようにあなたのデザインを反映することができます。
また、ウィジェットならば、ブロックごとにひとつひとつ設定し、デザインがどうなっているかは別タブなどで実際に実装してみて確認する必要があります。しかし、ブログパーツで作るとモバイルのプレビューでサイドバー全体を確認しながら作成することができます。
わざわざウィジェットの組み合わせでサイドバーを作るより、ブログパーツで作ったほうが、簡単でキレイ！
サイドバーを波形にする方法
さて、いよいよ本題の「サイドバーを波形にする方法」について解説していきます。ここまで、サイドバーをブログパーツで作ってきた方ならお気づきかと思います。
①フルワイドブロックを選択
②右サイドバーの「上下の境界線の形状」を「波」に
③波の大きさを「上下の境界線の高さレベル」で調整
フルワイドブロックとフルワイドブロックの間に「スペーサー」を入れ、スペーサーの高さを「1px」にすれば、ブロックとブロックの間に当ブログと同等の間隔があきます。
これだけで素敵な波型サイドバーが完成！
たったこれだけのことで、あなたのメディアのサイドバーに波形を実装することができます。
SWELLは非常に優れたwordpressテーマです。CSSなどのプログラムがわからなくても容易にデザインすることができます。今回のサイドバーについても、SWELLだからこそ可能なデザイン方法。
だから、あなたもすぐに波型サイドバーを設置することができるのです。
SWELLの購入を迷っている方へ
このブログパーツを使用した波型サイドバーはSWELLでのみできる方法です。
ここまで読んでSWELLに興味が湧いた、これからブログを始めようと考えている方やSWELL以外のテーマを使用されている方は、ぜひSWELLの購入をご検討ください。
SWELLは本当にブログ初心者に優しく、かつプログラミングができなくても簡単にデザインができるテーマです。私が胸を張っておすすめします。
＼安心して使い続けられるテーマをお探しなら！／
今日から貴方もSWELLERの仲間入り
「もっと詳しくSWELLを知りたい」と思ったあなたは、ぜひ以下の記事を読んでみてくださいね。
どんぐり所長のおすすめツール
どこでも、どんなデバイスでも順位チェック
ブログ記事の順位を確認していますか？どんなキーワードが上下しているのか知る事はブロガーでは必須と言えます。
ほとんどの方がダウンロード型の順位チェックツールを使用されていますが、私はコレ。「Nobilista」。クラウド型のチェックツールです。
クラウド型とは、ネット上にあるサーバーにデータが保存されている順位チェックツールです。従って、お家のパソコン以外でも情報にアクセスできちゃうんです。これが想像以上に快適で、一度体験すると戻れなくなっちゃう。詳しい記事を書いていますので是非読んでみてください。
実は私、Nobilistaの公式アンバサダーをさせて頂いています。使いだしたら超気に入ってしまって、気づいたらアンバサダーになっていました。そんな私が、おすすめする「Nobilista」。今なら7日間無料でお試しができます。クレジットカードなどの情報を入れなくても試せるので、ぜひあなたにも試してほしい。
＼場所を選ばない快適さを体験して／
Nobilista公式サイト
当サイト推奨 デザインツール
当サイトでは、ブログ初心者でも簡単・無料で美麗なデザインが作成できる、オンライン画像作成フォーム「Canva」を推奨しています。数万点の素材やフォントが用意されていて、選ぶだけで簡単にプロ並みのデザインを作成する事ができます。これから先、会社員の仕事でも使用する事になるかもしれないほど普及が広まっています。覚えるなら早い方がいいですよ！
当サイトのデザインは、SWELLで再現可能
私はSWELLを2年使用してきました。現在４つのサイトでSWELLを使用しています。
SWELLを使用する理由は、簡単・綺麗・速い。
実際このトップページも、SWELLの標準機能だけでデザイン。
お洒落なブログを作りたいあなたにピッタリのWordPressテーマです。
私が実際に使用して実感したSWELLの特徴は以下。
- 完全ブロックエディタ対応
- 直感で使える操作性
- 便利な専用ブロックを多数用意
- お洒落なトップページが簡単に作れる
- 最速レベルのページスピード
- 一度購入すれば複数サイトに何度でも使用可能
- ユーザーの利便性を考える熱意の運営者
- SWELLを紹介すればアフィリエイト報酬が貰える（購入者のみ参加可）
- 販売価格 ￥17,600（税込）
唯一の欠点は価格の高さ。しかしそれは、SWELLがハイクオリティだから。
そして、運営者がとびきりの対応をしてくれる必要経費。
SWELLにはアフィリエイトプログラムがあり、紹介すれば利益を得ることもできます。
よく、「アフィリエイトがあるから紹介しているんでしょ。」と言われますがこれは違います。
惚れ込んだWordPressテーマに、たまたまアフィリエイトがあっただけ。
あなたもSWELLを体験すれば、きっと紹介したくなります。
＼圧倒的な操作性を体験せよ／
あなたも今日からSWELLER！
お気軽にコメントください