蛍光ライン

ピンクを例にご説明します。

まず、 AddQuicktag を設定します。

開始タグは <span class="marker-pink"> 。

終了タグは </span> 。

ボタン名は蛍光ピンクなどの任意の名前にします。

次に、子テーマの style.css に、下記の CSS を追加します。

.marker-pink {
  background: linear-gradient(transparent 60%, #ff99cc 0%);
}

最後に、記事を作成する際に、下記のように HTML を書きます。

<span class="marker-pink">俺は12日でブッダになる！(足は大丈夫です？)</span>

今回のご質問とは関係ありませんが、サイドバーのプロフィール画像が http から始まっています。これが原因で、「このサイトへの接続は完全には保護されていません。」になっています。 https に変更されると、完全に保護されます。

Akira さん いつもお世話になっております！

ありがとうございます。
“俺は12日でブッダになる！”
吹き出しました(笑) 機会があれば是非、瞑想修行を★(笑)
足はすっかり治りました！ありがとうございます(*^^*)

教えて下さったようにやっているのですが、やはり反映されておりません・・・。
投稿プレビューで表示されていないということは、出来ていないということですよね(T_T)？
なぜ反映されないのでしょうか・・・。

プロフィール画像の件、教えて下さりありがとうございます！
画像のURLをhttpsに変更いたしました。

また、もし可能でしたら目次とカテゴリーを
https://nekonotesou.net/icomoon/#HTMLCSS
の方の様にデザインチェンジしたいのですが、シンプリシティでこのような目次・カテゴリにすることは可能でしょうか？
それとも、テーマ自体が違うと出来ないでしょうか？
教えていただければ幸いです。

わいひらさん、お世話になっております。
ご連絡ありがとうございます！

自身のサイトはこちらになります。
https://freeasbluebirds.com

目次とカテゴリの件ありがとうございます。
取り急ぎ、カテゴリの方を手順通りにやってみましたがこちらも反映されません・・・
ご教授頂ければ幸いです。
よろしくお願い致します。

1 つずつ解決していきましょう。

蛍光ラインもカテゴリも変更されないのは、ブラウザのキャッシュが原因のように思えます。一度ブラウザのキャッシュを削除後に、再度ご確認いただけるでしょうか。

あと、ヘッダーの画像も http から始まっていました。この画像も https にご変更ください。

その間に、なるべくコピペでできるように、目次とカテゴリーの CSS を用意しておきます。

Akira さん、ご連絡ありがとうございます！

キャッシュをクリアしたところ、蛍光ペン 反映されていました。
ありがとうございますm(__)m

プロフィール画像は、ウィジェットのテキストHTMLの所で https に直したのですが
トップ画像は カスタマイズの【ロゴを設定する】から画像を選択するだけなので
URLの変更の仕方がわかりませんでした・・・
調べてみたところ【Really Simple SSL 】というプラグインを使用すると出来ると書いてあったのですが、
テーマによっては不具合が出てしまうとかいてありました。

このプラグインを使用しても大丈夫でしょうか？
それとも他にやり方があるのでしょうか？

お手数おかけ致しますが、よろしくお願い致します。

目次とカテゴリの件、本当にありがとうございますm(__)m

トップ画像は、もう 1 度画像を選択し直せば https に変更できると思います。

目次の変更の仕方は下記のとおりです。

まず、 Table of Contents Plus の設定より、「番号振り」のチェックを外します。また、「プレゼンテーション」を白に変更します。

次に、子テーマの style.css に、下記の CSS を追加します。

.entry-content #toc_container {
  border: 4px solid #e1eff4;
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 100%;
  letter-spacing: 1px;
  margin-bottom: 40px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.entry-content #toc_container .toc_title {
  color: #00b7d1;
  font-weight: 400;
  line-height: 2rem;
}

.toc_toggle a {
  color: #ff337a;
  font-size: 0.75rem;
}

.entry-content #toc_container ul {
  counter-reset: toc;
  list-style: none;
  margin-top: 1em;
}

.entry-content #toc_container ul ul {
  margin-left: -8px;
}

.entry-content #toc_container .toc_list li {
  line-height: 1.35rem;
  margin: 0 0 5px 6px;
  padding: 0 0 4px 40px;
  position: relative;
}

#toc_container .toc_list li a {
  color: #333;
}

#toc_container .toc_list li a:after {
  color: #00b7d1;
  content: counter(toc);
  counter-increment: toc;
  font-size: 1.2rem;
  left: 5px;
  letter-spacing: -1px;
  position: absolute;
  top: -1px;
}

なるべく、ご希望のサイトと同じになるようにしています。完成図は下記のとおりです。

http://netakiri.net/uploader/src/up0504.png

ごめんなさい。カテゴリーは、まだできていないです。

申し訳ないです。目次の CSS はこちらをお使いください。 1 ヶ所真似ができていませんでした。

.entry-content #toc_container {
  border: 4px solid #e1eff4;
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 100%;
  letter-spacing: 1px;
  margin-bottom: 40px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.entry-content #toc_container .toc_title {
  color: #00b7d1;
  font-weight: 400;
  line-height: 2rem;
  padding-bottom: 1.5rem;
}

.toc_toggle a {
  color: #ff337a;
  font-size: 0.75rem;
}

.entry-content #toc_container ul {
  counter-reset: toc;
  list-style: none;
  margin-top: 1em;
}

.entry-content #toc_container ul ul {
  margin-left: -8px;
}

.entry-content #toc_container .toc_list li {
  line-height: 1.35rem;
  margin: 0 0 5px 6px;
  padding: 0 0 4px 40px;
  position: relative;
}

#toc_container .toc_list li a {
  color: #333;
}

#toc_container .toc_list li a:after {
  color: #00b7d1;
  content: counter(toc);
  counter-increment: toc;
  font-size: 1.2rem;
  left: 5px;
  letter-spacing: -1px;
  position: absolute;
  top: -1px;
}

@media screen and (min-width: 768px) {
  .entry-content #toc_container .toc_title {
    font-size: 1.65rem;
    margin: 45px 0 10px;
  }
  .entry-content #toc_container .toc_list {
    padding: 0 60px 40px;
  }
}

@media screen and (max-width: 768px) {
  .entry-content #toc_container .toc_title {
    font-size: 1.45rem;
    margin: 35px 0 0;
  }
  .entry-content #toc_container .toc_list {
    padding: 0 25px 30px;
  }
}

Akiraさん ご連絡ありがとうございます。

画像、選択しなおしましたが 無事https になっておりますでしょうか？

目次コード、大変ありがとうございます。
見た目がとても良くなり、大変気に入っておりますm(__)m

カテゴリの件ですが、とんでもございません。
いつでも、お手空きの時で大丈夫です。本当にありがとうございます。
逆に、申し訳ございません・・・m(__)m

フォントについて、noto sans japanese がすごく気に入ったので
変更の仕方を検索していたら、なんと偶然にも Akiraさんのサイトを発見致しました！！
https://firstlayout.net/customize/font/use-noto-sans-japanese-fast/

Akiraさんが教えて下さっている、読み込みを軽くする作業は、初心者の私には少し難しそうでしたので、
とりあえず読み込みスピードは気にせず 簡単なやり方でやってみよう。と思いまして
スタイルCSSにコードを張り付けたのですが、なぜかエラー表示がでております。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
* {
font-family: “Noto Sans Japanese”,sans-serif;
}

このコードでは フォントは変更出来ないでしょうか？

画像、選択しなおしましたが 無事https になっておりますでしょうか？

https になっていないです。もしかすると、画像をアップロードし直して、再設定する必要があるかもしれません。

または、一旦プラグインを停止し、その間に再設定しないといけないのかもしれません。

参考：「ＳＳＬ化するもロゴ画像のＵＲＬがhttpsに変換されない。」

それと、サイドバー下のレンタカー予約サイトの画像も、 http でした。この画像も変更が必要です。

フォントについて、noto sans japanese がすごく気に入ったので〜

Simplicity をお使いであれば、すごく簡単にフォントを変更できます。

WordPress 管理画面 → 外観 → カスタマイズ → レイアウト（全体・リスト）より、「サイトフォント」で Noto Sans Japanese を選択します。これだけで終了です。

ちなみに、 @import を使ったスタイルシートの読み込みは、サイトが遅くなるので使うのは全くおすすめできないです。

（なぜかコメントが送信できないので、コメントを分割します。）

カテゴリの件

サイドバーのカテゴリーを変更するには、下記の CSS を子テーマの style.css に追加します。（ CSS のせいでコメントが送信できなかったので、 Notepad に貼り付けています。）

https://notepad.pw/share/e56oel9g

完成図。

http://netakiri.net/uploader/src/up0505.png

Akiraさん

ご連絡ありがとうございます。

フォント・カテゴリの件 本当にありがとうございます。

さすがです。素晴しく完璧で とても気に入っております。
ありがとうございます。m(__)m

ロゴ・プロフィール画像・レンタカー
共にプラグインを停止後に再UPロードしましたが、SSL化されておりますでしょうか？

また、トップタイトルのロゴが左寄りになってしまっているのは、画像のサイズの問題でしょうか？
何度も何度もすみません・・・。

ロゴ・プロフィール画像・レンタカー共にプラグインを停止後に再UPロードしましたが、SSL化されておりますでしょうか？

レンタカーは、 https になりました。

ただ、ロゴ画像が、 http のままです。また、昨日までは https になっていたプロフィール画像も、 http に戻ってしまいました。

もう 1 度テーマ設定より、画像を再設定するとどうなるでしょうか。また、キャッシュプラグインをお使いであれば、プラグインのキャッシュ削除が必要かもしれません。

これで https にならないと、ちょっと原因が分からないです。

トップタイトルのロゴが左寄りになってしまっているのは、画像のサイズの問題でしょうか？

下記の CSS を子テーマの style.css に追加すると、ロゴが中央に配置されます。

#site-title {
  text-align: center;
}

Akiraさん
ご連絡ありがとうございます。

WP Super Cache のキャッシュを消して画像をアップロードしなおしましたが
やはりそのままのようです・・・

ロゴを乗せなければｈｔｔｐｓになるのでしょうか？

中央によせるコードありがとうございます。m(__)m

わいひらさん
ご連絡ありがとうございます！m(__)m

何度再アップロードしても http のままです・・・
PROFILEとレンタカーの部分は、HTMLでリンクにｓを追加しました。
トップ画については キャッシュをクリア→ 削除 → 再アップロードしてもhttp のまま変わりません・・・。

何度再アップロードしても http のままです・・・

トップページのロゴ画像を右クリックでPCにダウンロード後、FTPソフトでアップロードした感じですか？

パス：/wp-content/uploads/2018/06/noname-3.png

その後外観、カスタマイズより再設定すればhttps化になるのですが。。

あとOGPもhttpのままです。管理画面の　外観、カスタマイズ、SNS。FTPで画像をアップロード後、再度選択していただけますか。

それでもダメな場合は念のため、エックスサーバーの高速化をチェックして、mod_pagespeedをoffにしてみるとどうですか？

かうたっくさんのコメントを拝見して、これかな？と思うものが頭に浮かびました。

ロゴ画像の再アップロードをお試しください。ただし、再アップロードをされる前に、ロゴ画像のファイル名を noname-3.png から変更します。

site-logo.png など、これまで使ったことがないファイル名にするとどうなるでしょうか。

かうたっくさん・Akiraさん

ご連絡ありがとうございます。m(__)m
ロゴを再アップロードしようとしたら、なぜか画像が消えてしまっていたので、もう一度新しく作り直しました。

プラグインを全て停止した後に、タイトル名を変更し
新しく画像をアップしましたが、URLはいまだにhttpのままです。

外観→カスタマイズ→ロゴの画像→添付ファイルの詳細でURLがhttp になっている時点でアップロードしてもhttpのままということですよね・・・？

外観→カスタマイズ→ロゴの画像→添付ファイルの詳細でURLがhttp になっている時点でアップロードしてもhttpのままということですよね・・・？

FTPでアップロードした、『新しく作成した画像』を『添付ファイルから選択』すると、通常httpsに変わります。変わってないのがオカシイです。※キャッシュが残る事はあっても変わらないのが変。

そのアドレスをhttpsに手動で変更・保存できませんか？
あとついでにOGPの画像もです。

管理画面の　外観、カスタマイズ、SNS。

https://gyazo.com/0403e35f3f22bd6461747560edd00a96

設定　一般を開いたWordPressアドレス。サイトアドレスはhttpからhttpsに変更できてますか？

https://gyazo.com/07d5a75dece8e190a360eec261320d06

通常httpsに変わらないのはキャッシュが残っている時だけです。その可能性を考えてサーバーのキャッシュを停止してください。

それでもダメな場合は念のため、エックスサーバーの高速化をチェックして、mod_pagespeedをoffにしてみるとどうですか？

https://gyazo.com/055dacf69600e14ccaa04453aa423a99

https://gyazo.com/685d51a783a89da3da4e48fad3e65141

https://bibabosi-rizumu.com/wordpress-ssl-https/

上記は、エックスサーバーでhttps化したときの全メモです。

http://freeasbluebirds.com/wp-content/uploads/2018/06/site-logo.png

ロゴ画像がhttpsに転送されないので、.htaccessファイルを編集されてないと思います。面倒かもしれませんが、エックスサーバーのFTPに入って、.htaccessファイルをバックアップ。編集できたら即反映するはずです。

上記リンク先でhttps化の全ての流れを確認するか、面倒なら、エックスサーバー　https化　.htaccessファイルなどで検索してください。

https://wp-simplicity.com/suport/topic/%E8%9B%8D%E5%85%89%E3%83%A9%E3%82%A4%E3%83%B3/#post-60164

httpsになってなければ手入力・それでもダメなら、プラグインSearch Regexでhttp://freeasbluebirds.com/wp-content/uploads/2018/06/を検索

https://freeasbluebirds.com/wp-content/uploads/2018/06/に変更して一括保存を試すのも良いと思います。

この場合、画像ファイルwp-content/uploads/2018/06/フォルダ内を書き換えるので、念のためフォルダをバックアップするなど、慎重におこなってくださいね。

かうたっくさん

ご教授いただきありがとうございますm(__)m

【そのアドレスをhttpsに手動で変更・保存できませんか？】
↓
アップロードして、添付ファイルの詳細の所にURLが載っていますが クリックしても編集できません。
入力できないようになっています。
プロフィール画像などは、HTMLでURLにsを追加することができました。

【設定　一般を開いたWordPressアドレス。サイトアドレスはhttpからhttpsに変更できてますか？】
↓
サイトアドレスは https になっていたのですが、ワードプレスアドレスはなっていなかったので https に変更しました。

【それでもダメな場合は念のため、エックスサーバーの高速化をチェックして、mod_pagespeedをoffにしてみるとどうですか？】
↓
こちらを見てみたところ、もとからオフになっていました。

【上記リンク先でhttps化の全ての流れを確認するか、面倒なら、エックスサーバー　https化　.htaccessファイルなどで検索してください。】
↓
エックスサーバーで独自SSLというもの変更にしていたのですが、https化 とはそのことでしょうか？

すみません、今ロゴ画像を再アップロードしたらhttpsになりました。

お手数おかけして すみませんでしたm(__)m

OGP画像も変わっていないとのことなのですが、カスタマイズ→SNS のところでは特に画像は設定していないのですが、どちらの画像のことでしょうか？？

本当に理解不足ですみませんm(__)m

おぉぉー！

緑の保護された通信が輝いて見えます。

ロゴ画像が https になったことで、 OGP 画像も https になりました。

現在のサイトは、正常な状態です。

ロゴ画像が、 http のまま

この件のみですが、以下が原因だったとわかりました。

【設定　一般を開いたWordPressアドレス。サイトアドレスはhttpからhttpsに変更できてますか？】
↓
サイトアドレスは https になっていたのですが、ワードプレスアドレスはなっていなかったので https に変更しました。

WordPress本体（FTP内）ファイルのアドレスが『httpsになってなかった』からみたいです。私を除いた回答者さん・スレ主さんの粘り勝ちでしたね！　＾＾

良かったです！皆さん、お疲れ様でした❦

おはようございます。

Akiraさん　かうたっくさん ご連絡ありがとうございます！

理解・知識不足で時間が掛かってしまい大変失礼致しました。

たくさんの時間をかけていただき、申し訳ありませんm(__)m
そして、ありがとうございましたm(__)m

助けていただいた皆様、本当にありがとうございましたm(__)m
感謝の気持ちでいっぱいですm(__)m