登録日
2018年5月6日

メンバー検索

  

Jun1chi

名前(ニックネーム)
Yamachann11
ホームページ
http://www8.plala.or.jp/a_ITC
自己紹介
5.6.0.2 & 8.4.4のユーザです。 ➡ 8.5.4(2020/06/11)
普段は、お客様のIT化支援を行っています。ITC(ITコーディネータ)です。

Webサイトは、MindMapとHTML+CSSで3か月かけてゴリゴリに作ったのが最初(2009年)です。


concrete5との出会いは2015/04ですが、ずっと5.6.0.2ベースのサードパーティのものです。



8.3.2の新しいconcrete5の書籍(concrete5導入とサイト制作の教科書)を買って(2018/06)読み

新サイト構築(2018/07)しました。


コミュニティーのサポートが素晴らしい。「コミュニティー」最高です。
(自分が解決できない問題は、コミュニティーに頼っています。)


localに開発環境の構築(MAMP)もできました。
(デプロイは(Windows → Linuxで)失敗。 
 原因は、
  Windows(MAMP)側で、
 「lower_case_table_namesの設定を”2”に(テーブル名の大文字小文字を区別する)設定する。」を怠った為です。

 再度mysqlのmy.iniを設定し直し上手く行ったのですが、
この辺りは教科書に載っていなかった様な?・・・これで1度ハマり中々抜け出せなかったので、ここに備忘録代わりに記載しています。)


MAMP側の解決方法が暫く判らなかったので、
ホスティングサーバー(Linux側)で、localhostのページを見ながら、直接・編集&公開


version8.3.2から始めて、8.4.0、8.4.3、8.4.4へバージョンアップしました。

逆パターン: Linux(ホスティングサーバー) → Windows(MAMP) では、未だ上手く行っていません。
(鋭意努力中(笑)ですが、・・・中々・・・)

皆さま、宜しくお願いします。
concrete5.org のユーザー名
jun1chi
concrete5 Slack Team ID
Twitterアカウント
@jun1Naka
フォーラム総投稿数
110

コミュニティバッジ

投稿

1から10までを表示 (計110)

Re: Re: Re: パソコン表示のHeader Site Titleの白い枠線を非表示にし、Header Navigationを表示に戻したい

お世話様です。

変更箇所が分かりましたので、報告と情報共有です。
ちなみに、ローカルの開発環境(MAMP、Stucco バージョン 2.1.5)です。

まずは
<div class="header-logo col-xs-9">
に適用されている下記cssを外します(添付画像1.jpg)。
background: rgba(0,0,0,0.3);
border: solid 2px #fff;
↑は、
C:\MAMP\htdocs\stucco\packages\theme_stucco\themes\stucco\css\build\front-page.less

front-page.less 182Line 183Line
182 background: rgba(0,0,0,0.3);
183 border: solid 2px #fff;
です。(こちらの変更を漏らしていました。)



"header-logo col-xs-9"は、見つけることができず(header_home.phpの 12line から始まる記述に<div class="header-logo col-xs-9">の定義がありました。)



その上で子要素<p>の中にある
<a href="http://localhost:8888/index.php">Stucco</a>
に適用されている下記cssを外します(添付画像2.jpg)。
outline: 2px solid;
outline-color: #fff;
outline-offset: 0;
↑は、
C:\MAMP\htdocs\stucco\packages\theme_stucco\themes\stucco\css\build\front-page.less

front-page.less 197Line 198Line 199Line
197 outline: 2px solid;
198 outline-color: #fff;
199 outline-offset: 0;
です(こちらのみの変更で済ませていた為、上手くなかった様です。)

以上です。

ありがとうございます。

Posted on 2月 13, 2021 at 10:16 午後

Re: パソコン表示のHeader Site Titleの白い枠線を非表示にし、Header Navigationを表示に戻したい

aniya さん

わざわざありがとうございます。

2か所あったんですね!

私は、1ヶ所だけ見つけて、
その部分だけ、ダイナミックに変更・削除してみて
ダメだったのであきらめてしまいっていました。


折角、追跡してくださったので、参考にさせて戴きます。


ありがとうございます。

Posted on 2月 13, 2021 at 8:10 午後

Re: パソコン表示のHeader Site Titleの白い枠線を非表示にし、Header Navigationを表示に戻したい

aniyaさん
再度取り上げて戴いてありがとうございます。

デベロッパーツールの存在は知っていましたが、
該当箇所をポイントしてから、デベロッパーツールを開くと
該当のHTMLやCSSを直接開けることは知らなかったので勉強になりました。
ありがとうございます。

そこで、結論から申し上げますと、
該当箇所のCSSの変更を試みたのですが、
余計な枠線(この場合は下線のみ)を消すことができませんでした。

Grepツールで、デベロッパーツールで表示されたCSS近辺のクラス(.front-page、 .header-logo など)を指定してlessの検索をしてみたのですが、
今のところ、
余計な枠線部分を見つけ切れていません。

とりあえず、余計な枠線を消すことをあきらめて
通常の四角枠と枠内のタイトル表示(デフォルト表示)に戻しました。

他に、情報(ヒント)が無い場合は、このスレッドをクローズして戴いて構いません。

ありがとうございます。

Posted on 2月 13, 2021 at 11:52 午前

Re: パソコン表示のHeader Site Titleの白い枠線を非表示にし、Header Navigationを表示に戻したい

aniya さん


取り上げて戴きありがとうございます。

「HeaderSiteTitleの枠線の残りに下の白線問題」は、
現時点では、2つの観点から、あきらめています。

他の方たちへ「もしかして参考になるかと思い」
長文になってしまいますが、シェアさせて戴きます。



1つ目、
枠線定義は、front-page.lessで指定している様ですが、
(最も他で定義されているかも知れませんが、今のところ見つけ切れていません)

\stucco\packages\theme_stucco\themes\stucco\css\build\front-page.lessの


176Lineから始まる、.header-logo{
を以下の様に変更しています。
 
182Lineを background: rgba(0,0,0,0.3); を 消去
183Lineの border: solid 2px #fff;    を  border: ridge 4px #fff;  変更

border:を消去しなかった理由は、消去しても「下の白線だけが残る為と」

もう一つの理由は、
HeaderSiteTitleのエリアのデザイン編集(デザイン&カスタムテンプレート)の
鉛筆アイコンでの編集でデバイス毎の表示指定が
デバイス・アイコンのクリックで一見グレーアウト(表示無効設定)となって見えていて「保存」しても、
実際の各デバイス(iPhone,iPad,PC)での表示では、無効になったりならなかったり
(原因不明。キャッシュクリアしても状況は変わらず、何度か鉛筆アイコンでの編集で繰り返すと反映される場合もある)

からです。



また、スライダー画像のスライド最大幅の指定は、画像ブロックのオプション指定で出来るのですが、

最大高さの指定が無く

調べてみるとimage-slider.lessでの指定の様です。
C:\MAMP\htdocs\stucco\packages\theme_stucco\themes\stucco\css\build\blocks\image-slider.less

1  .ccm-image-slider-container {
|
19 .rslides li {
20 max-height: 480px;

20Lineで 480pxと指定がありました。

Stuccoのデフォルト画像は、1600×945pxの画像が使われて(16:9と、16:10の間)いて
デフォルトの<h2>や<p>の表示では、スライダー内の文字が小さすぎる点で

当初は、画像に文字埋め込みで行って(1600×945pxや1600×900px、1280*720px)を使っていました
これを、max-height: 480px;のまま、使用した結果が

質問させて戴いたものです。



その後、1024×576pxの画像を作り、max-height: 576px;に設定し
文字は埋め込みではなく、

<p>欄に、HTMLで、直接

<h2 style="color:white; text-shadow: -2px -2px 0 red, 2px -2px 0 red, -2px 2px 0 red, 2px 2px 0 red;"><span style="font-size:26px;"><strong>どうやって医院を探しますか?</strong></span></h2>

<h3 style="color:white; text-shadow: -2px -2px 0 red, 2px -2px 0 red, -2px 2px 0 red, 2px 2px 0 red;"><span style="font-size:22px;"><strong>あなたは、どんな方法でお医者さんを探しますか?</strong></span></h3>

などと書いています。

結果、
スライダー表示では、文字の背景が真っ黒になってしまい背景画像が台無しになってしまいました。

対応は、
image-slider.lessの28Line(元々は空白行)に
28 background: #00000029;

とすることで、半透明にし回避しています。

また、画像は、1152×648pxを用意し、max-height: 648px;に設定しています。

欲を言えば、1280×720pxで、max-height: 720px;にしたいのですが、


WUXGA(1920×1200 16:10)や、FHD(1920×1080 16:9)、(2048×1152 4:2.25)
では、スライダー画像だけで画面を占めて仕舞い、最下段にグローバルナビが表示される事になるので

1152×648px画像で、max-height: 648px;に設定しています。

(Topページは(全面画像で、最下段にグローバルナビが表示されるサイトも良く見かけるのですが、)
一般的な物なのでしょうか?)

以上よろしくお願いいたします。

Posted on 1月 22, 2021 at 11:13 午前

Re: concrete5 v8.5.4サイトでGIFアニメ再生について教えてください。

aniya さん Katz さん 

取り上げて戴きありがとうございます。

GIFアニメ(3.1MB)の方は、別の質問で上げた「HeaderSiteTitleの枠線の残りに下の白線問題」が解決できれば、

PageSpeed Insightsの「アニメーション コンテンツでの動画フォーマットの使用」で、改善点にも上げられていますので、GIFアニメの方は、削除する予定です。


(代替は、短いmp4をYoutubeに上げて利用も考えています)

ありがとう

取り上げて戴きありがとうございます。

GIFアニメ(3.1MB)の方は、別の質問で上げた「HeaderSiteTitleの枠線の残りに下の白線問題」が解決できれば、

PageSpeed Insightsの「アニメーション コンテンツでの動画フォーマットの使用」で、改善点にも上げられていますので、GIFアニメの方は、削除する予定です。


(代替は、短いmp4をYoutubeに上げて利用も考えています)

ありがとうございます。

Posted on 1月 22, 2021 at 9:44 午前

パソコン表示のHeader Site Titleの白い枠線を非表示にし、Header Navigationを表示に戻したい

お世話様です。

サイト全体のHeader Site Titleをスマホのみの表示設定にしたら、

パソコン表示では、

「画像スライダーと重なって、サイト全体のHeader Navigationが非表示になり、画像スライダーの画面にHeader Site Titleの白い枠線が残る」

 この白い枠線を非表示にし、Header Navigationは表示したい。

テーマは、Stucco2.1.5を使用させていただいています。Concrete5 V8.5.4

①パソコン表示で、「画像スライダーと重なって、サイト全体のHeader Navigationが非表示になり、
  画像スライダーの画面にHeader Site Titleの白い枠線が残る」

②スマホ表示では、正常(画像スライダーとも重ならず、Header Site TitleもHeader Navigationも表示される)

・画像スライダーは、1280*720の6枚をリサイズなしで設置(各画像にPage LINK URL設置)
・サイト全体のHeader Site Titleは、スマホのみの表示設定
・サイト全体のHeader Site Titleの設定は何も変更していない
・サイト全体のHeader Navigationは何も変更していない

キャッシュのクリアもしましたが、改善されず。

解決策を教えてください。

詳細(図)は添付.pdfをご覧戴きたいと思います。

Posted on 1月 15, 2021 at 11:48 午前

Re: concrete5 v8.5.4サイトでGIFアニメ再生について教えてください。

結論から!

concrete5サイトでは、ピクセル制限があるようです。

最終的には、スマホ(iPhone8Plusサイズ)まで反映させるとなると

横幅640pix以下(リサイズせず実の画像サイズでです)でないとGIFアニメとして動作しません。

Posted on 1月 13, 2021 at 10:14 午前

Re: concrete5 v8.5.4サイトでGIFアニメ再生について教えてください。

デザインブロックテンプレート 指定 例 添付

Posted on 1月 10, 2021 at 4:39 午後

Re: concrete5 v8.5.4サイトでGIFアニメ再生について教えてください。

上記の条件で

スタックに入れたGIFアニメを

本サイトのページに展開しても

問題なくGIFアニメが再生される様になりましたことを報告しておきます。

但し
、iPhoneではChromeでのGIFアニメを再生することが出来ず(safariでも)
iPadでは、縦持ちにした時点でアニメが止まり、横に戻すと、また動き出します。

ちなみに、iPhoneでも
GIFファイルを格納したフォルダ毎のURLでブラウザから開くとGIFアニメとして表示されます。



やはりconcrete5では制約がありそうです。

別の問題ですが、
(スタックの中のデザインブロックテンプレートの指定定義で、
スマホの場合はmp4を再生指定(他はグレーアウト)、
パソコンとタブレットはGIFを指定、
スマホの場合はGIFをグレーアウトの指定をしても)

デバイスごとの表示設定そのものが有効になりません。

他のスタックでデバイスごとの表示設定が、有効になっているものがある
(過去に設定したものは現在も有効:いつのバージョンかは失念)ので、
この設定もバージョンのせいなのか、現在は有効になりません。

(WordPressではレスポンシブに反応し自動的に縮小されてGIFアニメが動きます)

Posted on 1月 10, 2021 at 3:16 午後

Re: concrete5 v8.5.4サイトでGIFアニメ再生について教えてください。

Localテストサイトに様々なサイズのGIFをアップロードし試行錯誤の結果ですが、

横幅1024pixまでなら大丈夫の様です。

16:9なら1024*576まで、

 4:3なら1024*768まで、

これは、あくまでも1カラム(全画面)の場合だけの検証結果ですが。

p.s.
管理画面の画像オプションは特に変更していません。
(デフォルトのままです)

添付: option.PNG
Posted on 1月 10, 2021 at 2:50 午後
« 前1234567...11次 »