【Simplidity2】サイドバーのタイトルを装飾しよう

スポンサーリンク

【Simplidity2】サイドバーのタイトルを装飾しよう

 

Simplicity2」のデザインカスタマイズサイドバーのタイトル装飾編」です。

デフォルトでは何も装飾がされておらず、少し大きめのフォントサイズに太文字にしただけのデザインになっています。

さすがに、デフォルトのままでは味気のないサイドバーになってしまいますので、今回はサイドバーを簡単に装飾できる方法をご紹介します。

CSSを多少利用しますが、知識がなくても編集できるようになってます。

スポンサーリンク

borderでサイドバーのタイトルを装飾する

borderでサイドバーのタイトルを装飾する

 

CSSの「border」を使うことで、簡単かつ割とデザイン性のあるタイトルに変更することができます。

 

完成例

 

まずは、実際に編集する前に完成例をお見せします。

 

編集前

編集前

 

編集後

編集後

 

編集前は、味気ないデザインでしたが少し手を加えるだけでだいぶマシなデザインになりました。

他にもを変えてみたり、線の種類を変えることができます。

 

編集方法

 

では、実際にサイドバーのタイトルを編集していきます。

編集は、WordPressの「ダッシュボード」から行います。(※FTPで直接「style.css」を編集しても大丈夫です。)

 

外観→テーマの編集を選択。

まずは、WordPressのダッシュボードを開き、「外観」→「テーマの編集」を選択してください。

 

スタイルシート(style.css)を選択。

表示されたページの右側に以下のような項目が存在するので、「スタイルシート(style.css)」を選択してください。

子テーマを利用していない場合は、上記画像以外にもたくさんのファイルが存在します。

 

style.css編集画面。

中央のファイル編集画面が「style.css」に切り替わりますので、そこにコードを追加していきます。

完成イメージと同じデザインにする場合は、以下を追加してください。

 

コピーしてそのまま貼り付けるだけで大丈夫です。

あとは、下のほうにある「ファイルを更新」をクリックすれば完成です。

 

CSSの説明

 

今回、使用したCSSは以下の3つです。

 

padding: 1px 8px 2px;
border-left: solid 3px;
border-bottom: dotted 1px;

padding

 

padding(パディング)」は、詳しく説明するとやや難しいのです。

 

今回の場合は、タイトルの文字列から追加した線までの間の距離ということを理解しておけば大丈夫です。

今回は、3つの値(1px 8px 2px)を指定していますが、「1~4つの値」を指定することができます。

 

  • 1つ … 「上下左右」が指定した値のパディングになります。
  • 2つ … 「上下」「左右」が指定した値のパディングになります。
  • 3つ … 「上」「左右」「下」が指定した値のパディングになります。
  • 4つ … 「上」「右」「下」「左」が指定した値のパディングになります。

border

 

border(ボーダー)」は、要素の境界に線を引きます

サイドバーのタイトルにが追加されたのは、これを指定したためです。

 

ボーダーは3種類の値を指定することができます。

スタイル」「太さ」「」の3つです。

  • スタイル … 線の種類を指定できます。(solid→1本線、dotted→点線など)
  • 太さ … 線の太さを指定することができます。
  • 色 … 線の色を指定できます。(「#000」などのカラーコードまたは「red」などのカラーネームを指定します。何も指定しなければ「black」です。)

スタイルは、他にもたくさんの種類があります。

詳しくは、「border-スタイルリファレンス」を参考にしてみてください。

 

ボーダーは、上下左右別々に指定することもできます。

  • border → 「上下左右」のボーダーを指定します。
  • border-top → 「上」のボーダーを指定します。
  • border-right  → 「右」のボーダーを指定します。
  • border-bottom  → 「下」のボーダーを指定します。
  • border-left  → 「左」のボーダーを指定します。

今回は、「border-bottom」と「border-left」を指定して、「下左」のみを表示しています。

 

background-imageで背景をつける

background-imageで背景をつける

 

CSSの「background-image」を使用することで、背景に画像を付けることができます。

「border」に比べると少し難易度は高くなります。

 

完成イメージ

 

編集前

編集前

 

編集後

編集後

 

好きな画像を背景にすることができますが、画像によってはCSSが複雑になる場合があります。

 

編集方法

 

ボーダーのときと同じくダッシュボードから「style.css」を編集します。

 

以上のコードを追加してください。

※「padding」「text-align」は画像によって変更してください。「text-align」は文字の位置です。

 

画像のURLはメディアから確認できます。

画像のURLは、ダッシュボードの「メディア」から確認することができます。

 

変更が完了したら「ファイルを更新」をクリックしたら完了です。

 

CSSの説明

 

今回、使用したCSSは以下の2つです。

background-image: url(画像のURL);
background-size: cover;

background-image

 

背景に画像を指定することができます。

url()」の中に画像のURLを入力してください。

 

background-size

 

background-image」で指定した画像のサイズを指定します。

  • auto → 自動算出。
  • contain → 縦横比は保持。背景領域に収まるように画像を拡大縮小する。
  • cover → 縦横比は保持。背景領域を完全に覆うように画像を拡大縮小する。
  • 長さ/高さ → pxや%で長さ/高さを指定できます。

を指定することができます。

 

画像に合わせてうまく収まるように指定しましょう。

まとめ

 

サイドバーのタイトル」を装飾する方法を2つご紹介しました。

背景画像を指定する方法はCSSが少し複雑になる場合がありますが、ボーダーはコピーして貼り付けるだけですので試してみてください。

コメント