
■Seesaaブログのサイドバーのリンク部分に設定されている下線を削除
■独自で作っていたclass「side-waku」を使用して削除
■CSSに「.side-waku a」または「.side-waku .module__body a」を追加
■「side-waku」を作っていない場合の処理
■独自で作っていたclass「side-waku」を使用して削除
■CSSに「.side-waku a」または「.side-waku .module__body a」を追加
■「side-waku」を作っていない場合の処理
私は以前書いた記事<■リンクの設定を変更する(文字色の変更など)>で、自分のブログのリンク文字には通常時でも下線を表示するように設定しています。
どの文字がリンクなのか、わからなかったら困るからです。
下線を入れておけば、そこにリンクが貼ってあるということを閲覧者にアピールすることができます。
そう思っていたのに、前回の記事<■サイドバー「人気記事」のリスト表示を編集して、リストの先頭に数字を表示させる>でサイドバーの「人気記事」を編集した時に、設定していたリンクの下線を外してしまいました。
「人気記事」の記事タイトルに対するリンク下線を外したことで、サイドバーのリンク部分には下線があったりなかったりしている状態になってしまいました。
例えば「人気記事」や「最近の記事」のリンク部分には下線は無いけれども、「過去ログ」や「カテゴリ」には下線が付いているわけです。
別に気にならない、という方はそのままでいいと思いますが、私は気になってしまいます。
なので、この記事ではサイドバーの各コンテンツのリンク下線を設定したいと思います。
もちろん、リンク文字には下線を付けるというスタイルにしていない方は、この記事は飛ばして、どうぞ。
作業方法について
サイドバーのリンク設定を変更するために、私が独自で作ったclass「side-waku」を利用します。
class「side-waku」は、コンテンツを線で囲み、背景色を付けるという内容のclassです。
以前の記事<■【Seesaaブログ新デザインシステム】サイドバーのコンテンツを線で囲む(過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事)>では、コンテンツHTML編集画面で、サイドバーに表示させるつもりの全部のコンテンツに「side-waku」を記述しました。
リンク部分を一気に設定したいならば、このclassを利用すれば簡単です。
もちろん、サイドバーの各コンテンツを枠線で囲んでいない場合もあると思います。
枠線を設定していない場合(class「side-waku」を記述していない場合)は、下記で説明しているように新しくclassを作るか、ご自分でコンテンツHTMLを確認しながらCSSを編集してください。(私は自分のカスタマイズを記事にしているだけであり、しかもそんなに親切ではないのです!w)
ちなみに、リンク部分の下線を消したいわけですから、追加するコードは「text-decoration: none;」です。
ここまでのカスタマイズでは「最近の記事」や「人気記事」の編集をした時に、既に「text-decoration: none;」を記述して下線を削除しています。今回改めて「text-decoration: none;」を記述しますが、同じパーツに対して二重の指示をすることになります。これは同じ指示を重ねて書いただけの話で、以前の指示(「最近の記事」や「人気記事」の記述)を削除してもしなくてもどちらでもかまいません。残していたとしてもページ表示上の問題は何もありません。(私は、メンドクサイので削除しません)
編集する前に「カレンダー」のリンク表示を考える
作業をする前に、少しだけ「カレンダー」のリンク設定について考えておきます。
現在のカレンダーの表示はこんな感じです。

キャプション部分(「年月」部分)やプレビュー表示(「<<」部分)にリンク下線が入っています。
もしも「side-waku」をそのまま使ってリンク下線を外した場合は、これらの下線も消えます。
閲覧者がこのキャプション部分やプレビュー表示部分にリンクが設定されていると気付くかどうか、ということが問題です。
そもそも以前の記事でリンク部分に下線を表示するように設定した時、「それがリンクであることを示すために」常に下線を付けるようにしていたわけで、閲覧者が「ここにリンクが貼られてる」と気付かないならば、それはユーザビリティ的にも不親切だと思うのです。
サイドバーの「カレンダー」以外のコンテンツはリスト表示なので、リンク下線を削除してしまっても問題無いと思います。
例えば「カテゴリ」や「過去ログ」はリスト表示ですので、そこに下線が無くても閲覧者はマウスを乗せるという作業をするでしょう。リンク部分にマウスを乗せると文字色を変更するように設定していますから、閲覧者はマウスを乗せた時に「あ、リンクが貼ってあるんだな」と気付くと思います。
そもそもなぜ、わざわざサイドバーに「カテゴリ」や「過去ログ」を掲載しているのかを考えた時に、サイドバーからどこかに飛ばしたいからコンテンツを準備しているわけで、そういうことは閲覧者も容易に想像できるのだから問題ないです。(サイドバーの意味を想像できない閲覧者なんて今どき居ないでしょうし、想像できないならば、そんな程度の閲覧者のことを考える必要はないです)←酷いwww
「カレンダー」の日付部分も同じことで、背景色を付けていることで「ここにリンクが貼られている」とわかりやすいと思います。でも、「カレンダー」の「年月」部分はどうかしら?ということです。
「年月」部分は太字表示なので、ただの強調表示だと思われてしまう可能性があります。ということは、リンクが貼られていることに気付いてもらえない可能性があるわけです。
「年月」部分のリンク設定に気付いてもらえなくてもかまわないならば、class「side-waku」を使って一気にリンク下線を外します。
私のように「年月」部分には下線を付けておきたい場合は、「side-waku プラス ○○」というカタチでリンク下線を外す設定をしなければいけません。
「side-waku」を使ってサイドバーのリンク下線を削除する
サイドバーのリンク下線をすべて削除する方法です。
この方法は、「カレンダー」の「年月」部分のリンク下線も削除します。
CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で、新しく作っていた「side-waku」というclassを探します。
「side-waku」の下に、下記の「追加するコード」をコピペするか直接記述し、変更内容を「保存」します。
<追加するコード>
.side-waku a {
text-decoration: none;
}
text-decoration: none;
}
●「side-waku」のリンク部分なので「side-waku a」というclassになります。
●「text-decoration: none;」は「下線なし」という意味の記述です。
●「side-waku」を設定しているコンテンツのリンク部分の下線がすべて削除されます。
●あくまでも『「side-waku」を設定しているコンテンツ』であることにご注意ください。私は以前の記事<■サイドバーのコンテンツを線で囲む(過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事)>で説明しているように、自分がサイドバーに設定しているコンテンツ(7個ぐらい)にしか「side-waku」を設定していません。
●今後、サイドバーに「自由形式」で何か別のコンテンツを追加した場合、自由形式内のリンク部分にも下線は付きません。(当然の話です)
新しく追加した「自由形式」コンテンツのリンク部分に下線を付けたい場合は、そのような指示をCSSで改めて記述することになります。
コード編集後のCSSと、例として「カレンダー」


「カレンダー」を除外してサイドバーのリンク下線を一気に削除する
サイドバー「カレンダー」の「年月」部分のリンク下線を削除してもかまわないならば、上記のように「side-waku a」の設定をCSSに記述すればいいので非常に簡単です。
でも私自身はカレンダーのキャプション部分のリンク下線は残しておいた方がいいと考えますので、そうなると、「カレンダーを除外した状態で、サイドバーのリンク下線を全部削除する」という設定をしなければいけません。
(以下、上記でスタイルシートに記述した「side-waku a」の記述は存在していないことが前提で説明します)
コンテンツHTMLで各コンテンツ部分の記述を確認すると、「カレンダー」部分にだけ存在しないタグがあります。「<div class="module__body">」です。
このタグのclass「module__body」は、各コンテンツのボディ(本文)部分を指しています。
「カレンダー」はカレンダー表示(日付を表のように表示)をしなければいけないのでclass「module__body」が存在せず、代わりに「<table>」タグが記述されています。
ここでは「カレンダー」を除外したいので、「カレンダー」には存在しない&他のコンテンツには存在しているclass「module__body」を使えばいいのです。
CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で、新しく作っていた「side-waku」というclassを探します。
「side-waku」の下に、下記の「追加するコード」をコピペするか直接記述し、変更内容を「保存」します。
<追加するコード>
.side-waku .module__body a {
text-decoration: none;
}
text-decoration: none;
}
●「text-decoration: none;」は「下線なし」という意味の記述です。
●「side-waku」を設定しているコンテンツで、且つ「module__body」が設定されているコンテンツのリンク部分の下線がすべて削除されます。(つまり、「カレンダー」以外全部です)
●あくまでも『「side-waku」を設定しているコンテンツ』であることにご注意ください。私は以前の記事<■サイドバーのコンテンツを線で囲む(過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事)>で説明しているように、自分がサイドバーに設定しているコンテンツ(7個ぐらい)にしか「side-waku」を設定していません。
●今後、サイドバーに「自由形式」で何か別のコンテンツを追加した場合、自由形式内のリンク部分にも下線は付きません。(当然の話です)
新しく追加した「自由形式」コンテンツのリンク部分に下線を付けたい場合は、そのような指示をCSSで改めて記述することになります。
コード編集後のCSSと実際のページ


「side-waku」未設定の場合にサイドバーのリンク下線を削除する
私が作ったclass「side-waku」を設定していない場合は、申し訳ありませんが、ご自分でコンテンツHTMLを見ながら作業してもらうことになります。
以下、一応説明はしますが、私自身が設定している内容を元に説明できませんので(私自身は「side-waku」を記述したカスタマイズしかやっていませんので)画像を掲載できません。ご了承ください。
コンテンツHTML上で編集する場所ですが、改めて説明するのは正直面倒なので、以前の記事を参考にして作業をしてください。
この記事の見出し『サイドバーのコンテンツ部分に新しいclassを記述する』を読むと、作業をする場所がわかると思います。

■【Seesaaブログ新デザインシステム】サイドバーのコンテンツを線で囲む(過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事)
サイドバーにはコンテンツを表示させていますが、今回は、タイトル下のコンテンツ部分を線で囲んでみたいと思います。線で囲むことで‥‥
サイドバーにはコンテンツを表示させていますが、今回は、タイトル下のコンテンツ部分を線で囲んでみたいと思います。線で囲むことで‥‥
サイドバーのリンク下線を削除する
そもそも最初の段階で、ブログ全体のリンク設定をしているはずだと思います。
「a」「a:hover」に対するスタイルを設定、しましたよね?<参考■リンクの設定を変更する(文字色の変更など)>
ブログ全体のリンク文字に対する設定をすると、メインコンテンツもサイドバーも設定したスタイルでリンク部分が表示されるわけです。その中でサイドバーのリンク下線だけを削除したいのですから、新しくclassを作って指示を出すことになります。
まずは「コンテンツHTML」画面で、各コンテンツを「div」で挟みます。
私が作った「side-waku」(サイドの「枠」)というclass名にする必要はありませんので好きな名前を作り、サイドバーに表示させているコンテンツを開始タグ「<div class="○○(class名)">」と終了タグ「</div>」で挟みます。
挟む場所は、上記で紹介している記事を参考にしてください。
ここでは仮に、「side-A」というclass名で説明します。
サイドバーに表示させているコンテンツを開始タグ「<div class="side-A">」と終了タグ「</div>」で挟みますが、挟んだだけでは、まだ何の変化もありません。(CSSで「side-A」のスタイルを決めていないので当然です)
もしもサイドバーのコンテンツに私のように枠線や背景色を表示させないのであれば、「side-A」について何のスタイルも考えなくていいです。単純に『コンテンツを「side-A」という枠で囲んだ』という状態ですから、そのままで大丈夫です。(目印を付けた、ぐらいの感覚です)
スタイルを決めたいのは、あくまでも「side-Aのリンク部分」なので、CSSでは「side-A a」というclassを記述してリンク下線を外す指示を出します。
「カレンダー」のキャプション部分も含めて下線を削除
「カレンダー」のキャプション部分(「年月」部分)等も含めて、すべてのコンテンツのリンク下線を消す場合は下記のコードをCSSの空いている部分に追加します。
<追加するコード>
.side-A a {
text-decoration: none;
}
text-decoration: none;
}
●「side-A」を設定しているコンテンツのリンク部分の下線がすべて削除されます。(つまり、「カレンダー」も含めて全部のコンテンツです)
●「text-decoration: none;」は「下線なし」という意味の記述です。
●あくまでも『「side-A」を設定しているコンテンツ』であることにご注意ください。「side-A」というclass名のdivで挟んでいないコンテンツには、この設定は効きません。
「カレンダー」のキャプション部分は除外して下線を削除
「カレンダー」のキャプション部分(「年月」部分)等は残して(除外して)、カレンダー以外のコンテンツのリンク下線を消す場合は下記のコードをCSSの空いている部分に追加します。
<追加するコード>
.side-A .module__body a {
text-decoration: none;
}
text-decoration: none;
}
●「side-A」を設定しているコンテンツで、且つ「module__body」が設定されているコンテンツのリンク部分の下線がすべて削除されます。(つまり、「カレンダー」以外全部です)
●「text-decoration: none;」は「下線なし」という意味の記述です。
●あくまでも『「side-A」を設定しているコンテンツ』であることにご注意ください。「side-A」というclass名のdivで挟んでいないコンテンツには、この設定は効きません。
次の記事の紹介
次の記事では、Seesaaブログのタグクラウドを編集します。

■【Seesaaブログ新デザインシステム】サイドバー「タグクラウド」に記事数を表示、タグの文字サイズ変更、単語の途中で改行しないようにする
Seesaaブログのサイドバーのタグクラウドは、タグの登録記事数に応じて文字の大きさが変更されるように設定されています。これがちょっとデカすぎるような気がしますので、どうにかしたいと思いました。‥‥
Seesaaブログのサイドバーのタグクラウドは、タグの登録記事数に応じて文字の大きさが変更されるように設定されています。これがちょっとデカすぎるような気がしますので、どうにかしたいと思いました。‥‥