めんどくさがりだけど一度ハマったらとことんハマる。ゆる子です。
「これやりたい」がなかなか諦めきれずに、いつのまにか時間がたっていたことありませんか？
私の場合、ずっと見出しのCSSカスタマイズで悩んでいました（笑）
どうしてもリボンの形の見出しが使いたくて、CSSコードと睨めっこしていたんです。
結論、「こだわらなくてもいいところは、早めに諦める」こういうの大事だよなって改めて感じました。
ゆる子本当はやりたいけど、ここでこだわって時間かけるより先に進もう。なぜなら代わりになるものはいくらでもあるから。
この記事では、
- 見出し1行対応のリボン見出しCSSコード
- 見出し2行以上ならリボンデザインは諦めよう
- 見出し2行以上対応のかわいい見出しCSSコード
を、サクッと知ることができ、ゆる子みたいな時間のムダを防ぐことができます。
ゆる子の試行錯誤も交えているので、右往左往している様子もクスッと笑ってやってください。
SWELLの見出しにお気に入りがないなら、作ってしまおう！
SWELLではH2の見出しだけで12種類用意されています。
それだけ聞くと多いなと感じるのですが、実際選んでみると惜しいことが続出。
見出しの幅、飾り線の太さ、角に丸みをつけたい、などなど。
「もう少しこうだったらいいのにな」と思い、自分好みを探そうと思ったんです。
正直なところ、カンタンにできるって思ってたんです。だって見出しってシンプルじゃないですか。
ところが沼にどっぷりハマってしまいました。悪い意味で（笑）
見つけたのは1行対応のリボン見出し
「SWELL 見出し かわいい おしゃれ」で検索して、見つけ出したのはリボン風の見出し。
検索ワード以外にも、「シンプルで自分のサイトのイメージに合う」という条件も叶えたかったので、ここまででかなり時間をかけています。
女性らしいけど甘々すぎない感じがぴったりと思いました。
ただし注意があります。「複数行の見出しになるとデザインが崩れます」とのこと。
うん、複数行になんかならないから大丈夫！
（考えが浅はかでした・・）
コードもコピペで貼り付けるだけだし、色をサイトに合わせるだけだからカンタンです。
参考にしたサイトのCSSがSWELLでは反映されなかったので、AIに聞きながら進めました。
完成したCSSコードを紹介する前に・・
確認して欲しいことがありますので、ご覧ください。
CSSを入れる前に確認してほしい前提条件
今回カスタマイズする見出しは、WordPressの「H2見出し」です。
そのため、CSSを反映させる前に、テーマ側の設定を確認しておく必要があります。
WordPressの管理画面から、
「外観→カスタマイズ→投稿・固定ページ→コンテンツのデザイン→見出し2のデザイン」に進み、見出し2の装飾を「装飾なし」に設定する。
この設定が有効になっていないと、あとで紹介するCSSを追加しても、想定と違うデザインになってしまうことがあります。
設定ができたら、次はCSSコードの追加です。
ゆる子すでに「装飾なし」に設定している場合は、そのまま次に進んでくださいね。
リボン見出しCSSコード（1行のみ対応タイプ）
8行目で見出しの背景の色を、9行目で見出しの文字の色を指定します。
なお、見出しの色は、自分のサイトのメインカラーと一致すると統一感が出るのでおすすめです。
何度も言っちゃいますが、改行されるような長文の見出しには対応していません。注意して使ってくださいね！
記事確認はパソコンとスマホの両方表示しよう
見出しが2行以上になるはずない、という予想はすぐに外れます。
スマホでの表示のことをすっかり忘れていました。2行目以降の見出しがいびつな形をしています。
実際、私の書く記事の見出しは長めなのですが、パソコン表示だけしか確認していませんでした。
ゆる子パソコンだけ見て確認OKはダメ、スマホ表示も要確認！初歩的なことを忘れていました
デザインが崩れるなら、崩れないCSSを書けばいいのでは？
「AIに頼れば、2行対応のリボン見出し作れるかも！」
根拠はありませんでしたが、出来るかもと思ってしまったんです。
AIとのやりとりを一部お見せすると・・
自分でも検索してみたり、AIに理想系を指示してみたりしています。」
コードの修正を繰り返して・・
挙げ句の果てには、リボン見出し崩れまくりになりました（笑）
しまいにはサイト内の別の表示がおかしくなったので、全てをストップすることになりました。
結論：見出しが2行以上になるならリボンデザインは諦めよう
今の私にはムリなのだろう。そして、そもそも私が求める理想は現実的にムリなのか・・
それすらわからない状況です。リボン見出しは諦めることにしました。
悔しいけど、違う見出しでもブログ自体にはなんの影響もない！
本当は気付いていたけど、ここでやっと踏ん切りがつきました。
長文OKなかわいい見出し
リボンのような特殊なものでなければ、見出しは長文になっても使えるようです。
リボンと一緒に候補に上がっていた、ステッチ見出しを使うことにしました。
ステッチの長さとか太さが気に入らず候補から外したという経緯がありましたが・・
リボン見出しで鍛えられた私なら、ステッチくらい調整できるだろう。
実際のコードを見ると、「ここを直せばいい」がすぐにわかりました！
リボン、頑張ってよかった。
初心者の私には嬉しい成長になりました。
こちらがゆる子好みのステッチ見出しのCSSコードです。
ステッチ見出しCSSコード
リボン見出しと同様、見出しの色や文字色は3〜5行目で指定してあげてくださいね。
（3行目と4行目はどちらも背景の色を入れます。）
また、10行目〜13行目の値を変更することで、ステッチの太さと長さを変えることができます。
ぜひ自分好みを見つけてみてください。
line-color: #ffffff; ここで線の色を変えられます。
line-length: 7px; ここでステッチの実線の長さを調整できます。
gap-length: 3px; ここでステッチの隙間の長さを調整できます。
line-thickness: 1px; ここでステッチの線の太さを変えられます。
こだわりすぎないのも、カスタマイズの大事な判断
リボン見出しは、今でも「使えたらかわいいな」と思っています。
でも今回のカスタマイズで学んだのは、できないことより今やるべきことを見極める大切さでした。
ブログは見出しデザインが完璧じゃなくても前に進めます。
代わりになるデザインはいくらでもあるし、今の自分に扱えるものを選ぶのも立派な判断です。
今回のリボン見出しのおかげで、CSSコードの読み方や、数値調整の感覚も少しですがつかめたように思えます。
ゆる子ステッチ見出しを自分好みに調整できたのは大きな収穫でした！
カスタマイズは頑張りすぎなくていい。沼ったら一度引き返して別ルートを探すのもあり。
そんなことを実感した、ゆる子の試行錯誤記録でした。
実はこの記事を書いている途中で、「2行以上でも崩れないリボン見出し」の解説サイトを見つけました。
ただ今回は、なぜ一度諦めたのか、どこで沼ったのかを残しておきたかったので、解決編は別記事にまとめることにします。
コメント