スポンサーリンク

WordPressの見出し h2、h3をちょっとだけカスタマイズ。WordPress超初心者のババだけど頑張ってみました~~;

相変わらず初めてのWordPressに悪戦苦闘している超初心者のババです。こんばんは。

一見のんびりしているようなババでありますが、ジジと一緒に始めたこのWordPressの日記を読みやすいカタチにしたいなって思って頑張っています。
最初は、空フォルダ、空ファイルの意味も分からなくて、子テーマの作り方もさっぱりわからなくて、もうこりゃあババの手に負えないかもと何度も投げ出してしまいそうになったけど・・・

少しずつですが・・・
アイキャッチ画像を入れることが出来て、抜粋表示もできるようになって、【記事を読む】に色を付けたり右に寄せて表示できるようになって
やっとカタチになってきたかな?

WordPress超初心者のババには、まだまだわからない言葉がたくさんあって、まずはそこから調べたりしなくっちゃいけなくて四苦八苦の悪戦苦闘中の毎日ですが、くじけずに頑張ろうっとです。
また、そのあたりの苦戦苦闘ぶりは、いつかWordPress-diaryに自分の備忘録として書いておきたいなって思ってます(笑)

今日は、いつも長ーいジジの日記をなんとかメリハリをつけて読みやすく出来ればと思い、あちらこちらを参考にさせて頂いて、WordPressの見出しを頑張ってちょっとだけカスタマイズしてみました。

見出し2(h2)

スタイルシートに追加した 見出し2(h2)の内容

/*見出し2 先頭にマーク(重なる四角2つ)に下線*/
.article h2 {
border-left:none;/* デフォルトの左1pxの線を消す */
position: relative;
padding-left: 3em;/* テキスト左の余白 */
border-bottom: 2px solid #CC0000;/* 下線 線の太さ・線の種類・色 */
}

.article h2:before{
content: “■”; /* 下の記号 */
position: absolute;
font-size: 150%;
color: #FF6666;/* 下の記号の色 */
top: 0.5em;/* 下の記号のトップの位置 */
left: 0.6em;/* 下の記号の左の位置 */
}

.article h2:after{
content: “■”;/* 上の記号 */
position: absolute;
font-size: 150%;
color: #CC0000;/* 上の記号の色 */
top: 0.2em;/* 上の記号のトップの位置 */
left: 0.3em;/* 上の記号の左の位置 */
}

見出し3(h3)

スタイルシートに追加した 見出し3(h3)の内容

/* 見出し3(h3)破線の下線 */
.article h3,
#comment-area h3,
#related-entries h3{
border-bottom: 2px dashed #ff4040; /* 下ボーダーを2px幅の破線、線色#f99020に デフォルト5px solid #e7e7e7 */
padding:0px 0px 0px 20px; /* デフォルト10px 0 [上下][左右] */
font-size:19px; /* デフォルト23px */!important
}

.article h4, .article h5, .article h6{
padding:0px 0px 0px 5px; /* デフォルト8px 0 [上下][左右] */
font-size:16px; /* デフォルト20px */!important
}

とりあえず、見出しの使い方は間違ってるかもしれないけど・・・
ジジの日記が読みやすく感じられてくれたらいいな・・・

そう思うババなのでありました。

    
スポンサーリンク
スポンサーリンク
レクタングル(大)336280
レクタングル(大)336280

フォローする

『WordPressの見出し h2、h3をちょっとだけカスタマイズ。WordPress超初心者のババだけど頑張ってみました~~;』へのコメント

  1. 名前:みき 投稿日:2017/04/04(火) 09:40:54 ID:914780b38 返信

    こんにちは。はじめまして。
    いきなり現れて何なんだという感じですが 笑
    参考にしていただければ幸いです。

    まず、記載されているCSSではWordPressにデフォルトで同梱されているテーマでは動作しませんでした。
    (Simplicityではもちろん動きます)
    デフォルトテーマにはarticleクラスが付いていないからです。
    ↑見た感じでは

    続いてCSSを記載されるときはcodeタグなどを利用することを推奨します。
    たとえば当記事に書いてあるCSSをコピーしてエディタなどに貼り付けてみてください
    すると
    /*見出し2 先頭にマーク(重なる四角2つ)に下線*/
    .article h2 {
    border-left:none;/* デフォルトの左1pxの線を消す */
    position: relative;
    padding-left: 3em;/* テキスト左の余白 */
    border-bottom: 2px solid #CC0000;/* 下線 線の太さ・線の種類・色 */
    }

    .article h2:before{
    content: “■”; /* 下の記号 */
    position: absolute;
    font-size: 150%;
    color: #FF6666;/* 下の記号の色 */
    top: 0.5em;/* 下の記号のトップの位置 */
    left: 0.6em;/* 下の記号の左の位置 */
    }

    .article h2:after{
    content: “■”;/* 上の記号 */
    position: absolute;
    font-size: 150%;
    color: #CC0000;/* 上の記号の色 */
    top: 0.2em;/* 上の記号のトップの位置 */
    left: 0.3em;/* 上の記号の左の位置 */
    }

    contentの部分が“■”となってしまいます
    これでは動作しません。
    ↑動作しなかったです。
    codeタグを利用するとそのままコピーできるかと思います↓
    "■"

    簡単にアドバイスでした
    参考にしていただければ幸いです。
    (詳細や間違いがあったらメールまで送っていただければ幸いです。
    メールは確認しているので)

  2. 名前:みき 投稿日:2017/04/04(火) 09:43:55 ID:914780b38 返信

    ちなみに僕がコードを載せるときは
    <pre><code>コード</code></pre>
    とします。

    • 名前:jijibaba 投稿日:2017/04/04(火) 12:35:16 ID:59e7e1e01 返信

      みきさん、ババです。
      はじめまして、こんにちは!

      詳しいアドバイスをして貰って、ほんとうにありがとうございます。

      超初心者なのに、見出しが思うように表示されて、
      ヤッター!って感じで嬉しくて日記に載せてしまったけど
      Simplicityでは動作するけど
      WordPressにデフォルトで同梱されているテーマでは動作しないんですね~~;

      そう言えば、前にWordPressの公式テーマを使っていた時に、
      コードを貼り付けても何にも変化なかった覚えがあります~~;
      Simplicityに替えて出来たのは、こう言った原因があったんですね。
      とっても勉強になりました。

      まだまだ分からないことだらけで、
      手さぐりの状態で、見よう見まねで一生懸命サイトを作っています~~;
      また、何かこうした方がいいよとか、いろいろアドバイスがあれば、
      どんどんお願いします!

      コメントをありがとうございました!
      これからもよろしくお願いします。