ワードプレスの記事のタイトルの装飾

私のブログも、多少はルックスを良くしないと。と思い、タイトルを強化してみました。

ワードプレスは、なかなか難解な構造している。

 

記事のタイトルを見やすくしたいと思いました。

それでトップページでの各記事のタイトルをデコレーションしたのですが。。。

 

カテゴリーのページを見たら、デコレーションが反映されてない。

 

 

ソースを開いて見ると、トップページでの各記事はh3(いわゆるヘッダー3)で定義されている。

 

しかし、カテゴリー内の各記事のタイトルはh2(ヘッダー2)で定義されている。

 

最初h2、h3に同じ装飾を設定して、出来た。

 

 

と思いきや。トップページのサイドバーのタイトルがh2で定義されているじゃないか。

サイドバーまで、かっこ良くされると見栄えが悪い。

 

悩んだ末に、h3は目立つデザイン。h2はワンポイントのアクセントにしたら、許せる内容になったから納得しました。

 

 

私は、わりと正攻法で改造していないと思います。

プログラム内というか、CSS内で定義されているのは、そのままで、更にサーバーに入り込んで子テーマを作るという、レベルの高いことはしていません。(技術がありませんから。)

【私の方法】

追加CSSを使いました。

前のSeesaa系でも同じですが、大元の設定より、記事内の設定のほうが、優先権があり採用されます。 

 

つまり、元のCSS 〈 追加CSS 〈 記事内の設定

という優先順位となります。

例えば、背景色が 元のCSS(白) 〈 追加CSS (黒) 〈 記事内の設定(青)

となっている時は記事は青、指定のない記事は黒となると思います。(知識不足で自信ありません。)

 

ワードプレスの改造には、子テーマを使えとやたらと書いてあります。

が、非常に面倒ですし、例えばセキュリティの致命的な部分が子テーマに関係する部分だった場合、対策がありません。

だから、ちょっと疑問を感じます。

追加CSS は先日ワードプレスのバージョンアップの時に生き残りました。消えなかったのです。

それに、追加CSS は、コピーしてワードなどに貼り付けておけば、簡単にバックアップ出来て楽です。

だから、私は追加CSS を使います。

外観のCSS 編集を選びます。

すると以下の画面になります。

ここで、追加CSS を選びます。

すると以下の画面に追加すればいいです。

ちなみに、一行目は背景色をブルーにしたもの。最後の6桁の16進数をカラーコード見ながら好きな色にすれば全体の色は簡単に変わります。

二行目~八行目がh3をデコレーションしました。

九行目以降がh2にワンポイントのアクセントつけたもの。

 

装飾デザインは、「タイトル 装飾」とか検索すると、コピーできる良心的なブログがあります。

まあ、あれだけの素材をご自由にお使い下さい。とするとアクセスで、集客もすごいでしょうね。

 

先頭ページの装飾は

まあまあ理想的。スマホだと下部のカテゴリーは

どうにか地味に抑えました。本当は装飾したくなかった。けどカテゴリー内の都合で避けれない。

カテゴリー内の記事タイトルも無難にワンポイントつきました。

 

まあ、私の技術だと、この程度が限界ですね。

 

これは、記事内に直接HTML で書き込みも出来ます。

h3を記事内に書きしてみました。

なったでしょう!

そして、自分の気に入ったものをh4、h5、h6に登録してみました。

h4

私のh4デザイン

h5

私のh5デザイン

h6

私のh6デザイン

とこんな感じ。状況で使い分けようと思います。

ワードプレス使っている大半の人には常識でしょうが。

だから、ワードプレスは新入りにはつらいんですよね。

でも、見よう見まねで結構できるんです。

 やったのは、通常あまり使わないでしょうが、写真の

コードエディタのモードに切り替えます。こちらのモードは、ただ単に文章は書けません。

文字書くなら <p>もじ</p>と、全てプログラム的に書かないといけません。

私はある程度通常モードで書いて、エディタモードで装飾します。

ここに<h3>なったでしょう!</h3>と書いただけで、あらかじめ設定されたh3の装飾がされます。

↑ ここに書いたのはビジュアルエディタモードで書いているから、HTML と判断されず、ただの文字と認識されます。

記事内に毎回、飾りHTML を入れても書けますが、恐ろしく面倒ですから、たまにしかやらないです。

 

とりあえず、タイトル装飾は満足しました。

 

尚、記事単体を表示した時も装飾したくなるかもしれないけど、いささか無理だと思います。(titleで定義されているようです。)

ここをデコレーションすると、恐らくトップページのブログタイトルまで同じ装飾されます。

納得するデザインには出来ないと思います。

でも記事単体を閲覧する方は、タイトル見て、選んで記事見てますので、その時点でタイトルに装飾されることに意味がないと思います。

まあ、とにかく難しい。