よく見るパターンやつ。そんなよく見るやつでも素人が一から作ろうとすると結構必死。
サイドバーにボーダーで囲った2カラムのカテゴリーリンクを設置したい
これが検索かけても結構出てこない。マジでない。サイドバーカスタムツールとかないのだろうか…
画像リンク1カラムの縦への設置は結構あるのだけど、2カラムがホントになくて…もう仕方ない。何が正しくて何が間違いなのか分からないけどやるしかない。
んなわけで、いまサイドバーにも設置してある2カラムのリンク。これ画像じゃないので踏むと当たり前ですが飛びます…
マウスを乗せるとピンクになる！緑とピンクのナイスコンビネーション！春な感じ！
さて、色々晒していきたい。
と、その前に、ぶっちゃけオススメしない。Font Awesomeからアイコンをそのままごっそり貼りつけて良いことなんて何一つないと思う。
ただし、そこはブログのページに既に使われているであろうその他多数のアイコン達と要相談ってところ。
サイドバーに2カラムのアイコン・テキスト付のリンクを作る
用意するのはid1つ、classが2つ。名前はいつものように自由に付ける。
- catespace
多分これいらないのだろうけど、リンク全体を<div class="catespace"></div>で囲って後になってmargin調整したくて付けたのだけど、たぶんいらない。
- catespaceid
- catespaceul
実質ここから始まる。<ul class="catespaceul" id="catespaceid">を先頭にliを使ってリンクを作っていく。#catespaceidにmargin-topやbottomを付けてあげると上下余白ができるので、始めにリンク全体を囲った<div class="catespace"></div>はたぶんいらない。
名前の最後にulやidを付けたのは「わかりやすいかな？」という単なる安易な考え。名前が違えば別に必要はない。
<div class="catespace"><ul class="catespaceul" id="catespaceid">から始まり、ここでは6つ分のブロックを作るのでこの後に<li></li>を6つ用意する。
とりあえずはこんな感じ。
<div class="catespace"> <ul class="catespaceul" id="catespaceid"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
<li></li>の中身は<li><a href="url" title="リンク名">Awesomeのアイコンコードとリンク名</li>となっている。
仮にトップページへの戻りリンクで例えるならば…
<li><a href="トップページのurl" title="TOP"><i class="fas fa-home"></i>TOP</a></li>になる
CSS擬似要素を使ってアイコンを表示できるけれど、複数もあると面倒なのでそれはやらない。
2カラムにする為のCSSを作っていく
まず最初に横並びにするためにidに指示。paddingはいらないと思うのだけど、ここで設置した時にどこかのpaddingに干渉しているのか大きな余白が出来てしまったので0を指示した。表示に問題が無ければ必要がない（たぶん）
#catespaceid { display: flex; flex-wrap: wrap; padding: 0; }
widthの数値は設置する場所によって、もしくは自分が良しとする数値を入れる。heightも同じく。marginは隣接するリンク間のスペース。borderで囲み線を入れた場合にリンクを囲った線を離してくれる。入れる数値はwidthの数値と要相談。list-style-type: noneは必須。
.catespaceul li { width: 47%; height: 75px; margin: 3px 3px; border: 1px solid #ccc; list-style-type: none; }
リンクテキストへの指示。background-colorを指定するとオンマウス時に背景色が変わる。必要がないのなら削除。text-decoration: noneはリンクテキストの下線の非表示。
.catespaceul a { text-align: center; font-size: 12px; text-decoration: none; display: block; width: 100%; height: 100%; color: #000; } .catespaceul li a:hover { background-color: #ff000038; color: #000; }
これはアイコンへの指示。font-sizeでアイコンの大きさを変えられるのだけど、変更すると位置がズレるのでpaddingの調整が必要。
.catespaceul i { display: block; font-size: 30px; color: #50c754; padding: 10px 0 5px 0; }
まとめ
なんてやると希望通りのモノが出来たのだけど、どこかおかしいところはあるのかもしれない。
一応codepenで最後にコピペして確認したけど…表示はされている。codepenでFont Awesomeのアイコンを使うときはHTMLの<head>の部分に
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
を入れないとアイコンは表示されない。
widthの数値を変えてあげると2カラムではなく3カラムにもなるけど、中に入れてあるテキスト次第って感じだと思う。
以下のコードをここではそのままサイドバーに入れて使ってます。
<div class="catespace"><ul class="catespaceul" id="catespaceid">
<li><a href="#" title="雑談・議論"><i class="far fa-edit"></i>雑記</a></li>
<li><a href="#" title="ブログ・Web関連"><i class="far fa-clone"></i>ブログ・Web関連</a></li>
<li><a href="#" title="Kindle生活"><i class="fas fa-tablet-alt"></i>Kindle生活</a></li>
<li><a href="#" title="その他、雑感"><i class="fas fa-book"></i>その他、雑感</a></li>
<li><a href="#" title="noindex"><i class="fas fa-comment-slash"></i>noindex</a></li>
<li><a href="#" title="ブログってなんなんだろう"><i class="far fa-question-circle"></i>ブログって…</a></li>
</ul></div>
<style>
#catespaceid {
display: flex;
flex-wrap: wrap;
padding: 0;
}
.catespaceul li {
width: 47%;
height: 75px;
margin: 3px 3px;
border: 1px solid #ccc;
list-style-type: none;
}
.catespaceul a {
text-align: center;
font-size: 12px;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
color: #000;
}
.catespaceul li a:hover {
background-color: #ff000038;
color: #000;
}
.catespaceul i {
display: block;
font-size: 30px;
color: #50c754;
padding: 10px 0 5px 0;
}
</style>
リンク表示を2カラムにしたいと願う人に届いて参考になれば…なんて思っております。
