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

今回は、WordPressおよびWordPressテーマ「SWELL(制作者:株式会社LOOS)」で事業用サイトを作るとき、気になった部分、デザイン統一を目的に、独自でCSSをカスタマイズした内容についてです。参考になりましたら幸いです。

「Simple Custom CSS and JS」というプラグインを利用して対応しています。
ページ内でしか使わないときはSWELLの固定ページ・投稿ページ内の「カスタムCSS & JS」の「CSS用コード」内に記述するようにしています。

当サイトは、アフィリエイトプログラム(もしもアフィリエイト、A8.net)とアフィリエイトプログラムサービス(EaseUSアフィリエイトプログラム)に参加しており、アフィリエイト広告(Amazonアソシエイト、楽天アフィリエイトを含む)を掲載しています。そのため、当記事内で広告リンク(アフィリエイト広告リンク)を貼っていますが、記事内容は公平さを心がけております。

目次

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を意図的に改行しています。
もし動かない場合は、コピーアンドペーストした後、くっつけてみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

サイト運営者

クリエイトアコード

ホームページのリニューアル/改善・SEO対策・Web集客のお手伝い屋さん【Web技術サポーター&Webコンテンツサポーター】

ソフトウェア&ゲーム開発会社でプランナーとして従事しながら、ディレクション・マネージメント、資料作成の知識を実践形式で学ぶ。その後はリサイクルショップのWebサイト担当者として従事しつつ、SEOやWordPressの実践形式での研究を深めた。転職をした会社や兼業(副業)としての活動でも今までに学んだ知識と技術を活用しながらも更なる向上に努めていたが、様々な人のお悩み解決をしていきたいという思いが強くなったため、転職から二年後に独立。2022年5月10日に開業して個人事業主になった。
現在は、今までに得た知識や技術(SEO・WordPress・Webマーケティング・Web集客)を活かしながら「人と人を調和し、創造を支援する」「自分で色々動きたいので技術面をサポートしてほしい人や自分も考えたいが技術面については知見がないのでフォローしてもらいたい人を応援する」ことを目的に「訪問者に届けるコンテンツを作る」お手伝いをするための活動をしている。

事業の他、ソフトウェア&ゲーム開発会社時代に無理をした働き方をしたために自律神経のバランスが乱れやすいことや精神的にもダメージを負ったことから「抑うつ状態」と診断されて数年かけて寛解した経験から、同じような人が苦しまずに働くことができるように自身を実験台に「スキルを活用した生活に困らないかつ無理をしない働き方」の確立を目指している。


ご相談・お問い合わせ

ホームページ制作・リニューアル・運用・SEO・Web集客、Webマーケティング・Webサイト制作技術・タスク・スケジュール・プロジェクト管理や業務改善のお悩みなどを遠慮なくご相談ください。

資料ダウンロード

サービスのご利用を社内で検討したい方のために、実績やサービス概要、料金表などのクリエイトアコードの案内資料をPDFでダウンロードすることができます。ご自由にダウンロードください。

目次