サイドバーに自分のサイトへのリンクを作る

サイドバーにリンクを作るのが、カンタンにできるとは…。深く考えず、ウィジェットのテキストを利用して、HTMLを書いてました。単にテキストリンクしか使ってなかったから、不便も感じず、疑問も感じず使ってました。でも、ワンタッチにできる方法発見です。(←そこまで、感嘆しなくても…)

  1. 最初に、外観から、ウィジェットで、リンクを右端のエリアに移動しておきます。これでリンクウィジェットが使えます。
  2. 次に、リンクから、新規追加を選択します。
    • 名前にサイトの名前
    • ウェブアドレスにそのサイトのURL
    • 説明に、そのサイトの説明
    • カテゴリに、属したいそのリンクのカテゴリを入れる
      まだない場合は、「新規カテゴリ追加」で「私のサイト」と入力すると、カテゴリ一覧に「私のサイト」と表示されるのでチェックを入れる。
      最初にリンクカテゴリーで「新規カテゴリーを追加」から作成しておけば、スラッグがちゃんと名前とは別に設定できるので、こっちでやったほうがいいかもしれないです。最初の方法でやると、スラッグに名前で使ったものがそのまま使用されるので、日本語で名前付けると、スラッグも日本語になってました。(あとで直せるけど)
    • リンクターゲットで、そのリンクをクリックしたときにブラウザを新たに開きたいので_blankにチェックを入れる
    • 自分とリンク先の関係/間柄に 本人 自分の別のウェブアドレス にチェック
    • 詳細で
      1. 画像のアドレスに そのリンク先のホームページのヘッダーの画像のパスを入力する
      2. 「リンクを追加」をクリック

これでブログをWordPressで見ると、きっちりサイドバーに「私のサイト」が追加されます。

ありゃ、もとのヘッダーの画像だと、そのまま画像を読み込んでくるから、はみ出てレイアウトぐちゃぐちゃ。

ということで、ソースをチェックすると、このサイドバーのリンクの部分には、ulにxoxoとblogrollというクラスがつけられているので、このふたつのクラスがつけられているul以下にあるimg要素にはwidthを100%にしてねという

ul.xoxo.blogroll li img {
	width:100%;
	border:none;
}

を追加。これでimgの親要素の幅で表示されるハズ。ついでにHoverのときに表示されるボーダーも消します。
それからサイドバーのリストの先頭文字として、before擬似要素を使って▼を表示させていたので、これもとっちゃいます。

div#sidebar li ul.xoxo.blogroll li :before {
	content:none;
}

でけた~。ちょっとうれしい見習いですぅ。