このテーマのデフォルトの文字装飾見本一覧です。 参考にしてください。 主な文字装飾のタグは、 太字b 斜体i 打ち消しs 下線u 少し強調em 強調strong です。

上に戻るボタン&スマホ用下部固定メニュー PCでは上に戻るボタンを下部に固定、スマホではメニューを下部に固定するための設定です。 下部メニューはカテゴリボタンを押すと開閉するようになっています。 以下の記事の設定も同時にお願いします thepink.hate…

PCで見たときに上部固定メニューを表示する このテーマで反映するために必要なこと デザイン > タイトル下 に以下のhtmlを追加 必要な箇所をご自身のブログに合わせて書き換え 以上です。 html <div class="sticky"> <ul class="menu"> <li><a href="ご自身のブログURL"><i class="blogicon-home"></i>HOME</a></li> <li><a href="#">MENU<i class="blogicon-chevron-down"></i></a> <ul> <li>…</li></ul></li></ul></div>

レスポンシブでテーブルの形を変える 表示 tag CSS 参考 レスポンシブでテーブルの形を変える 表示 イベント名 開催日 場所 料金 ○×イベント 2021/01/31(日) 大阪府大阪市○× 1,100円 △□イベント 2021/02/1(月) 東京都新宿区△□ 2,200円 tag <table> <thead> <tr> <th>イベント名</th> <th>開</th></tr></thead></table>…

段落 画像（はてなフォトライフ） 脚注 続きを読む 罫線 h1見出し h2見出し h3見出し h4見出し h5見出し h6見出し asin 引用 リスト（ul,ol,dl） ul ol dl dl Q&A 風 Q & Aのコード テーブル コードブロック 段落 あのイーハトヴォのすきとおった風、夏でも…

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

pre表示テスト用投稿 デザイン確認用です。 css h1{color:navy;} sass h1{color:pink;} html <h1>orange</h1> はてな記法 * 見出し1 - リスト1 - リスト2 >> 引用 << Markdown #見出し1 1. リスト1 1. リスト2 > 引用 指定なし、その他のコード <h1>見出し1</h1> h1{color:navy…

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

@while 条件が真(True)である間 { ... }を繰り返す。 やりたいこと h1〜h6までのfont-sizeを一気に設定したい。 $iで数値設定 <7で6までと指定 (<=6でも6まで指定とイコール) h#{$i}でh + $iを指定 font-size設定 1.#{}で計算式+文字を括る 2.()で計算。計算…

mapデータ mapから取り出していろいろやってみる。 Sass $set_size: (mb: 120px, pc: 360px, hf: 180px); //mobile,pc,半分 /*通常の取り出し方 */ img { width: map-get($set_size, mb); } //map date 取り出し用関数 @function size($sizeName) { @return …

足し算引き算を@functionと@returnでする 変数名 足し引き add 足し算 pull 引き算 Sass //関数@function, @return /*足し算*/ @function add($x, $y) { @return $x + $y; } p { width: add(100px, 200px); } /*引き算*/ @function pull($x, $y) { @return $…

transition呼び出し楽にしたい $変数設定 @mixinで設定 @includeで呼び出し Sass //transition設定 //単に呼び出すだけ $transition:all .3s ease; img{transition:$transition;} //mixin使用で中身をいじれるように @mixin transition($property:all .3s ea…