【WordPress】ブログのh2見出し整備に3日かかった話。【WordPress】ブログのh2見出し整備に3日かかった話。雑記2020.07.11ブログを開設して早1年半。ITド素人の自分が、ひたすらgoogle検索のみを活用して、見よう見まねでこつこつとブログを運営してきました。いろいろな失敗もしてきました。最初は「他の人とは違うものは作るんだ!」と誰も使っていないようなテーマを選び、説明書きが全て英語で、どこをどういじっていいのかわからず、結果多くの人が使っているテーマ(現在「cocoon」を使用)に行きついたり。Found”になり、手作業で紐付けたり。失敗をした分、レベルアップしてきまして、CSSも少しいじれるようになりました。今まで幾度となくチャレンジしてきて、何度もうまくいかなかった(=自分がイメージしていたものに技術がついて行かない)設定を、この度15時間近くかけて成功したので、その記録を残したいと思います(もう2度とやりたくない)。今回ようやく成功した設定は見出し設定です。見出し設定とはいわゆるタイトル自体(h1見出し)や段落のタイトル(h2~h6見出し)のことです。文章が長くなってくると、やはり段落ごとに息継ぎしないと、書いてる側も読んでる側もしんどくて、いつの間にか自然と挿入するようにしていました。cocoonの初期設定の見出しまた、見出しを設定しておくと、目次も自動的に生成されるので、便利極まりない設定です。目次の例ただ、cocoonの見出しのデザインが好きではなかったため、使っていませんでした。正確にいうと「h2見出し」のデザインがどうも納得できなく、無駄に「h3見出し」から使っていました。テーマの設定上、目次が作られるは「h2見出し」からだったので、今まで目次が生成されていませんした。ブログの内容が資格とか金融関係なので、”単純な塗りつぶしの四角”だと雰囲気が重くなってしまったりして。有料テーマを使うなり、見出しの自由度が高いテーマ使えばいいじゃないということですが、あまり費用もかけたくないですし、テーマを変更するとなるといろいろやることが発生してしまいますから。いうことで、なんとなくCSSも分かってきたので、CSSで頑張ってみようと思いました。結果をいうと、ほとんど以下のサイトで解決しました。ありがとうございました。CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。saruwakakun.com詳細はこのサイトに記載があるのですが、念のため、私の手順等もまとめておきます。以前、wordpressの「追加CSS」(外観→ヘッダー)への記載を試みたことがあったのですが、全くなにも反応しなかったので、今回は直接テーマ(子テーマ)へのCSS記載を試みました。スタイルシートを編集します。「外観→テーマエディター」と進むと、スタイルシートの画面が出てきます。右上に編集するテーマが出てきますので、「子テーマ」になっていることを確認してください。CSSの書き込み準備が整いましたら、いざ書き込んでいきます。どこに書いてよいのか分からなかったのですが、とりあえず適当な場所に書き込んだら動きました。結果として、以下のような見出しにしました。h3見出しやh4見出しは線を入れたり、塗りつぶしと特別なことはしませんでしたが、h2見出しは、先頭にアイコンを表示させています。実際に入力したコードはこちら。「h1見出し」以外の初期化です。フォントサイズや余白感覚はデフォルトままで良かったのでコメントアウト。normal;position:relative;}ここからはデザインしたい見出しのCSSコードを入力します。「before」のものがアイコンの挿入です。Awesome5が使えるようになっているので、cocoon設定の中でオンにしてください。(やり方は検索すればすぐ出てくるので、ここでは説明しません。#7db4e6;/*下線*/}これで設定を保存すれば完了です。今は上記のコードで問題なく動いていますが、設定当時は変なエラーが出てしまいました。エラーと言ってもCSSの変更が保存できないとか、ブログが消えてしまったとかではありません。再現できなくなってしまったのですが、ブログの記事の一覧において、記事のタグの上に「h2見出し」で設定したアイコン(チェックマーク)が出てきてしまいました。意図したものではありません。CSSにおいて「h2:before{}」と記載していたため、「h1見出し」(=記事タイトル)のほうにまで影響が出てきてしまったのかと思います。h2:before」と変更することにより、直りました。h2:before」に戻したのですが、エラーは再現せず。なんだったのでしょうか。時間差で出てくるんでしょうか。その後、今までの記事(約180記事)の見出しを整備(なにせ全てh3からにしていたので、h2に修正)に土日を丸々費やしました。見出しの他に、リンク切れを直したり、昔使っていた変なプラグインの残骸を掃除したり、変な文章を直したりと、気になると永遠に触ってしまいますね。新着記事”中途半端”を楽しむ。2023.05.212023.05.262023年の株式市場はイカロスになる得るのか。2023.05.162023.05.20株式投資家と債券投資家どちらが賢明か。2023.05.112023.05.11定期積立(ideco・THEO)の運用実績(2023年4月末)2023.05.062023.05.07クレディ・スイスを教訓に分散投資を心に刻む。【wordPress】メニューバーの追加方法。先日、このブログに「メニューバー」を追加しました。赤線で囲ってあるやつです。雑記ブログを初めて1年が経ちました。2019年1月24日からブログを開始して、1年が経ちました。雑記ブログを始めて3年が経とうとしています。相場も年末で閑散としてますし、CFAのlevel2の勉強もこつこつこなしていますが、特筆した進展もないのでネタが枯渇中です。新興国株式のインデックスとETFについて。level1を受験してきました。level1の結果が出ました。(2回目)2021.10.17CFA(level1)不合格者が語る「SCHWESER」を使ってみた感想。2021.03.102021.04.19ニトリのタンスを修理した話。タンスのレール交換の一部始終。2019.11.212021.01.31CIIA(国際公認投資アナリスト)の勉強時間や証券アナリスト試験との違い。Reserved.タイトルとURLをコピーしました。