蛍光ライン

このトピックには26件の返信が含まれ、2人の参加者がいます。1 週、 3 日前 ポム さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #60120

    ポム

    いつもお世話になっております。
    文字装飾で蛍光ラインを入れたいのですが、スタイルCSS と add quick tag に追加しても反映されませんでした。

    ※ ↓こちらの方のタグを追加させていただきました。
    https://love-wave.com/underline-marker/
    なぜでしょうか?
    教えていただければ幸いです。よろしくお願い致します。

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

  • #60121

    Akira

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

    まず、 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 に変更されると、完全に保護されます。

  • #60125

    ポム

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

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

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

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

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

  • #60129
    わいひら
    わいひら
    キーマスター

    なぜ反映されないのでしょうか・・・。

    これは、実際にうまくいっていないページURLとその箇所を見てみないと分からないかもしれません。
    Akiraさんが書かれた方法にすればうまくいくと思うのですが、何か間違っている部分があるのかもしれません。
    それを見るには、実物を見てみるしかないかも。

    目次・カテゴリにすることは可能でしょうか?

    目次であれば、TOC+プラグインを利用してCSSを設定すればできるかと思います。

    カテゴリを同様表示にするには、HTML構造を変更する必要があるので、以下のカスタマイズを行った後、CSSでスタイリングする必要があるかと思います。
    https://nelog.jp/remove-post-count-parentheses

  • #60131

    ポム

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

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

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

  • #60140

    Akira

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

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

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

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

  • #60142

    ポム

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

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

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

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

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

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

  • #60143

    Akira

    トップ画像は、もう 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

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

  • #60144

    Akira

    申し訳ないです。目次の 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;
      }
    }
  • #60150

    ポム

    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;
    }

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

  • #60153

    Akira

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

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

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

    参考:「SSL化するもロゴ画像のURLがhttpsに変換されない。」

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

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

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

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

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

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

  • #60155

    Akira

    カテゴリの件

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

    https://notepad.pw/share/e56oel9g

    完成図。

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

  • #60156

    ポム

    Akiraさん

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

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

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

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

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

  • #60158

    Akira

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

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

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

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

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

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

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

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

    ポム

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

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

    ロゴを乗せなければhttpsになるのでしょうか?

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

  • #60164
    わいひら
    わいひら
    キーマスター

    一応もう一度確認として、テーマカスタマイザーから、画像を再設定した際、画像URLはhttpsになっていますか?

  • #60165

    ポム

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

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

  • #60166

    かうたっく

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

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

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

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

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

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

  • #60167

    Akira

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

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

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

  • #60168

    ポム

    かうたっくさん・Akiraさん

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

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

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

  • #60169

    かうたっく

    外観→カスタマイズ→ロゴの画像→添付ファイルの詳細で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化したときの全メモです。

  • #60170

    かうたっく

    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/フォルダ内を書き換えるので、念のためフォルダをバックアップするなど、慎重におこなってくださいね。

  • #60171

    ポム

    かうたっくさん

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

    【そのアドレスをhttpsに手動で変更・保存できませんか?】

    アップロードして、添付ファイルの詳細の所にURLが載っていますが クリックしても編集できません。
    入力できないようになっています。
    プロフィール画像などは、HTMLでURLにsを追加することができました。

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

    サイトアドレスは https になっていたのですが、ワードプレスアドレスはなっていなかったので https に変更しました。

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

    こちらを見てみたところ、もとからオフになっていました。

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

    エックスサーバーで独自SSLというもの変更にしていたのですが、https化 とはそのことでしょうか?

  • #60173

    ポム

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

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

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

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

  • #60174

    Akira

    おぉぉー!

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

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

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

  • #60176

    かうたっく

    ロゴ画像が、 http のまま

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

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

    サイトアドレスは https になっていたのですが、ワードプレスアドレスはなっていなかったので https に変更しました。

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

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

  • #60177

    ポム

    おはようございます。

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

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

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

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

トピック「蛍光ライン」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)