SWELLを導入したらとりあえずやっておきたい事などを紹介。必須の項目からデザイン的な事まで、細かなカスタマイズも可能です。
こんな感じの記事スライダーやリンクボタンも作れます。
SWELL各種設定
サイト基本情報
まずはWordPress設定の「サイト基本情報」から。
タイトルとキャッチフレーズを入力します。タイトルは自分のブログ名。キャッチフレーズはどんなブログかを簡潔に表すといいでしょう。
Google検索するとパソコンでは画面上にタブが表示されるのですが、その画像をここで設定します。何も設定してない場合は地球儀みたいなマークになるので、設定してるかどうがが一発でわかります。
今後運営していく中でしっかりと設定してあれば、アイコンを見ただけでサイトがわかるなど…メリットもあるので、設定しておくといいでしょう。
ちなみにスマホでは検索結果のサイトURL左に表示。ブックマークした時のアイコンにもなります。
基本デザイン
サイト全体の見た目
「全体の質感」に関してはチェックしなくても大丈夫ですが、通常はこんな感じ。
フラットはこんな感じ。白いサムネイル画像だと周りとの境界線がわかりません。
丸みを持たせるとこんな感じ。
私はチェックをいれない設定にしています。
フォント設定
フォントの種類は4種類。まずは游ゴシック。
ヒラギノゴシック>メイリオ
Noto Sans JP
明朝体(Noto Serif JP)
明朝体だけは見た目の違いがはっきりしていますね。私はGoogleFontsのNoto Sans JPにしています。詳しい内容に関してはSWELLの公式サイトにも載っているので、知りたい方は是非。
フォントサイズに関してはデバイス可変がいいでしょう。デバイスの大きさで調整してくれるので、どのスマホでも見やすくなります。
サブメニューの表示形式
これはどっちでもいいですが、チェックをしていないとこんな感じ。
チェックすると映画から下の子カテゴリが隠れます。
映画の右の矢印を押せば子カテゴリが出てきます。
NO IMAGE画像
基本的には記事ごとにサムネイルを作成すると思いますが、固定ページなどはサムネイルを作らないと思います。プライバシーポリシーとかのサムネイルが必要になる場合はそうないですが、一応設定しておきます。
私はいらすとやの画像を使っています。
タイトルデザイン
サブコンテンツのデザインはここになります。記事下にある「関連記事」などがこれにあたります。
続いてはウィジェットのタイトル。
サイドバーはこんな感じ。
スマホは、アコーディオンボタンをクリックすると現れるサイドバーのタイトル。塗りに設定してあると設定した色に塗りつぶされます。
お知らせバー
トップページのヘッダー下にお知らせばーを設定できます。ページへのリンクや、読者に知らせたい事を設定しましょう。
バー全体をリンクにしたり、背景をグラデーションやストライプにも設定できます。
ぱんくずリスト
パンくずリストとは読者が今どのページを呼んでいるかわかりやすくする為の階層を表すもの。赤枠の中の「ホーム」からカテゴリ名の「ブログ」。その下の階層にある記事を読んでいる事がわかります。
それは童話「ヘンゼルとグレーテル」で主人公が森の中に入る時に迷わないように、パンくずを落としながら進んだというエピソードからきています。
ページャー
記事一覧の下にあるようなページ数を表すもの。デザインなどを設定できます。
スマホ開閉メニュー
スマホのサイドメニューを開閉した時の設定。メニュー展開時のオーバーレイカラーの不透明度はメニューの範囲外の右側の色の透明度を表します。
黒色に設定した場合、1にすると真っ黒になります。写真は0.6になります。
下部固定ボタン
画面右下にあるボタン。これを押すと一番上の画面に戻る事ができます。これがあると便利ですよね。目次ボタンの表示・非表示も設定可能です。
ヘッダー
主にヘッダー周りの設定になります。
左側にあるロゴも自分で作成すれば、ちょっとおしゃれになりますよね。このロゴはCanvaというサイトで作ったものになります。無料でも作成できるのでおすすめです。
フッター
フッターの設定になります。SNSアイコンを表示させたり、コピーライトのテキストを入力します。
ちなみにコピーライトというのは著作権に該当しますよという表示。どのブログも企業のホームページもヘッダーにこのような記載があると思います。
厳密に言えばかかなくても大丈夫なのですが、著作権の対象という事を示す為、書くケースが多いです。
記載する項目としては…
- ©
- 著作権保持者（ブログ名、企業名）
- 著作権発行年（開設した年）
これらを書いておくといいでしょう。
サイドバー
トップページや投稿ページ、さらには左右どちらにサイドバーを表示するかを設定できます。
メインビジュアル
トップページのヘッダー下に画像や動画を設定できます。何枚かのスライドショーも可能。
文言やボタンリンクなども設定でき、アピールしたい写真や記事がある時に有効です。
記事スライダー
人気記事や自分がピックアップした記事をスライダーとして設定できます。これは画像ですが、実際は何秒間ごとに右から左へ動いています。
表示する記事数や何秒ごとに移動するかの設定も可能。細かくカスタマイズできます。
ピックアップバナー
画像下の「洋画」や「邦画」などの項目。これはちょっとカスタマイズが必要なので詳しく説明していきます。
まずは外観→メニューをクリック。新しいメニューを作成します。
左からカテゴリなどを選択。好きな順番に並べます。
画像のアップロードは「メディア」の「新規追加」から可能。
アップロードした画像のページに行き、右側の「URLをクリップボードにコピー」を選択。それを先程の説明欄に貼り付けます。
あとは各種配列方法などを設定すれは完成です。
一つ注意してもらいたいのは、画像のサイズが違うと、ピックアップバナーが横に並んだ時に縦横が揃いません。サイズは統一するようにしましょう。
タイトル
続いては投稿・固定ページ。まずはタイトルのカスタマイズになります。タイトルの部分で日付を表示・非表示や投稿日、更新日などを設定できます。
アイキャッチ画像
ここでは記事初めにアイキャッチ画像を表示するかどうか設定できます。投稿ページでサムネイルを表示をチェックすれば、こんな感じになります。
私の場合はシェアボタンが下に来てしまうので、画像としてサムネイルを挿入しています。
コンテンツのデザイン
ここでは主に見出しの設定ができます。色やデザインなど自分の好きなようにカスタマイズしましょう。
赤枠がH2。黒枠がH3です。
目次
ここでは目次を設定します。どの見出しまで目次に表示させるか。デザインや目次広告の位置も設定可能です。
SNSシェアボタン
SNSシェアボタンをどこに表示させるかの設定になります。記事上部がこちら。
記事下がこちら。
画面端に固定する設定はこちら。
記事下エリア
こちらは記事下のエリア。次のページや前のページの表示設定や、関連記事の表示方法を決める事ができます。
アーカイブページ
カテゴリやタグなどの一覧ページのタイトルのデザインなどについての設定になります。
記事一覧リスト
ここでは設定できる項目が多いですが、主に記事一覧のデザインの設定になります。
特に設定しておきたいのは、カード型リストの画像比率。他の記事でも説明しましたが、サムネイルの画像比率を16:9にしておきて、サムネイル作成をそれに合わせる形をおすすめします。
そうすれば比率の違いで文字がはみ出すなんてこともなくなりますからね。
自分の好きなタブも設定できるので、写真の赤枠の部分にカテゴリやタグのIDを入力してください。
SNS情報
ここでは自分のTwitterアカウントやFacebookアカウントを登録しておきましょう。プロフィール項目やフッター、ヘッダーのSNSアイコンの表示に必要になります。
高度な設定
ここにはアドセンスのコードなどを入力します。特段何もなければスルーしてください。
メニュー
こちらはヘッダーメニューなどを設定します。先程ピックアップバナーの設定方法を紹介しましたが、基本的な手順は一緒になります。
外観→メニューでも設定できますが、こちらで設定するとリアルタイムで変更が確認できるので、おすすめです。
こちらはカスタムリンクになります。自分の好きなURLを設定可能。ラベルも変更できます。
ウィジェット
こちらも外観→ウィジェットで編集できますが、こちらからだと編集できる内容が限られるので、外観→ウィジェットからの編集をおすすめします。
投稿画面みたいな編集になったので、新規で始める方は使いやすいのかもしれません。
追加CSS
追加でCSSを入力すると細かなカスタマイズをする事が可能。CSSとはページの情報を装飾する機能みたいなもんです。
基本的にはある程度のデザインが整っているので、特段追加する必要はないですが、もし「こうしたい」という要望があれば、検索するとたぶんでてきます。
それを入力するといいでしょう。
html {
text-align: justify;
}これはテキストを両端揃えにするCSSです。詳しくは別の記事でも解説しているので、気になる方は是非。記事の「本文」という見出しの「デザイン性を意識する」という項目です。
その他設定
パーマリンク
パーマリンクとは簡単に言うと記事のURLの事。この記事は…
https://stdesignstudio3000.com/blog/swell-customize/
パーマリンクではカテゴリ・記事スラッグに設定してあります。こちらは設定→パーマリンクで編集します。
カスタム構造で自由に変更できます。下の青いボタンを押せば変更が可能。この設定にしておくのが良いでしょう。
SWELL設定
最後にSWELL設定。ここではSWELLの各種設定やデザインのカスタマイズが可能。アドセンスの広告もここで設定できます。
細かな部分の説明は以上になりますが、変更があり次第随時更新していきたいと思います。
関連記事
コメント