スタイルシートでの文字装飾クラスの設定について

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › スタイルシートでの文字装飾クラスの設定について

6件の返信スレッドを表示中
  • 投稿者
    投稿
    • #14415
      sora
      ゲスト

      わいひらさん、はじめまして。
      Wordpressを利用するのは今回が初めてです。
      こちらのテンプレートはとてもカスタマイズがしやすく、不慣れなので大変助かっています。

      とても初歩的な質問でお恥ずかしいのですが、文字の色を変えたり蛍光マーカーの装飾を使いたいのですが、例えば赤文字や灰色の文字などは、すでにどこかで設定されていたりするのでしょうか?
      (自力では見つけることができませんでした)

      これまで利用してした無料ブログでは、スタイルシートで設定して、記事を書くときに<span class="">で書いていたので、今回も子テーマのスタイルシートに

      .lime {
      color:#66FFCC;
      }
      
      .m_lime {
      background: linear-gradient(transparent 60%, #66FFCC 60%);
      }

      など、検索などで調べて記載されていた例題のままに書き足したのですが、これだけでは反映されませんでした。スキン設定はいちばん下の子テーマにチェックを入れてあります。

      スタイルシートで設定するのではなく、記事を書く際に毎回<font>で色の指定をしなければダメなのでしょうか?それとも、書いた内容そのものが何か間違っている、あるいは何か足りていないのでしょうか?

      こちらのテーマで本文に色の文字をお使いの方のページをいくつか探し、ページソースを表示させてみたのですが、発見した方々は皆さん後者で書かれていたので、スタイルシートでの設定はそもそもできないのかな? とも思ったりしまして、質問させていただくことにしました。

      チェックマークなどよく使いそうなアイコン画像などもできればスタイルシートで設定しておきたいと思っていますので、その辺りを含めて教えていただければと思います。

      説明が長くなってしまい、すみません。よろしくお願いいたします。

    • #14434
      sora
      ゲスト

      度々すみません。
      色とマーカーの設定は前回の内容で大丈夫だったようです。
      プレビューでは反映されていなかったのですが、一から開きなおしたら反映されていました。
      Wordpressの使い方自体が不慣れだったことが原因のようです。

      次に、アイコンなどの画像設定ですが自分で調べてみて下のようにしてみました。

      .check1,.check2 { background-repeat:no-repeat;background-position: left center;
      }
      .check1 { background-image: url("画像1のURL") 
      }
      .check2 { background-image: url("画像2のURL") 
      }

      一応、表示することは出来たのですが、素材はアイコンで 16×16 程度の大きさしかなく、もう少し大きく表示させたいです。

      アイコンはある程度好きな場所で使えるように、
      <h2>やリストなど、特定の場所を指定せずに設定しておきたいというのが希望です。

      上の一列目で共通の詳細設定をして、2列目以降でURLの設定をしています。
      一列目で大きさ設定をするのだろうと予測はつくのですが、色々試しても変化がありませんでした。

      テーマのカスタマイズとは少しズレた質問になってしまい申しわけありません。
      お時間がある時でかまいませんので、解決策があれば教えていただけると助かります。

    • #14462
      アバター画像わいひら
      キーマスター

      soraさんはじめましてこんにちは。

      Simplicityでは、一応「css/extension.css」に以下のようなデフォルトクラスはあります。

      /*太字*/
      .bold{
        font-weight:bold;
      }
      
      /*赤色*/
      .red{
        color:#E50202;
      }
      
      /*太字で赤色*/
      .bold-red{
        font-weight:bold;
        color:#E50202;
      }
      
      /*マーカーの黄色のような色*/
      .marker{
        background-color:#FF9;
      }
      

      一応、表示することは出来たのですが、素材はアイコンで 16×16 程度の大きさしかなく、もう少し大きく表示させたいです。

      画像サイズを大きくするのではだめなのでしょうか?

    • #14529
      sora
      ゲスト

      わいひらさん、こんにちは。
      年末の忙しい時に早々と回答いただきありがとうございます。

      デフォルトのクラスが分かってよかったです。
      子テーマで追加していこうと思います。

      ただ、「css/extension.css」というのが、結局どこにあるのかわかりませんでした。
      親テーマのスタイルシートの中でFキー検索してみたら冒頭で見かけたのですが、インポートとあるので外部ファイルなのかな?と思ったのですが、これはテーマ作成者しか確認できないものですか?

      根本的に理解しておらず、的外れな質問になっていたら申し訳ありません。
      今後、上記以外のデフォルトのクラスを確認したい時は、その都度質問させていただくしか方法がないでしょうか?もし私でも確認できる方法があれば教えてください。

      画像については、設定の変更をすることに意識がいっていて、元のサイズを変えるという発想が抜け落ちていました。勉強のためにももう少しあがいてみようと思いますが、それでダメな場合はわいひらさんのご提案の通り、ライブラリに登録する画像サイズ自体を変えて対処しようと思います。
      ありがとうございました。

    • #14626
      アバター画像わいひら
      キーマスター

      css/はディレクトリ(フォルダ)を表しています。
      テーマフォルダ内のCSSフォルダ内のextension.cssファイルということです。

    • #14645
      sora
      ゲスト

      わいひらさん、こんにちは。

      「extension.css」のファイル、無事に見つけることが出来ました。
      根本的に理解していなかったので、Wordpress内の「編集するテーマを選択」の下にズラリと並んでいるファイル?を順番に開いてFキーで探していました( ;・∀・)

      編集画面内にあるものと思い込んでいたので探し出すのに時間がかかってしまいましたが、今回わいひらさんには申し訳ないと思いつつもしつこく聞いてみて良かったです。いい勉強になりました。ちょうど「ストラップのインフォメーションのような囲み記事」の色も変えたいと思っていたところだったのですが、ここで質問する前にそのデフォルトクラスも一緒に見つけることが出来て良かったです!

      何度もやり取りしていただいてありがとうございました。
      出来るだけ自力で解決できるよう頑張ろうと思っていますが、どうしても分からない時にはまた質問させていただくことがあるかもしれません。その際はどうぞよろしくお願いいたします。

    • #14676
      アバター画像わいひら
      キーマスター

      出来るだけ自力で解決できるよう頑張ろうと思っていますが、どうしても分からない時にはまた質問させていただくことがあるかもしれません。その際はどうぞよろしくお願いいたします。

      はい。年末年始は返事が遅くなるかもしませんが、また分らないこともあったら書き込んでください。

6件の返信スレッドを表示中
  • トピック「スタイルシートでの文字装飾クラスの設定について」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)