[うなこ]

> こちらの添付画像で丸印したエリアは、どの機能で入れたものでしょうか？
→これはウィジェットの「Media Posts ウィジェット」ですね。
https://lightning.nagoya/ja/expansion/lightning-pro/media-posts

> 逆に自分では使いにくい部分は、ヘッダーのスライドショーの縦サイズがFORTの倍くらい大きいので、そこに最適な画像を自分で作れるかなあ？です。
→スライドショーの画像の縦の長さは画像によって変わるのでスキン固有ではないと思います。

Pale独自の設定を使用されたいなら購入されてもいいとは思いますが（背景テクスチャ・ヘッダーナビアイコンなど）、私的にも企業サイトならFORTの方が向いてるかなと思います！

[うなこ]

テストサイトありがとうございます、以下のcssでいかがでしょうか？
追加cssなどに張り付けてください。

.siteContent .btn-default {
    border: 2px solid rgba(255,255,255,.5);
    background-color: #337ab7;
    color: #fff;
}
.siteContent .btn-default:after {
    border: 1px solid rgba(255,255,255,.5);
}

.siteContent .btn-default:hover {
    border: 2px solid #337ab7 !important;
    color: #337ab7;
    background:#fff;
}
.siteContent .btn-default:focus:after, 
.siteContent .btn-default:hover:after {
    border: 1px solid #337ab7;
}

もともとテーマ内に記述してあるcssの「.siteContent .btn-default」が付いているクラスが優先されてしまう箇所がありましたので、「.siteContent .btn-default」にして記述しました。
.siteContent内の.btn-defaultに効くようになっていると思います。

いかがでしょうか？

• この返信は4年、 6ヶ月前にうなこが編集しました。

[うなこ]

「最初の表示になるようなボタン」というのは、どこの表示のことなのかが分からなかったのですが、
以下の解釈で回答します。

JPNSTYLEのデザインスキンで「btn-default」のクラスを使用してボタンを作成していて
ボタンのボーダー色やボタンの色をキーカラーではなく自分で変更するcssが書きたい。
※#〇〇〇と#△△△の部分はお好きなカラーコードを入れてください。

.btn-default {
    border-color: #〇〇〇;
    color: #f00;
}
.btn-default:after {
    border-color: #〇〇〇 !important;
}

/*フォーカス時マウスオーバー時*/
.btn-default:focus,
.btn-default:hover {
    background-color: #△△△;
}

もし質問の意図が違っていましたら、ごめんなさい…。

画像や、差し支えなければURLを貼って質問されるとわかりやすいかもしれません。

[うなこ]

iPhoneはSEですか？

以下のcssを追加すると幅が320px以下でフォントが小さくなります。
26pxはお好みで変更してください。
いかがでしょうか？

@media screen and (max-width: 320px)
.veu_contact .contact_txt_tel {
    font-size: 26px;
}

[うなこ]

【cssでの簡単な解決方法】
以下を追加cssなどに記述したら、VK最新記事ウィジェットのaタグはクリックできなくなると思います。
※aタグが消えるわけではないのでソースコードにはaタグが残っています。

.veu_postList .postList a {
    pointer-events: none;
}

• この返信は4年、 6ヶ月前にうなこが編集しました。
• この返信は4年、 6ヶ月前にうなこが編集しました。

[うなこ]

小林さん　こんばんは！

OS Safariで固定（background-attachment: fixed;）が効かないみたいですね…
実機でみたら固定されていませんね。。。

以前ご案内したサイトのbefore要素を使って実装する方法を試してみました。
background:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう

↓こんな感じでいかがでしょうか？
[注意]画像のURLのところだけ実際の画像のURLにかえてください。（http://○○○○.jpgの部分）

★max-width: 1024px　でタブレットサイズから適応されるようになっています。
★height: 100vh;　で要素の高さ100％になっています。好みで数字を変えていただいても大丈夫です。

@media (max-width: 1024px){
.vk_outer-bgPosition-fixed::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),url(http://○○○○.jpg) no-repeat right center;
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  transform: translateZ(0);
}

.vk_outer-bgPosition-fixed {
    background:none !important;
}
}

[うなこ]

小林さん

この背景画像を右揃えにしてスマホで見た時も固定にしたい、ということですね。
ちょっと今からですと時間がないので明日みてみますね。

[うなこ]

小林さん
もしかしたら私のコピペミスかもしれません…
以下のcssでいかがでしょうか？

@media (max-width: 767px){
.vk_outer-bgPosition-fixed{
    background-attachment: unset !important;
}
}

> 画像のデザインが右寄りなので画像の右側が残ればある程度見れるようになると思います
背景画像を右寄りにするにはbackground-positionで指定できます。
上記のcssが効かない場合は以下のcssでいかがでしょうか？
（right centerは右寄りの上下に中央ぞろえという意味です。background-positionで検索してみると、
使い方がでてくると思います）

@media (max-width: 767px){
.vk_outer-bgPosition-fixed{
	background-position: right center !important;
}
}

[うなこ]

解決策ではないのですが…

調べてみたらcssの
background-attachment:fixed;とbackground-size: cover;を同時に使うと効かなくなるようです。
background:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう

こちらの記事に紹介されているbefore要素で高さを固定のpx指定にすれば、なんとかできそうな気はしますが、
ちょっと高さが固定しなくてはいけなかったりと…スマートではないので…
スマホサイズのみ、背景固定の指定をunsetしてみる方法でいかがでしょうか…？
追加cssなどに以下のcssを貼ってみて下さい。

@media (max-width: 767px){
.vk_outer-bgPosition-fixed{
background-attachment:unset !important;
}
}

確かにスマホサイズの画像が設置できればいいのかもしれませんね
解決策ではなくてすみません…💦

• この返信は4年、 6ヶ月前にうなこが編集しました。

[うなこ]

sa-koiさん

> しかしVK最新情報ウィジェットはこれでよいでしょうか？
はい、それでよいと思います。
あとは表示形式を「サムネイル画像/タイトル/日付」に選択して、表示したい記事タイプを設定して保存すれば、デモサイトのような見え方になると思います。

[うなこ]

スキンがvarietyでしたね…失礼しました…
おそらくこれで消えると思いますが、いかがでしょうか？
.page .mainSection header{display:none;}

あと、タイトルのクラス名など調べる方法は、デベロッパーツール（検証機能）で調べられます。
わたしの場合はブラウザがChromeを使用しているので、調べ方としてはこの記事が参考になります。
https://saruwakakun.com/html-css/basic/chrome-dev-tool
ご利用のブラウザのデベロッパーツールの使い方を調べてみると出てくると思います！

[うなこ]

デモサイトのデータをダウンロードしたいと言うことですよね？
こちらからダウンロード方法など書いてあります。読んでみてください。

Lightning クイックスタート

※インポートするときの注意点は、全部デモデータに差し変わりますので、必要に応じて現在のサイトのバックアップなどとって下さい。

[うなこ]

固定ページのタイトルを非表示　とのことで…
こんな感じのcssでどうでしょうか？？違いますか？？

h1.page-header_pageTitle:first-child{
display: none;
}

[うなこ]

> VK_ボタン ウィジェットで設定したボタンを、Paleのヘッダー部に
> 挿入するにはどのようにすればよいのでしょうか？
→おそらくVK_ボタンウィジェットはヘッダー部には挿入できないと思います。サイドバーのことを言われているのだと思います。

あと先ほどcssの回答したものですが、こちらの方がいいかもしれません。（fa-envelopeはメールのアイコンのことなので）
.navbar-header .contact_btn .fa-envelope {display:none;}

[うなこ]

こんにちは！
とりあえず非表示にしたいだけなら追加cssやExUnitのcssカスタマイズに以下のcssを追加してください。
.navbar-header .contact_btn .far {display:none;}

[投稿者]

投稿