サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
www.crypto-ksw.com
この記事はこんな人におすすめ 文章ばかりで読みづらいブログ記事をどうにかしたい ボックスやリストの使い方がわからない 「あわせてどうぞ」を使いたい ボックスやリストが使えると、重要な点や伝えたい部分を強調したり見やすくすることができるのでとても重宝します。 今回ははてなブログでボックスやリストを使う方法についてまとめました。 ※四角く囲われた枠に文章が書かれたものを「ボックス」、箇条書きになっているものを「リスト」というようですが、この記事では一緒くたになってますが悪しからず! はてなブログでボックスやリストを使う方法 はてなブログでのCSSの設定方法 ①ダッシュボードの「デザイン」をクリック ②「カスタマイズ」⇒「{}デザインCSS」をクリック ボックスやリストのCSSを記述する htmlコードの書き方 「編集 見たまま」での使い方 ①「HTML編集」をクリック ②「HTML編集」にht
いつも人の見出しのデザインを拝借してばかりなので、今回はマスキング風の見出しデザインを作ったのでご紹介します。 CSSはこちらを参考にさせていただきました。 blog.minimal-green.com こちらではマステでメモ用紙を貼ったようなボックスのCSSなどが紹介されています。 ボックスデザインではシンプルなものを使っているブログが多いですが、こういったデザインもかわいいですねぇ。 マステ風の見出しデザイン ストライプの太さを変更する方法 見出しの角度を変更する方法 マステ風の見出しデザイン とりあえず、3色用意してみました。 コードを表示する h1{ background-image: linear-gradient(-45deg, rgba(255,230,200,.4) 25%, transparent 25%, transparent 50%, rgba(255,230,20
カスタマイズ内容 カスタマイズに必要なコードまとめ!貼るのは3か所だけ 「デザイン>カスタマイズ>ヘッダ>タイトル下」に貼るコード 「デザイン>カスタマイズ>記事>記事上・記事下」に貼るコード 「デザイン>カスタマイズ>{}デザインCSS」に貼るコード 「ボックス」や「マーカー線」の使い方 ボックスの使い方 マーカー線の使い方 参考サイト一覧 ブログタイトルのフォントを変更する方法 見出し、ボックス、シェアボタンのデザイン、グラデーション ページを開くときのスライドするアニメーションの設定 トップ画面の記事をカード型に変更する方法 関連記事よりも上にシェアボタンを設置する方法 カーソルを合わせた時に背景色を変えるアニメーションの設定方法 文字にマーカー線を引く方法 ナビゲーションメニュー下に任意のおすすめ記事を固定する方法 はてなブログのブログテーマ「Minimalism」のカスタマイズ例
カスタマイズ内容 カスタマイズに必要なコードまとめ!貼るのは4か所だけ 「設定>詳細設定>headに要素を追加」に貼るコード 「デザイン>カスタマイズ>ヘッダ>タイトル下」に貼るコード 「デザイン>カスタマイズ>記事>記事上・記事下」に貼るコード 「デザイン>カスタマイズ>{}デザインCSS」に貼るコード 「ボックス」や「マーカー線」の使い方 ボックスの使い方 マーカー線の使い方 参考サイト一覧 ブログタイトルのフォントを変更する方法 見出し、ボックス、シェアボタンのデザイン、グラデーション ページを開くときのスライドするアニメーションの設定 トップページの記事を一覧表示にする方法 関連記事よりも上にシェアボタンを設置する方法 カーソルを合わせた時に背景色を変えるアニメーションの設定方法 文字にマーカー線を引く方法 はてなブログのブログテーマ「Minimalism」のカスタマイズ例とコード
このページを最初にブックマークしてみませんか?
『www.crypto-ksw.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く