Fourteen』はじめてのテーマカスタマイズ(第16回)<br>ウィジェットエリアの見ばえを良くするPART1今回からのPARTでは、メインサイドバーやコンテンツサイドバーのウィジェットエリアの見ばえを良くしていきたいと思います。管理画面の〔外観〕-〔テーマの編集〕をクリックし、〔編集するテーマの選択〕で親テーマを選び、スタイルシートを確認すると、ウィジェットタイトル部に関する設定を確認することができます。今回はまずメインサイドバーのウィジェットタイトルのデザインを設定します。ウィジェットの設定デフォルトの状態では、ウィジェットはタイトル部も白抜き文字で表示されているだけです。そこで、メインサイドバーのウィジェットタイトル部をデザインを指定しますが、メインサイドバーのウィジェット用として設定するので、コンテントサイドバーやフッター領域のウィジェットには、設定変更は反映されません。1子テーマのスタイルシートを編集する管理画面の〔外観〕-〔テーマの編集〕-〔編集するテーマの選択〕が子テーマであることを確認して、スタイルシートをクリックします。メインサイドバーのウィジェット・タイトルだけに適用されるように、自分が加えたい変更を記述します。例ですが、私は以下のように設定しました。rgba(255,255,255,0.5);}ウィジェットタイトル部の背景色はメニューバー横の検索ボタンと同じ色にしました。タイトル部の上下に2pxの白い実線を配置しましたが、ちょっと白い実線が濃すぎるので、rgbaで指定して、背景色の薄紫を透過するようにしています。#ffffff;』といった指定を、RGB指定に、最後に透過の度合いを指定しています。補足:RGBaとは色はカラーコードの16進数やカラーネームで指定するものでしたが、CSS3ではRGBaという値を指定する書式を使うことにより、色の透明度(alpha値)まで指定することができます。White(#ffffff)指定のRGB値は(255,255,255)です。そのあと、0~1の間で指定されているalpha値が、透過の度合いを表しています。ネット上には、『RGB、カラーコード変換』などのキーワードで検索すると、16進数の値からRGB指定の値を変換して教えてくれるツールを提供しているサイトが見つかります。かけられた上下の白い線が表示されました。結果確認13タイトル文字の前後に、マークを挿入するちょっと味気ないので、かわいらしくするために、テキスト表示できる図柄、『☆』と『☆彡』を、タイトルの前後に入れてみたいと思います。“☆彡”;}4結果確認2指定したマークが表示できました。結果確認2今回は手動で、テキスト表示できるマークを入れましたが、プラグインを利用することで、さまざまなマークを色つきで配置したり、カテゴリやアーカイブをリスト表示したりすることもできます。長くなりましたので、続きは次回。『BIOS/UEFI(EFI)』って何だ?関連コンテンツよろしくお願いします(*^_^*)訪問ありがとうございます。