451452453

454455456

457458459


〈ネコ・ログ〉の連載50回を記念して、ネコ写真のサムネイル画像９枚と９分割のテーブルをプチ・カスタマイズしてみました。サムネイルは今まで１枚ずつリサイズ（120×90px）して貼っていましたが、縦横比の変更（３：２→４：３）も面倒だし、画像を拡大するとボヤけて解像度が落ちるので、ブログにアップした写真（480×320px）をリサイズして使うことにしました。そのまま縮小（width: 120px; height: 90px）すると、縦横の比率が異なるため、上下に引き伸ばされてしまう。〈素晴しきネコ本の世界〉と同じように、「画像を中央の位置でトリミングする」ことにしました。「object-fit: cover」の１行を追加するだけで、縦横の比率を変えても画像が伸びたり、潰れたりしないサムネイルが簡単に作れます。さらに「border-radius: 10px」で画像の四隅を丸めて、外枠線を点線（dotted）から実線（solid）に変更しました。

テーブルの四隅もサムネイルのように簡単に変更出来ると思っていましたが、予想以上に難航しました。「tableを角丸にする」で検索したら、「border-collapse: collapse」を指定していると、四隅が丸くならないことが判明。「separate」に戻してから、二重線になったセルを消すわけですが、その手順が面倒にゃん。「border-spacing: 0」で二重線の隙間をなくす、「overflow: hidden」で外枠から背景色がハミ出ないようにする、隣接セレクタ（td + td）や疑似クラス（:last-child）を使って枠線を１本にする‥‥という方法が解説されていますが、外枠の左（left）だけが太く二重に表示されてしまう。ヘッダセル（th）を省略しているので、一筋縄では行かない？‥‥試行錯誤の結果、疑似クラスではなく、隣接セレクタを応用して二重線の縺れを解消しましたが、どちらの方法でもセルが均等に分割されません。もっと簡単にテーブルの四隅を丸くする方法はないのかしら？


<table class="tablekats" align="center">

<tr>

<td align="center" valign="middle">

<a href="https://sknys.blog.so-net.ne.jp/2018-06-01#com" target="_blank">451</a></td>

<td align="center" valign="middle"><a href="https://sknys.blog.so-net.ne.jp/2018-06-11#pkd2" target="_blank">452</a></td>

<td align="center" valign="middle"><a href="https://sknys.blog.so-net.ne.jp/2018-06-21#wcup1" target="_blank">453</a></td>

</tr>

<tr>

<td align="center" valign="middle"><a href="https://sknys.blog.so-net.ne.jp/2018-07-01#wcup2" target="_blank">454</a></td><td align="center" valign="middle"><a href="https://sknys.blog.so-net.ne.jp/2018-07-06#wcup3" target="_blank">455</a></td>

<td align="center" valign="middle"><a href="https://sknys.blog.so-net.ne.jp/2018-07-26#lab" target="_blank">456</a></td>

</tr>

<tr>

<td align="center" valign="middle"><a href="https://sknys.blog.so-net.ne.jp/2018-08-01#blue" target="_blank">457</a></td>

<td align="center" valign="middle"><a href="https://sknys.blog.so-net.ne.jp/2018-08-11#heaven" target="_blank">458</a></td>

<td align="center" valign="middle"><a href="https://sknys.blog.so-net.ne.jp/2018-08-26#york" target="_blank">459</a></td>

</tr>

</table>



<style>

.tablekats{font-size:x-large; width:480px; height:320px; table-layout:auto; border-collapse:separate; border-radius:10px; border-spacing:0; overflow:hidden; border:1px solid #339900; background-color:#ffffff; padding:0px; margin-left:15px; box-shadow:5px 5px 10px #808080; background-image:url("/_images/blog/_fc3/sknys/Kate-Bush-Cat.jpg")}



/* 2列目以降のセルの左だけ枠線を表示 */

.tablekats tr td + td{border-left:1px solid #339900}

/* 2行目以降のセルの上だけ枠線を表示 */

.tablekats tr + tr td{border-top:1px solid #339900}



.tablekats td a:link, .tablekats td a:visited{font-weight:bold; color:#f5fffa}

.tablekats td a:hover{text-decoration:none; color:#ccff99}

.tablekats td a:active{color:#}

</style>


　　　　　　　　　　　　　　　　　　　　＊

コメント 2（サンプル）





ヘッダの右端にある目障りな広告を非表示にするにする方法は？
by It's Neko! (2018-10-06 20:18)



下記のCSSを一行追加するだけで、簡単に消えてくれます＾＾
by sknys (2018-10-06 20:18)


アイコンの四隅を丸くするには「border-radius」で指定します。ゲスト・アイコンで背景色（background-color）を使用しているので、白枠はパディング（padding）ではなく、ボーダー（border）、外枠（outline）では四隅が丸くならないので、ボックス・シャドウ（box-shadow）を使ってみました。


<style>

.each-comment img{float:left; margin:0px 7px !important; border:solid 3px #ffffff; border-radius:5px; box-shadow:0px 0px 0px 1px #d5d5d5}

</style>


　　　　　　　　　　　　　　　　　　　　＊







Ｑ：ヘッダの右端にある目障りな広告を非表示にする方法は？
Ａ：下記のCSSを一行追加するだけで、簡単に消えてくれます。


<style>

.sbMenuR{display:none}

</style>


　　　　　　　　　　　　　　　　　　　　＊
　　　　　　　　　　　　　　　　　　　　＊


猫は宇宙で丸くなる 猫ＳＦ傑作選

  • 著者：シオドア・スタージョン（Theodore Sturgeon）/ フリッツ・ライバー（Fritz Leiber）他 / 中村 融（編）
  • 出版社：竹書房
  • 発売日：2017/08/31
  • メディア：文庫
  • 目次：パフ / ピネロピへの贈りもの / ベンジャミンの治癒 / 化身 / ヘリックス・ザ・キャット / 宇宙に猫パンチ / 共謀者たち / チックタックとわたし / 猫の世界は灰色 / 影の船 / 編者あとがき・中村 融