今回は、SWELLのタイトル文字を非表示にするカスタマイズをご紹介します。
純正機能に調整項目はついていませんので、対象ページにCSSを追記する形で対応しましょう。
- 「そもそもSWELLとは」については、下記の記事をご参考ください。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』
SWELLでタイトル文字を非表示にするとどうなる？
当サイト内「文亭とは」のページでは、今回のカスタマイズを使ってタイトル文字を非表示にしています。下記のようなデザインです。
ちょっと雰囲気を出したかったので、あえてタイトルを非表示にしました。
SWELLでタイトル文字を非表示にするカスタマイズ【CSS】
SWELLのタイトル文字を非表示にするには、タイトルを非表示にしたいページ下部の「CSS用コード」部分に、下記のコードを書きます。
/*タイトル非表示*/
h1{
display:none;
}具体的には、下記画像の項目です。
たったのこれだけで、タイトル文字を非表示にできます。
非表示にしたタイトル上部分を詰めるカスタマイズ
タイトルを非表示にしただけだと、ヘッダーとの間に少し空白が生まれます。それが気になる場合は、下記のコードも追加してタイトル上の空白をなくしてください。
.l-mainContent__inner>.post_content {
margin-top: 0;
}
.l-content{
padding-top: 0;
}つまりタイトル非表示のコードとあわせると、下記の記述になります。
h1{
display:none;
}
.l-mainContent__inner>.post_content {
margin-top: 0;
}
.l-content{
padding-top: 0;
}下記「記事添削サービス」のページデザインでは、上記のコードをつかって行間を詰めていますので、宜しければご参考ください。
SWELLのページタイトルを非表示にする際の注意点
今回ご紹介した「タイトルを非表示にするカスタマイズ」の注意点をお伝えしておきます。
カスタマイザーの追加CSSに書くと全ページのタイトルが非表示になる
CSSのカスタマイズでは、よく「外観→カスタマイズ→追加CSS」の項目を使います。
しかし追加CSS項目に書くと全ページに反映されるため、今回のカスタマイズには向きません。かならずタイトルを非表示にしたいページにだけ書くようにしてください。
本当にタイトルタグがなくなるわけではない
今回のカスタマイズでは、あくまで「非表示」にするだけであり、文字自体がなくなったわけではありません。
現に当サイト内でタイトルを非表示にしている「文亭とは」のページを見出し抽出ツールで確認すると、下記のとおりh1にはしっかりとテキストが表示されています。
あくまでCSSをつかって「人の目に見えなくする」というだけで、HTML上でテキストは存在しますので、その点だけはご留意ください。
SWELLのタイトル非表示カスタマイズまとめ
頻繁に使うカスタマイズではありませんが、デザインを優先させたいときに使用してみてください。
なおタイトルの文字サイズを変更するカスタマイズは下記の記事で解説していますので、あわせて参考にしてみてください。
