2020年11月03日

「追加 CSS クラス」の使い方がようやく分かった

 新サイトでも「曲目リスト」を掲載し始め、新たな試みとして各曲目にYouTubeへのリンクを埋め込んでいます。
 しかし、下線がびっしりと並び見苦しいので消すことにし、多分その対応(の一つ)で、しかも一番簡単なものと思われる「追加 CSS クラス」を使うことにしました。

追加CSSクラス01.png

手順1 まず、編集を加えたいページを開いて、該当ブロックを選択し、「高度な設定」の中の「追加 CSS クラス」の空欄に、適当なクラス名前を決めて記入します。
 下線を消したいので、ここではno-underlineとしました。

 上のスクリーンショットは「リスト」ブロックに埋め込まれたアンカーの指定ですが、レコードジャケットの「図」ブロックでも同様にして、shadowというクラス名を入れました。

手順2 WordPress全体の「外観」>「カスタム」を開き、「追加CSS」の欄に

/* 陰を付ける */
.shadow img {
box-shadow:2px 2px 4px 2px #aaa;
}

/* アンカーの下線などを消す */
.no-underline a{
text-decoration:none;
}
/* アンカーのホバー時に下線・太字 */
.no-underline a:hover{
text-decoration:underline;
font-weight:bold;
}
と書き加えます。(Luxeritas)を入れている場合。違うテーマでは、ちょっと違うかもしれません。)

追加CSSクラス02.png

 念のため(間違えたときの手間を省くため)、右のプレビューウインドウでは、当該のページを開いておくと、意図通りに表示されたのが分かります。追加したCSSを保存します。

 これだけです。

 手順の1と手順2とは、逆でも構いません。
 ただ、この方が、CSSの記述に間違いがあったり、調整(陰の太さなど)をするのに、プレビュー画面で確かめながら書き直すことができるので、便利だと思います。

 これで、「・」や数字の付かないリストなど、WordPressのデフォルトノブロックでは表現できないことも、思い通りに変更できそうです。




posted by kewpie at 23:59| Comment(0) | TrackBack(0) | WordPress
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/188091604
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。