「サイトのSSL化とシリウスのH1を非表示にする方法」の巻

「サイトのSSL化とシリウスのH1を非表示にする方法」の巻

「サイトのSSL化とシリウスのH1を非表示にする方法」の巻 2018/4/29

 

サイトをSSL化してみました

 

こんばんわ、BBAです。

 

昨日からGWに突入しましたが、どこにも出かける予定のないBBAはPC作業に取り組んでいます。

 

正直なところ、結果の出ないアフィリエイトに落ち込んでいますが、手を動かさないことには何の進展もないので、気持ちを奮い立たせています。

 

で、今日はサイトのSSL化を実行してみました。

 

「Google様がSSL化されているサイトを上位表示していく」という情報はかなり前から知っていたのですが、なかなか実行できませんでした。

 

おまけに、2018年7月にリリースされるGooglechrome68ではHTTPSになっていないサイトがブラウザで表示されると、「安全なサイトではない」と警告が出るようです。

 

とはいうものの、BBAが実行したのは有料のSSLではなくて、すべて無料のSSLですが・・・・・。

 

無料SSLにはデメリットも色々とあるみたいなのですが。

 

とりあえず、無料のものでしばらく様子をみようと考えています。

 

自分のサイトでURLを確認してみたところ、ちゃんとHTTPSになっていました。

 

ウレシイです。

 

あと、BBAはいつもシリウスというサイト作成ツールを使っています。

 

H1がいつもトップページの左上にデカデカと表示されてしまうことがとても気になっていたのですが、非表示にすることも可能なんですね。

 

調べてみたらBBAでも簡単にシリウスのH1を非表示にすることができました。

 

BBAは最初のころはH1が邪魔で入力していませんでした。

 

が、とても大切なテキストだということを塾で指摘されてから、きちんと入れるようにしています。

 

BBAと同じようにH1が邪魔だと思っている方がいたら、下記の方法を参考にしてみてください。

 

意外と簡単にシリウスのヘッダー左上に表示されるH1タグを非表示にできます。

 

表示はされませんが、ちゃんとデータとしてGooglebot様が読み取ってくれるので、H1の役目はしっかりと果たしてもらえます。

 

シリウスでH1を非表示にする方法

 

@左上の「編集」画面から「スタイルシート」の編集画面を開きます

 

 

黄色い→の部分が編集画面に切り替えるところです。

 

赤い→クリックでスタイルシートの編集画面に切り替わります。

 

A左端に番号が振ってありますが、354あたりに「トップ」という部分を見つけてください

 

トップ部分
==================================================
*/
/* トップ
==================================================
*/
#top {
margin: 0 auto;
text-align: left;
width: 900px;
}
#top #logo, #top h1 {
padding: 28px 0;
width: 600px;
}
#top #logo a, #top h1 a {
color: #e67a82;
text-shadow: 0 0 1px rgba(230,122,130,.3);
font-size: 26px;
font-weight: 600;
text-decoration: none;
}

 

こんな感じで出てきます。

 

 

テンプレートの種類によって、H1についての表記の番号が違いますので、探してください。

 

ちなみにBBAはいつもレスポンシブルテンプレートを使っています。

 

なので、レスポンシブルテンプレートを使っている方は354あたりにあると思います。

 

 

5月のバージョンアップで新しく追加されたテンプレートでは、cssの760番前後の位置を確認してください。

 

2018/6/26追記

 

 

 

その下をゆっくり見ていくと、

 

#top #logo a, #top h1 a {
color: #e67a82;
text-shadow: 0 0 1px rgba(230,122,130,.3);
font-size: 26px;
font-weight: 600;
text-decoration: none;

 

という部分が出てきます。

 

Bcolor: #e67a82;という部分をtransparent;に変えます

 

#e67a82;のみをtransparent;に変えてください。

 

「;」を必ず付けてください。

 

「#e67a82;」はH1の文字色色番号です。

 

「transparent;」は透明という意味です。

 

H1の色を「#e67a82;」から「transparent;」に変更することで、H1の文字色が透明色になります。

 

なので、H1を入力しても文字が透明になることにより、サイトに表示されなくなります。

 

C「display: none;」を追加する

 

#top #logo a, #top h1 a {
color: #e67a82;
text-shadow: 0 0 1px rgba(230,122,130,.3);
font-size: 26px;
font-weight: 600;
text-decoration: none;

 

    ここに「display: none;」を付け加えてください。

 

 

PCでサイトを確認するとBまでの工程でH1が完全に消えているように見えます。

 

が、スマホでサイトの確認をすると、中途半端にうっすらとH1が表示されてしまう場合があります。

 

その場合、最終行の下のスペースに「display: none;」を付け加えてください。

 

「H1を表示しない」という意味です。

 

サイト上には表示されなくても、ソースにはH1が挿入されます。

 

「;」を忘れずに入力してください。

 

D「保存」をクリックする

 

ここまで入力できたら最後に左上の「保存」をクリックしてください。

 

「すべて保存」ではなく、「保存」をクリックしてください。

 

以上の作業でシリウスのヘッダーの左上からH1を非表示にすることができます。

 

スマホで見てもスッキリしていていい感じになります。

 

気になる方はぜひ試してください。

 

〜追記 2018/5/15〜

 

 

シリウスの2018/5/14バージョンアップの詳細はこちらから確認してください。

 

 

正確なバージョンアップ情報はシリウス公式のオンラインマニュアルから確認されることをおすすめします。

 

 


※アフィBBAメルマガ配信始めました(*^-^*)

アフィリエイトを始め、ネットビジネスの中で実際に体験した困りごとや疑問点、失敗談や気づきなど、私、56歳のアフィリエイトBBAの生の声を毎週月曜日の夜19時30分にお届けしています。


どうぞお気軽にご登録ください。


↓ ↓ ↓





 


サイトトップへ


トップへ戻る