![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
今日は、SWELLのカスタマイズ サイト全体設定にあるタイトルデザインの各種設定を解説していきます
と、いっても、この項目は選択するだけなんですが、SWELLを購入するか迷われている方や、既にお使いの方にもどこをどんなに変えられるのか、設定できるデザインも含めてご紹介していきます
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
コチラの記事では、SWELLで設定できる各タイトルの場所と、デザインの種類 設定方法が分かります
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
紹介する項目は次の通りです
- サブコンテンツのタイトルデザイン
- サイドバーのタイトルデザイン(パソコン画面向け)
- サイドバーのタイトルデザイン(スマホ向け)
- フッターのタイトルデザイン
- スマホメニュー内のタイトルデザイン
【SWELLカスタマイズ】サイト全体設定/タイトルデザイン
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
さっそくですが、SWELLで設定できるタイトルの全てのデザインを実演設定しながらご紹介していきます
まずは、サブコンテンツのタイトルデザインですが、こちらは記事ページの本文下に表示される「この記事を書いた人」や「関連記事」などのエリアのタイトルのことです
![](https://nagi.blog/wp-content/uploads/2022/08/3c0c1944b5f6179543d3858cb445b1c3.png)
![](https://nagi.blog/wp-content/uploads/2022/08/3c0c1944b5f6179543d3858cb445b1c3.png)
こちらですね。このデザインを変えることが出来ます
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
また、メインコンテンツ内に挿入されるウィジェットのタイトルのことを指しています。
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
どういうこと?
こちらはですね、どういうことかといいますと、すべての記事の記事上部や記事下に設置する機能をウィジェットの方で設定できるんです。
コチラを設定しますと、この様にタイトルがつきますので、このデザインを設定することが出来ます
![](https://nagi.blog/wp-content/uploads/2022/08/2ad0abfe8a8bc49e953a4513fb6e73c5.png)
![](https://nagi.blog/wp-content/uploads/2022/08/2ad0abfe8a8bc49e953a4513fb6e73c5.png)
サブコンテンツのタイトルデザイン
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
サブコンテンツのタイトルデザインは、こちらで4つのタイプの中から選ぶことが出来ます
4つのデザインを表示してみますね
![](https://nagi.blog/wp-content/uploads/2022/08/0b2a61cd4cc81ea9059b049af4e62af7.png)
![](https://nagi.blog/wp-content/uploads/2022/08/0b2a61cd4cc81ea9059b049af4e62af7.png)
デフォルトは左に縦線になってると思います。装飾なしにしてみます。
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
装飾が消えたね
![](https://nagi.blog/wp-content/uploads/2022/08/f4ebe15ad96165226f1d403f90f9ec45.png)
![](https://nagi.blog/wp-content/uploads/2022/08/f4ebe15ad96165226f1d403f90f9ec45.png)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
次は下線にします
せんが入りましたね
![](https://nagi.blog/wp-content/uploads/2022/08/4bdccd042cfc67f013f1a2834e8d367c.jpg)
![](https://nagi.blog/wp-content/uploads/2022/08/4bdccd042cfc67f013f1a2834e8d367c.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
つぎは、左右に横線にしてみます
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
左右の両サイドに部分的に線が入ったね
![](https://nagi.blog/wp-content/uploads/2022/08/f2c919f56baa33ca8cf973621875051e.png)
![](https://nagi.blog/wp-content/uploads/2022/08/f2c919f56baa33ca8cf973621875051e.png)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
このような感じです
ウィジェットタイトル
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
次は、ウィジェットタイトルの項目を実演解説していきますね
サイドバーのタイトルデザイン(PC)
まずは、サイドバーのタイトルデザイン(PC)です
![](https://nagi.blog/wp-content/uploads/2022/08/e4ee6ff2a04dd79be762ba726b78480e.png)
![](https://nagi.blog/wp-content/uploads/2022/08/e4ee6ff2a04dd79be762ba726b78480e.png)
こちらも4種類のデザインが用意されていますね
デフォルトは下線に設定されていますが、他にサブコンテンツのタイトルデザインの所でご紹介したと同じ、デザインの左に縦線 左右に横線
そして塗りの4つのデザインになります
![](https://nagi.blog/wp-content/uploads/2022/08/82b4a6b998fc86e5d64d1436786f8e38.png)
![](https://nagi.blog/wp-content/uploads/2022/08/82b4a6b998fc86e5d64d1436786f8e38.png)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
この様に、タイトルの背景が塗りになりまして、文字が白に反転します
サイドバーのタイトルデザイン(SP)
パソコン画面用と、別のデザインでスマホ用にも設定しておけます
パソコンと同じ表示で良ければ、PC表示に合わせるのままにしてください
スマホ用デザインを変えたい場合は、こちらもサイドバーのタイトルデザイン(PC)の所で設定できる4種類を用意してありますので、好きなデザインをえらんでみてください
下線 左に縦線 左右に横線 塗りと、なります
![](https://nagi.blog/wp-content/uploads/2022/08/36241aea4828803a05834ef018e57899.png)
![](https://nagi.blog/wp-content/uploads/2022/08/36241aea4828803a05834ef018e57899.png)
フッターのタイトルデザイン
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
つぎは、フッターのタイトルデザインを実演解説します
フッターは、WordPressの一番下のエリアになりますね
![](https://nagi.blog/wp-content/uploads/2022/08/9539ef7a9a3aa40821ee4f43486c327c.png)
![](https://nagi.blog/wp-content/uploads/2022/08/9539ef7a9a3aa40821ee4f43486c327c.png)
フッターのエリアのタイトルのデザインを変えることが出来ます
デフォルトでは下線になっていますが、そのほかにもう1つ左右に線のデザインが用意されています
![](https://nagi.blog/wp-content/uploads/2022/08/0c1cfbb9c507a3cdce8ccf5837071e12.png)
![](https://nagi.blog/wp-content/uploads/2022/08/0c1cfbb9c507a3cdce8ccf5837071e12.png)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
このような感じになります
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
機能面ではウィジェットの方で設定していきます。ウィジェットの方は、詳しくは後々、専門の記事を書きますが、こちらの画面で、各パートに追加項目を付けて行けます。
![](https://nagi.blog/wp-content/uploads/2022/08/dd603b0e3a7c14409aefeae756baf03d.png)
![](https://nagi.blog/wp-content/uploads/2022/08/dd603b0e3a7c14409aefeae756baf03d.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
いまいちよく分からない…
どういうことかと言いますと、SWELL公式ページのフッターでご紹介します
![](https://nagi.blog/wp-content/uploads/2022/08/b9be2caab9b81c832cc3d14942a5d063.png)
![](https://nagi.blog/wp-content/uploads/2022/08/b9be2caab9b81c832cc3d14942a5d063.png)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
この様に追加項目を表示できるようになります
軽く設定方法をお話しますと、例えばカテゴリーを選びますと、プルダウンして選択できる項目が現れますので、設置したい場所、今回はフッターなのでフッターを選択します。そしてウィジェットを追加をクリック。
そうしますとフッター(PC)1の所にカテゴリーを編集できる項目が出来ます
必要項目を入力して、保存します。
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
後ほど、ウィジェット専門の解説動画の方を出させて頂きますので、ブックマークか、チャンネル登録してお待ちいただけると嬉しいです
スマホメニュー内のタイトルデザイン
では、つぎですね
スマホメニュー内のタイトルデザインのほうですね
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
そもそもの、スマホメニューってなにかな?
スマホで見た時に、上の方に表示されている、こちらの横三本線の所をクリックしますと、表示されるメニューですね
![](https://nagi.blog/wp-content/uploads/2022/08/IMG_7697p750.png)
![](https://nagi.blog/wp-content/uploads/2022/08/IMG_7697p750.png)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
こちらのデザインを設定することが出来ます。
![](https://nagi.blog/wp-content/uploads/2022/08/IMG_7698p750.png)
![](https://nagi.blog/wp-content/uploads/2022/08/IMG_7698p750.png)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
こちらも、これまでと同じように、下線 左に縦線 左右に横線 塗りの、4つのデザインが用意されています
全ての設定が終わりましたら、カスタマイズを離れる前に、公開をしておきましょう
![](https://nagi.blog/wp-content/uploads/2022/08/467326c31e84c3297d4da14d82f5316e.png)
![](https://nagi.blog/wp-content/uploads/2022/08/467326c31e84c3297d4da14d82f5316e.png)
アップデートで変更になる場所や、最新の詳細の情報などは、動画説明欄にSWELL公式サイトのリンクがありますので参考にしてくださいね
【SWELL】公式ページのコンテンツヘッダーに関する記事![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
今日は、タイトルデザインの設定とデザインの種類でした
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
次回は、SWELLらしいトップページのデザインを作れるコンテンツヘッダーについて解説予定です
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/975429aa9a80f4f9bc5ca68a5e46d0cf-150x150.png)
他にも、SWELLのカスタマイズに興味ある方は、コチラの記事も読んでもらえると嬉しいです
【SWELLカスタマイズ】
サイト全体設定
【動画】サイト全体設定/タイトルデザイン
現在、SWELLを中心にWordPressに関した動画を上げています。SWELLの使い方に迷った時には、辞書の様に使えるYouTubeチャンネルを作っています
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
興味ありましたら、チャンネル登録 高評価して頂けると嬉しいです
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
![](https://nagi.blog/wp-content/uploads/2022/03/49ef664720433fb37002b605195c5e9b-150x150.png)
見てもらえる人が増えると、動画制作のモチベーションが上がります
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
![](https://nagi.blog/wp-content/uploads/2022/03/e83fa52eac00d47020c79e84425066c0-150x150.jpg)
最後まで見て頂きまして、ありがとうございました