Lightningテーマで便利な追加CSS
NEARまずはメディアクエリを使おう
当サイトでは追加CSSを使う際にメディアクエリを使ってマルチデバイス対応をする方法をおすすめしております。良ければ下記のテンプレートをお使いください。
CSSを表示
/*---------------------------------
全デバイス共通設定
---------------------------------*/
/* ここに全デバイス共通CSSを書いてください */
/*---------------------------------
スマホ
---------------------------------*/
@media screen and (max-width:599px) {
/* ここにスマホ用CSSを書いてください */
}
/*---------------------------------
タブレット
---------------------------------*/
@media screen and (min-width: 600px) and (max-width: 959px) {
/* ここにタブレット用CSSを書いてください */
}
/*---------------------------------
デスクトップ(低解像度)
---------------------------------*/
@media screen and (min-width:960px) {
/* ここにデスクトップ(低解像度)用CSSを書いてください */
}
/*---------------------------------
デスクトップ(高解像度)
---------------------------------*/
@media screen and (min-width:1280px) {
/* ここにデスクトップ(高解像度)用CSSを書いてください */
}基本要素
見出し要素の装飾をなしにする
テンプレートっぽさが出てしまう部分なのでこうしました。
CSSを表示
/* テキスト要素 > 装飾をオフに */
h2,
h3,
h4,
h5,
h3:before,
h3:after {
border: none;
background: none;
padding-left: 0;
}テーブル要素の見た目を調節
通常だと斜体(イタリック)なので、それを整えました。
CSSを表示
/* テーブル要素の書体をノーマルに */
table {
font-style: normal;
}
/* TH要素を左寄せ */
th {
text-align: left;
}スマホ向け:ハンバーガーボタンの位置調整
スマホ表示時、横長のロゴ画像を使うとヘッダー領域が広がってしまい、デフォルトではややハンバーガーボタンが左上に詰まっているので余白を追加しました。それに伴ってメニュー内の余白も調整しています。ボタンを右に置く場合は、プロパティのleftをrightに変更してください。
CSSを表示
/* ナビゲーションバー > ハンバーガーボタン位置を外面あわせ */
.vk-mobile-nav-menu-btn {
top: 15px;
left: 15px;
}
/* ナビゲーションバー > メニュー内の余白調節 */
.vk-mobile-nav {
padding: 70px 15px;
}スマホ向け:検索ボックス(ナビゲーションバー)の検索ボタンを虫眼鏡アイコンに変更
CSSを表示
/* スマホ用検索ボックスをアイコンのみに変更 */
.vk-mobile-nav-widget #searchform {
position: relative;
}
.vk-mobile-nav-widget #searchform:before {
position: absolute;
content: '\f002';
font-family: fontawesome;
top: 13px;
left: 12px;
}
.vk-mobile-nav-widget #s {
padding-left: 32px;
}
.vk-mobile-nav-widget #searchsubmit {
display: none;
}デスクトップ向け:サブメニューの角丸設定
デフォルトでサブメニューは角がまっすぐの四角形なので、必要に応じて丸くできます。また、最後のメニュー下部の枠線は非表示にしています。
CSSを表示
/* ナビゲーションバーのサブメニューの角丸設定 */
.vk-menu-acc ul.sub-menu {
border-radius: 8px;
}
/* ナビゲーションバーのサブメニューの角丸設定 > 最後のメニュー下部の枠線を非表示に */
.vk-menu-acc ul.sub-menu li:last-child a {
border-bottom: none;
}高解像度ディスプレイ向け:コンテンツ幅を調整する設定
高解像度だと左右の余白が広く、狭く感じるかもしれません。そんな時にお役立てください。
パーセンテージなどは適宜微調整してください。
CSSを表示
@media screen and (min-width:1280px) {
/* コンテナ幅を90%に設定 */
.container {
max-width: 90%;
}
/* コンテナ幅（メイン部分）の幅を調整 */
:root {
--vk-width-container: 100%;
}
}VKフローの外観を変更
外枠の見た目を変更
VKフローの枠の見た目を調節しています。枠線なし、ボックスシャドウ、角丸設定を入れています。
CSSを表示
/* VKフローの外観を変更 */
.vk_flow_frame {
border: none !important;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}スマホ用CSSで列落ちを防止
画像は幅調整をしておかないと列落ちしてしまいます。
そこでスマホ用のCSSにて、こんな設定を入れました。画像サイズを小さくすれば右側にちゃんと収まります。
ただしこの設定を入れると、画像がない場合に不自然な余白ができてしまうので、必ずすべて画像を入れる必要があります。
CSSを表示
/* VKフローに使用する画像用の枠 */
.vk_flow_frame_image {
width: 38px;
}パンくずの見た目を調整
パンくずリストをカスタマイズしたいときの為の設定です。必要に応じて使ってください。
パンくずリストの下線を消去
CSSを表示
/* パンくず > 下線を消去 */
.breadcrumb {
border-bottom: none;
}
/* パンくず > リンク下線を消去 */
.breadcrumb-list li a{
text-decoration:none;
}ホームの文字列を消して家記号のみに変更
CSSを表示
/* パンくず > ホームを家記号のみに変更 */
.breadcrumb-list li i {
margin: 0;
}
/* パンくず > 1つ目の文字列を非表示 */
.breadcrumb-list li:first-child span {
display: none;
}区切り記号のカスタマイズ
「>」マーク
CSSを表示
/* パンくず > 区切り記号を「>」マークに変更 */
.breadcrumb-list li:after {
content: '\003E';
}「→」マーク
CSSを表示
/* パンくず > 区切り記号を「→」マークに変更 */
.breadcrumb-list li:after {
content: '\2192';
}FontAwesomeを使って区切る方法
contentの値は、好みに応じて公式ページから拾ってきてください。
CSSを表示
/* パンくず > 区切り記号をFontAwesomeに変更 */
.breadcrumb-list li:after {
content: '\f105';
font-family: fontawesome;
color: #333;
}Follow me!
