相変わらず初めてのWordPressに悪戦苦闘している超初心者のババです。こんばんは。
一見のんびりしているようなババでありますが、ジジと一緒に始めたこのWordPressの日記を読みやすいカタチにしたいなって思って頑張っています。
最初は、空フォルダ、空ファイルの意味も分からなくて、子テーマの作り方もさっぱりわからなくて、もうこりゃあババの手に負えないかもと何度も投げ出してしまいそうになったけど・・・
少しずつですが・・・
アイキャッチ画像を入れることが出来て、抜粋表示もできるようになって、【記事を読む】に色を付けたり右に寄せて表示できるようになって
やっとカタチになってきたかな？
WordPress超初心者のババには、まだまだわからない言葉がたくさんあって、まずはそこから調べたりしなくっちゃいけなくて四苦八苦の悪戦苦闘中の毎日ですが、くじけずに頑張ろうっとです。
また、そのあたりの苦戦苦闘ぶりは、いつかWordPress-diaryに自分の備忘録として書いておきたいなって思ってます(笑)
今日は、いつも長ーいジジの日記をなんとかメリハリをつけて読みやすく出来ればと思い、あちらこちらを参考にさせて頂いて、WordPressの見出しを頑張ってちょっとだけカスタマイズしてみました。
見出し２（h２）
スタイルシートに追加した 見出し２（ｈ２）の内容
/*見出し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（ｈ3）
スタイルシートに追加した 見出し3（ｈ3）の内容
/* 見出し3（ｈ3）破線の下線 */
.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
}
とりあえず、見出しの使い方は間違ってるかもしれないけど・・・
ジジの日記が読みやすく感じられてくれたらいいな・・・
そう思うババなのでありました。
こんにちは。はじめまして。
いきなり現れて何なんだという感じですが 笑
参考にしていただければ幸いです。
まず、記載されている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タグを利用するとそのままコピーできるかと思います↓
"■"簡単にアドバイスでした
参考にしていただければ幸いです。
(詳細や間違いがあったらメールまで送っていただければ幸いです。
メールは確認しているので)