サイドバーに自分のサイトへのリンクを作る
サイドバーにリンクを作るのが、カンタンにできるとは…。深く考えず、ウィジェットのテキストを利用して、HTMLを書いてました。単にテキストリンクしか使ってなかったから、不便も感じず、疑問も感じず使ってました。でも、ワンタッチにできる方法発見です。(←そこまで、感嘆しなくても…)
- 最初に、外観から、ウィジェットで、リンクを右端のエリアに移動しておきます。これでリンクウィジェットが使えます。
- 次に、リンクから、新規追加を選択します。
- 名前にサイトの名前
- ウェブアドレスにそのサイトのURL
- 説明に、そのサイトの説明
- カテゴリに、属したいそのリンクのカテゴリを入れる
まだない場合は、「新規カテゴリ追加」で「私のサイト」と入力すると、カテゴリ一覧に「私のサイト」と表示されるのでチェックを入れる。
最初にリンクカテゴリーで「新規カテゴリーを追加」から作成しておけば、スラッグがちゃんと名前とは別に設定できるので、こっちでやったほうがいいかもしれないです。最初の方法でやると、スラッグに名前で使ったものがそのまま使用されるので、日本語で名前付けると、スラッグも日本語になってました。(あとで直せるけど) - リンクターゲットで、そのリンクをクリックしたときにブラウザを新たに開きたいので_blankにチェックを入れる
- 自分とリンク先の関係/間柄に 本人 自分の別のウェブアドレス にチェック
- 詳細で
- 画像のアドレスに そのリンク先のホームページのヘッダーの画像のパスを入力する
- 「リンクを追加」をクリック
これでブログを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;
}
でけた~。ちょっとうれしい見習いですぅ。
2011年11月24日1:10 AM| カテゴリー: HTMLとCSSのコード,見習い奮闘記| コメント (0)