賢威6.2プリティ版カスタマイズ,h2タグ幅,高さ変更

50代でも初心者でも大丈夫!自宅で月10万ネット収入計画

『賢威6.2』プリティ版カスタマイズ実践記③h2タグ 高さと色を変更する

読了までの目安時間:約 5分

 

前回は、記事タイトルの形状を変更してみました。

 

今度は、色をと思いましたが、

その前にちょっとだけスマートにしてみたらと思いました。

 

高さを変更すれば、ちょっとスマートになるような気がします。

では、チャレンジ(^^)/

 

 

今日も、「design.css」をさわっちゃいますので

一緒にチャレンジする方は、バックアップは必ずしましょう。

 

テンプレートのテーマ編集のバックアップはどうすればよいのか?

 

 

バックアップに使用するソフトは[TeraPad」がオススメです。

 

「TeraPad」の使い方は、こちらをチェック

 

 

 

 

まず、編集前の状態です。

 

image

 

 

emって、相対単位で「エム」と読みます。

「M」の大きさを基準にした大きさだそうφ(..)メモメモ

 

 

ちなみに

相対単位とは、ブラウザの表示を120%にした場合

それに合わせて、文字の大きさも大きくなるという意味です。

 

 

変更する場所は

「design.css」の下記の部分です。

 

image

上下左右、0.9emの間隔にしますよという意味です。

 

 

 

これこのように変更してみました。

 

image

上下:0.4em

左右:0.9emの間隔にしますという感じ。

 

 

ここで、「ファイルを更新」をクリックします。

 

 

 

さて、サイトを確認です。

 

image

 

なんか、スッキリしたと思いませんか?

 

 

さて、次は記事タイトルの背景色を変更してみます。

今は、やさしいピンクですね。

 

image

 

この部分を好きな色にすればよさげですね~。

 

今回は、最初に作っていたヘッダーの色に合わせてみます。

 

 

この部分にカラーコードを入れたいのですが、

ヘッダーに使った色のコードって??

 

 

という時は、

「カラースポイト」が便利です。

 

こちらのほうインストールと使い方を詳しく記事にしています。

この色を使いたい!見ている画面から色を抽出!「パワースポイト」

 

 

使いたい色の部分をポイントしたら、「スペース」キーを押すと

色を拾ってくれます。

 

image

 

そしたら、「#0A400」の部分をドラッグしてコピーしておきます。

 

そして、「design.css」の画面に移動し、

下の部分に貼り付ければOKです。

image

 

そして、「ファイルを更新」をクリックするのを忘れずに~。

 

 

 

実際のページを確認です。

image

 

 

 

できました~(^^)/

 

次はサイドバーのカスタマイズに進もうと思います。

 

 

 

 

WordPress 賢威6.2カスタマイズ    コメント:6

この記事に関連する記事一覧

コメントは6件です

  1. CSS編集はアルファベットばかりでヤル気がなくなってしまうのですが、画像解説があるとわかりやすくていいですね♪
    emのいじり方もわかったので助かりました。

    また、先日は相互リンクに応じていただきありがとうございます。
    アクセスがお返しできるように頑張りたいと思います

    • ikura ikura より:

      陽平さん、こんばんは!

      コメントありがとうございます。
      私も、CSSこの機会に勉強です。

      昨日わからなかったことが、
      解決したり

      便利機能を発見したりするのが
      楽しいです。

      まだまだ実践記は続きますので
      また遊びに来てください。

      これからもよろしくお願いいたします。

  2. ミヤビ より:

    ikuraさん
    初めまして、ミヤビといいます。

    ブログランキングから来ました。

    賢威もよく使うテンプレートの一つなので
    こういったカスタマイズ方法はとっても参考になります。
    ありがとうございます。

    また読ませていただきます。応援しています^^

  3. ikura ikura より:

    ミヤビさん、はじめまして!

    コメント&応援ありがとうございます。
    賢威を使用しているミヤビさんの、
    参考になったなんて 嬉しいです(^^♪

    まだまだ、カスタマイズしたいところが
    ありますので、また遊びに来てくださいね。

    これからも、よろしくお願いいたします。

  4. あずさ より:

    ikuraさん
    はじめまして、あずさと申します。
    ブログランキングから来ました。

    賢威を購入したまでは良かったんですが
    なかなか上手く使いこなせなくています。

    でも分かり易く紹介して頂けて
    自分でもできそうな気がしてきました!
    ありがとうございます。

    また勉強にお邪魔させていただきます!

    応援ポチ!

    • ikura ikura より:

      あずささん、はじめまして!

      ブログにコメント&応援ありがとうございます。
      あずささんも賢威お持ちなんですね(^^)/
      仲間ですネ!

      私も、1月に購入してからずっと放置でしたが
      ようやく、先月からボチボチ新しいサイト作成で
      使用し始めたところです。
      サイトを公開できるまで、
      実践記はまだまだ続きますので
      ぜひまたブログに遊びに来てくださいね(^^)/

      これからも、よろしくお願いいたします。

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: