パステルノート

パステル調のふんわりとした透け感のあるテンプレートです

CSS

いろんな文字装飾サンプル

ボーダー 下にボーダー ボーダーの太さを変更 ボーダーのスタイルを変更 左にボーダー ボーダーの太さを変更 ボーダーのスタイルを変更 端の丸いボーダー 色違い box内文字にボーダー ボーダー ボーダーの色を変える時は、div class="color_bd_色"で変更! …

【CSS】リンクを別窓で開くタグには別窓表示のiconを表示させる【属性セレクタ】

リンクテスト コード 結果 notつけてはてなブログ以外という書き方もできる リンクテスト 同窓 別窓 コード a{ &[target="_blank"]:after{ content:' \009'; //はてなブログ用iconName font-family: blogicon; //はてなブログ用 } } a[target=_blank]:after{…

【CSS】擬似要素の位置調整

:beforeでつけたiconと文字のラインを揃える 1のバージョン 2のバージョン 2のバージョンで正方形や正円を作る 完成形 Sass(SCSS) ちょっと改良 Sass(SCSS) 見た目 1のバージョンで無理やり正円作る 完成形 Sass(SCSS) 正方形・正円作るならposition:absolut…

【CSS】目次のリストを1-1とかにする

目次のカスタマイズ Sass(SCSS) 参考 目次のカスタマイズ はてなブログの目次で1-1とかにするやり方。 .table-of-contentsの中にcounter-resetを入れるとうまく作動しない。 .entry-content内のulに記載でうまくいく。 counter-incrementとcontentは.table-o…