css

SEOで大切なタグクラウド。CSS編集の使い方も合わせて覚えると役立ちます。

今日の記事では初期設定、プラグイン以外でCSS編集も可能なタグクラウドをマスターして、編集の幅を広げる方法について詳しく解説していきます。

wordpressでのCSSの使い方

○　ワードプレス外観のStyle.cssから編集

ワードプレスにおけるCSS編集の方法にはいくつか存在しますが、ここでは外観のカスタマイズより編集する方法を紹介します。

wordpressログインそしてダッシュボードを確認します。外観タブよりカスタマイズをクリックしてみましょう。

カスタマイズからは基本情報や色、ヘッダーなどの編集リストがありますが、今回のこのリストにある追加CSSから編集していきます。

○　バックアップも取っておこう

CSSに限らずコードを記述しての編集作業は必ずバックアップを取っておきましょう。

バックアップを取っておかないと、コードにミスが存在したときにうまく表示されなくなります。そしてミスコードをひとつひとつ探していくのはとても大変な作業になります。

そのため、たとえば編集前のコードをまるまるコピーしてメモ帳などを貼り付け、編集後にうまくコードがはしらないときは編集前のコードを貼り付けてやり直すなど対策を整えておきましょう。

○　プレビュー確認しながら編集

今回はタグクラウドの見た目を変える作業になります。どのように見栄えが変わるかプレビューで確認しながら編集をしていきましょう。

慣れないうちは少しずつ編集、そしてプレビュー確認を繰り返しましょう。そうしないとコード編集で更新された場面がわかりにくくなります。

ミスなくコード編集を進めていくためにもプレビュー確認はきっちり実施しましょう。

ワードプレスStyle.cssから導入してみよう

○　外観→テーマエディタからStyle.cssを開く

さて、それでは実際にコードを記述する準備をしていきます。

前述したようにワードプレスへログイン、ダッシュボードの外観タブからカスタマイズを選択しましょう。

左側に表示されたリストの中から、追加CSSを選択しましょう。初期値では空白が表示されますが、ここにCSSコードを記載していきます。

○　コードを記述

コードの記述場所は、Style.cssを選択して左側に表示される欄になります。初期値として記述されているコードを編集してしまわないよう、注意しましょう。

見え方に関して、今回記述するコードを紹介します。追加CSSへのコピペして構いません。

——この下からコピペ——–

/*見え方*/
.widget_tag_cloud .tagcloud a{
background:#fff;
border:1px solid #000;
color:#000;
padding:1px;
margin:0px;
border-radius:1px;
text-decoration:none;
font-size:10px;
}

——この上までコピペ——–

ちなみに表示されるタグクラウドはこんな感じです。

○　各変数について確認しよう

background:#fff;
このコードは各タグの背景色を変更します。
ちなみに#fffは真っ白になります。

border:1px solid #000;
このコードは各タグの枠色を変更します。
ちなみに#000は真っ黒になります。

color:#000;
このコードは各タグの文字色を変更します。
#000は前述の通り真っ黒になります。

CSSをタグクラウドへ反映するには

○　外観→ウィジェットからタグクラウドを配置

さて外観タブからのカスタマイズより、追加CSSでコードを追加しましたが、これだけではタグクラウドへ反映されません。

前回ページでも紹介しましたが、外観タブよりウィジェットからタグクラウドを配置しましょう。

これで追加CSSで編集したタグクラウドが配置され、実際の表示へ反映されるようになります。

○　レイアウトを意識しよう

初期設定タグクラウドやプラグイン利用時同様、レイアウトを意識した見栄えにしましょう。

前述のとおり、カラーコード取得にてタグの色変更は可能ですが、隣接する記事やバナーに影響しないよう注意しましょう。

レイアウトを意識したCSS編集となるよう心がけましょう。