サイト制作のポイント・まとめ（5）事業用サイトのCSSカスタマイズ編

CSSカスタマイズの基本

正直、ここに書いてある内容以外も細かい調整を沢山しているので、どのようにCSSカスタマイズをしているのかを書いた方が良いと思ったので、最初に説明します。

ポイント1「デベロッパーツール」
Chromeなら右クリックで「検証」、Firefoxなら右クリックで「調査」で使用できます。
ショートカットキーもあるから覚えると良いかも！

調べたい要素のところで右クリックで、デベロッパーツールを起動してみてください。
左側に調べたい要素がハイライト表示され、右側にCSSクラスと共にプロパティの設定状況を確認できると思います。
必要な部分をコピーして使ってください。

ポイント2「疑似要素」
目的な要素にハイライトが当たっていないとき、疑似要素でパーツを設置している可能性があります。デベロッパーツールの左側、横向きの「▼」をクリックして開くなどで「::after」「::before」を探してみてください。クリックすると右側にプロパティの設定状況が表示されます。

ポイント3「:hov」
これでホバー（:hover）時の設定を確認することができます。他にも色々と用意されているので見てみるといいかもしれません。

ファイルにCSSを追加するのが面倒なときは、「.cls」「+」をクリックしてみてください。自由にCSSクラスを追加することができます。

余談。
左側のHTML編集でCSSクラスを追加して、右側でCSSクラスの設定を記述することで、ファイルを直接編集することなく作業ができますよ！

今後、CSSカスタマイズをしていく上で覚えておくと便利なので、試してみてね！

CSSカスタマイズ方法まとめ

(注)ここで掲載しているサンプルは既にCSSカスタマイズしていて、標準のSWELLの表示とは異なっている可能性があります。

ボタンの色を変えたり、線を変えたり、色を反転させてみたり、「分かりやすさ」を優先して色々カスタマイズしているので、「ここってどうしているの？」というのがあったら、Twitterやお問い合わせフォームでお問い合わせください！

CSSカスタマイズ方法メニュー

リンクボタンに「→」をつける

個人的に、SWELLでボタンリンクで、リンク要素だと分かりやすいのは、
SWELLボタンの「MOREボタン」だと思っています。

この矢印の動きが分かりやすいよね！

他にも、「ノーマル」や「キラッと」ボタンも、分かりやすいと思います。

でも、立体要素ほぼゼロの事業用サイトで、これらを使ったら、浮いてしまうような気がしてなりません。
というわけで、これらは使っていません。

多分だけど、ページトップに戻るボタンを除いたら、使われているの、ページ右上の「お問い合わせ」ボタンと、必要箇所に設置している「お問い合わせ」ボタンくらいじゃないかな？
(注)ページ途中で必要に応じて設置しているお問い合わせボタンはキラッとボタンを使っています。

そして、目立たせたいときは、「ボックスメニュー」を使っています。

スタイルが「塗り」の方がハッキリしていて分かりやすいから、塗りを意識的に使って、重要度の低いものはデフォルト（標準）を使っています。

ここまで読むと何かに気づきませんか？

そうです。「MORE」ボタン以外に「→」がついていないのです。

リンクで移動する要素のホバー演出に、何故「→」がついていないのか。
ページ内リンクなら「↓」でも良いのかもしれないけれど、MOREボタン同様「→」がついていた方が分かりやすいのでは？と考えた次第。

早速、以下のコードを追加しました。

プラグイン内にCSSファイルを追加し、タイトルは「SWELL公式の設定上書き用」で内部読み込みにしています。自分が分かる名前をつけてね！

「あ。ページ内リンクは『↓』の方が分かりやすいよね」と思ったので、このタイミングで反映作業をしていました。バージョンアップの影響を受けやすいともいえるので、強いこだわりがない限りは何もしない方が良いと思います。数値は文字被りを発見次第、環境に合わせて調整対応しています。

.swell-block-box-menu__item.has-link { position: relative; }
.swell-block-box-menu__item.has-link::after {
  position: absolute;
  bottom: -0.25em; right: calc(0.25em + 8px);
  content: "\e930";
  font-family: icomoon; font-size: 1.6em;
  transition: transform .25s;
}
.swell-block-box-menu__item.has-link:hover
:not(.p-toc__link):not(.p-postList__link):not(.swell-block-button__link):not(.p-blogCard__title)::after {
  transform: translateX(8px);
}

/* ページ内リンク用（矢印が↓） */
.jumplink .swell-block-box-menu__item.has-link::after { bottom: 0.25em; transform: rotate(90deg); }
.jumplink .swell-block-box-menu__item.has-link:hover
:not(.p-toc__link):not(.p-postList__link):not(.swell-block-button__link):not(.p-blogCard__title)::after {
  transform: translateY(8px) rotate(90deg);
}

これで、主に使っているリンクボタンには同様に「→」または「↓」が付与されます。

実際はくっついているのですが、読みづらいと思ったので、hoverとnotを意図的に改行しています。
もし動かない場合は、コピーアンドペーストした後、くっつけてみてください。