カテゴリー: 花の湯館

グローバルサインやデジサートの　SSL更新手続き　＆　申請担当者情報について

申込する前に、管理画面のお客様情報の編集から、一時的に連絡先メールを私のメールアドレスに変更すること。SSLの申込後のメールが連絡先メールに登録されているメールに来るから。SSLが設定されたらば元に戻す。

申込は継続ならばすんなりいく。新規ならば確認のやり取りが発生する。

 

 

担当者情報を変更した。ゆくりえやarisawagroup.jpの更新時の申請担当者情報の変更。SuiteXからの解答↓

 

申込完了メールをこちらで受けたかったので入力担当者を私にしたが、完了画面にて　Step4.「お客様情報の入力」で以下の”申請担当者情報”を変更された場合は □ご担当者（ご契約者様） □連絡先メールアドレス 必ずメニュー画面より「契約者情報の変更」で情報を更新してください。とメッセージが出た

 

問い合わせたところ

証明書のご申請の際に入力のいただく担当者情報につきましては、証明書に関する担当者情報の入力になりますので、ご契約情報とは別になりますね。 ご契約情報につきましては、今まで通りになりますのでご安心ください。

 

とのこと。大丈夫

ゆくりえ　SSLが効かず、この接続ではプライバシーが保護されませんと　急にプライバシーエラーになった

ゆくりえが急にプライバシーエラーになった

サーバー、ドメイン契約はOK.　サーバー内にも変な物はない。SuiteXに尋ねると、SSLの更新手続きしていないからではと返答。

更新手続きした。

 

復旧には7営業日ぐらい審査の為にかかると返答。

 

その際、申込完了メールをこちらで受けたかったので入力担当者を私にしたが、完了画面にて　Step4.「お客様情報の入力」で以下の”申請担当者情報”を変更された場合は □ご担当者（ご契約者様） □連絡先メールアドレス 必ずメニュー画面より「契約者情報の変更」で情報を更新してください。とメッセージが出た

 

問い合わせたところ

証明書のご申請の際に入力のいただく担当者情報につきましては、証明書に関する担当者情報の入力になりますので、ご契約情報とは別になりますね。 ご契約情報につきましては、今まで通りになりますのでご安心ください。

 

とのこと。

 

PS　ヨガ、テニス、コーポレートサイトのSSL更新も近いので、こちらで行った。証明書発行後30日後から、更新手続きはできるらしい。

上下左右中央揃え　css

https://www.granfairs.com/blog/staff/centering-by-css

↓これでOK　new-igarashi

vertical-align: middle;

vertical-align: middle

内容量よりも高さのあるブロックにおいて、中身を上下中央寄せにしたいときはvertical-alignの出番です。

 

.outer{ display: table; width: 100%; }

.inner{ display: table-cell;   
               vertical-align: middle;
                text-align:center;}

 

「vertical-align」が使えるのはインライン要素・テーブルセルのどちらかなので、上下中央寄せにしたいテキストを内包する要素にdisplay: table-cell;を指定します。

innerにtext

例えば、下図のような「横に並んだ」「高さの異なる複数の要素」を中央に揃えたいというシーンで有効な方法です。

横に並んだ高さの異なる要素で、高さを揃えて中身を中央寄せに

 

↓だとwidthの幅が50％しか取れないから内容量が多ければ↑のほうにする。

花の湯館　新名称 new-name.html

html

<div class=”row justify-content-center header-back “>

<div class=”col-10 col-sm-8 text-center read01″><img src=”image/new-name/item1.png” class=”mx-auto img-fluid” alt=”新名称が決定しました。4月1日より「長八温泉 花の湯館」は「まちなか天然温泉 ゆくりえ」へ
“/></div>

</div>

 

css

.new-name .header-back {
background-color: #72D3E7;
text-align: center;
vertical-align: middle;
/*要素縦横を中央ぞろえに↓*/
position: relative;
height: 500px;
}

.new-name .read01{
/*要素縦横を中央ぞろえに↓*/
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);

}

 

transform

transform

ブロック自体の上下左右中央寄せ2つ目、transform。

.outer{
  position: relative;
}
.inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

これは中央寄せする要素の左上を起点として上から50%（top: 50%;）・左から50%（left: 50%;）の位置に移動させ、要素の大きさの半分ずつを戻す（translate）、という動きをしています。

transformで中央寄せになる仕組み

一部プレフィックス指定が必要なブラウザもありますが、挙動もわかりやすく、幅・高さ指定が必須ではないので汎用的に使いやすい方法といえると思います。

※ 対応ブラウザはCan I useを参照。
Can I use… Support tables for HTML5, CSS3, etc

募集応募締め切り　レイヤーを重ねる

http://cm-creation.net/yoshida/toyamaonsen.jp/special/sp001.html

花の湯館　　名称募集の締め

ｃｓｓ

.closeinfo img{position: absolute;
z-index: 20;
width:100%;
height: auto;
top:1;
left: 0;
right: 0;
bottom: 1;
margin: auto;}

 

 

html

 

おおもとの該当コンテナにスタイルを追加

style=”position: relative”

※なかなかrelativeにならないので、追加箇所はトライ＆エラーで挿入箇所は見つける

 

<div class=”col-xs-12 closeinfo”>
<img src=”../image/special/info.png” class=”img-responsive center-block” alt=””/>
</div>

Google インデックス　時間が掛かった

花の湯館　はもともと他の会社が作っており、新規でこちらで作ってアップしたサイトなのだが、既存のサイトへの外部リンクが他のユーザーによって張られてあったり、個人が花の湯館を紹介しているページががたくさんあったのでインデックス化された当時は7ページぐらいに表示されていた。

必要最低限のSEO対策はしたし、外部リンクで紹介しているサイトへURLの変更を数件お願いしたが全然屋号でも上位に来ない。古いサイト先からはリダイレクトで新サイトへ転送をお願いしており何とかアクセスは稼いでいたがそのような状況が2ケ月続いた。その間は7ページぐらいに表示。google search consoleからも何度かクローリング要求を出していたが表示位置は変わらなかったが、3か月目ごろから急に1ページ目の3件目ぐらいに屋号でも表示されるようになった。　リダイレクトによるアクセス数でようやく成果が表れたのだろうか？とにかく時間が掛かった。

bootstrap ブートストラップテーブルのストライピング：ストライプの背景色を変更するにはどうすればよいですか？

花の湯　キャンペーン　special/sp001.htmlで実装

https://code.i-harness.com/ja-jp/q/13dc47b

ブートストラップを読み込んだ後、次のCSSスタイルを追加します。

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: red; // Choose your own color here
 }

analytics アカウントとプロパティーの削除

権限を付帯されたゲストアカウントからはできない。アナリティクスを作ったホストアカウントユーザーのみが可能

http://blog.chiyopen.com/google-analytics-account-del/

削除後35日後に管理画面から無くなるっぽい。それまでは打ち消し線でひょうじされてしまう。

センティアグループ内に花の湯館のアカウント作ったがmoatにみられたくないのでグループ内から花の湯館を削除したが打ち消し線でひょうじされているから。

レイアウトが崩れる　internet explorer　IE cardとかflexとか

IE11

モダンブラウザーは問題ないがIEのみbootstrap4のcardのレイアウトが崩れる。加増もコンテンツ幅に合わせて縮小されない！bootstrap4をサポートしていない要素がある模様。花の湯館と田中石材のコンテンツに問題がでた。

containerで内容されているにもかかわらず、該当要素の手前に別な要素があるとレイアウト崩れを起こすようだ。IE対策として、card使うときは要素ごとにcontainerでくくったほうが良い。 

田中石材でもなったが、全体のcontainerにくるまっていればきちんとひょうじされた。

※d-flexやcard　の直前にcontainerをいれないとレイアウトが崩れるのでcontainerをいれる事。

※↓の状況の時は、containerの直後にはrowは入れない。入れるとレイアウト崩れる

例：new-sanetsu/goods/

<div class=”container”>
<div class=”d-flex align-items-stretch card-deck ” >

<div class=”offset-sm-3 col-sm-6 mb-4″ >
<a href=”#” >
<div class=”card mb-4 d-block” >
<figure><img src=”../n-image/qa/item1.jpg” class=”card-img-top img-fluid d-block mx-auto h-100″ alt=””/></figure>
<div class=”card-body”>

<p class=”card-text”>特定の時期・季節を中心に販売される季節商品もご用意しております。雛人形や五月人形、正月飾りなど、季節ごとの様々なイベント用商品を取り揃えております。
こんなイベントには、どのようなギフトを用意すればいいかわからない等のお悩みありましたら、お気軽にサンエツまでご相談ください！</p>
<span class=”badge btnGoods text-center w-100″ style=”padding:5px; font-size:120%;”>見る</span>
</div>
</div>
</a>
</div>

</div>
</div>

 

また、ネストされている要素があるばあいもcontainerでくくらないと崩れる

例　new-sanetsu/company

<div class=”container“>
<div class=”row”>
<div class=”col-sm-4 text-center mb-3″>
<img src=”../n-image/company/itagawa.jpg” class=”img-fluid mx-auto mb-2  ” alt=””/>
<small>株式会社サンエツ<br>代表取締役　板川信夫</small>
</div>

<div class=”col-sm-8 px-4 text-left”>
<p>「ギフトを通して、人と人との心をつなぎ、社会生活をより豊かによりスムーズにするために努力をし、地域社会の発展に貢献をいたします。」を経営理念とし、会社運営に取り組んでまいりました。</p>
<p>お陰さまで創業46年を迎えました。</p>
<p>「ギフトを通して、人と人との心をつなぎ、社会生活をより豊かによりスムーズにするために努力をし、地域社会の発展に貢献をいたします。」を経営理念とし、会社運営に取り組んでまいりました。お陰さまで創業46年を迎えました。</p>
<p>これを機に、更なる皆様のご期待に添えますよう、全店にてお品を販売するだけではなく、お品をお求めの元となる「行事」や「人付き合い」がうまくいきますよう、全力でご相談にのらせていただきます。</p>
<p>そして、日本一親切な会社を目指します。</p>
<p>今後とも御指導、御鞭撻の程、何卒よろしくお願い申し上げます。</p>
</div>

</div>
</div>

 

画像が伸縮されずに縦に長く表示される件の解決策は

【bootstrap4】ie11でcard-img-topクラスの画像が縦に伸びる

Internet Explore11かbootstrap4のバグのようです。
https://github.com/twbs/bootstrap/issues/21885
こちらのサイトの投稿を参考にして２つ試してみました。

対応１）h-100クラスをimgタグに追加

↓これいらないかも


<div class="card">
   <img class="card-img-top h-100" src="" alt="">

 

↓こっちで対応OK

対応２）d-blockクラスをcardクラスに追加


<div class="card d-block">
<img class="card-img-top" src="" alt="">

どちらも正常に表示されるようになりました！

メーラー開くたびにサーバー証明書求められる。　outlook toyamaonsen.jp

花の湯館　SSL契約したら該当メールアカウントがメーラーを開くたびにサーバー証明書のインストールを求めてくるようになったので、サービスに問い合わせた。回答がきたが、回答通りに設定する前に、通常設定をもう一度行ったら設定できたことからサービス側で不手際があり設定がされずに問題が起こっていたたのだと思う。

暗号化メールした場合のみ回答方法に従えばよいが現状は不要と判断する。

 

質問

御社のサーバーを使用しています。先日そちらのSSLサービスに契約したの

ですが、SuiteXの管理画面からメールアカウントを作成してメーラー（

outlook）に登録したところ、そのアカウントに対して毎回　「接続し

 ているサーバーは確認できないセキュリティー証明書を使用しています。対象

 プリンシパル名が間違っています。」とでます。ポップアップ画面に証明書を

 表示させると発行先が dc73.etius.jp  発行者が　Glob

alSign Domain Validation CA-SHA256-

 G2　と表示されるのでSSL契約に関しての何かしら関連しているのではと

 思いましてお聞きします。何か追加設定が必要でしょうか？SSL契約時にW

 ebARENAからは　サーバーへのSSL設定が完了した旨のメールは来た

のですが特段こちらでは何の設定もしていないので何か設定しなければならな

いことがあるのでしょうか？よろしくお願いします。

 

 

回答

 

平素はWebARENA SuiteXをご利用くださいまして誠にありがとうございます。

テクニカルサポートセンター担当の宇津木でございます。

 

インフォメーションセンター宛にお送りくださいましたお問合せにつきまして、

テクニカルサポートから回答させていただきます。

 

メールソフトのSSL通信を行うためには、収容サーバーのSSL証明書を利用する

必要がございます。

ご利用のメールソフトの設定をご確認いただき、

送信/受信サーバーには「dc73.etius.jp」を設定くださいますようお願い申し上げます。

また、アカウント名にはご利用のメールアドレスを設定ください。

 

メールの設定情報につきましては下記のオンラインマニュアルに記載がございますので、

こちらの「暗号化あり」の部分をご参照ください。

https://web.arena.ne.jp/support/suitex/manual/mail/instruction.html

Google Search Console　所有者の確認ができない。

httpsの花の湯館のwwwありとなしを追加して、なしにするためにwwwのほうを設定しようとしたが、所有者の確認がどうやってもできない！

”おすすめの方法”ではなく、”別の方法”のほうでHTMLタグの方法をつかったら確認ができたが、こんどはどちらも

使用するドメインを設定する場合は、http://toyamaonsen.jp/ の所有権を確認してください。http://toyamaonsen.jp/ を確認してください。

http://www.toyamaonsen.jp/ の所有権を確認してください。http://www.toyamaonsen.jp/ を確認してください。

とサイトの設定に出てwwwなしを選ぶことができない状態！

 

なんとこれは、

http://
http://www
https://
https://www

の四つを登録する必要があった！ 

HTMLタグで全部認証したのちに、wwwなしをサイトの設定から選んだらできた。気づくのに3時間かかった！！　下記サイト参照　できた！

Google Search Consoleでwwwあり・なしの統一が出来ない

HTTPSのサイトの場合

http://○○○.com/
http://www.○○○.com/
https://○○○.com/
https://www.○○○.com/
の4つをGoogle Search Consoleに登録します。

これで、wwwあり・なしのどちらかのURLで統一して正規化する事が可能です。HTTPSのサイトの場合4つのURLを登録しないといけない

 

 

 

wordpressの上部の余白が消えない！

何やってもだめ。静的ページでは大丈夫なのに、wordpressでは余白が入りbodyに敷いている和紙の背景画像がヘッダー上に表示されてしまうので、しかたなく、

該当箇所  header-second.php

<header class=”chousei-margin01 clearfix”>

 

style.css

/*どうやってもヘッダー上の余白が消えず和紙の背景画像が表示されるので、ヘッダー自体上にあげて隠している*/
.chousei-margin01 {
margin-top: -50px;
padding-top:26px;

;
}

 

上記のようにして隠している。