ブログを書いていると、「ここ大事なところだから強調したい」や「ほかにもこんなのがおすすめです」など文字をボックスで囲いたくなることってありますよね！ 今回は、自分のブログをもっと見やすくするために、ボックス(囲い枠)の作成方法を簡単に作成する方法をご紹介していきたいと思います！！ それでは行ってみましょう！ ボックスデザイン(囲い枠)の作り方 HTMLの記述内容 リンク先を記述する場合 CSSの記述内容 プレビュー CSSが反映されない場合の対処法 最後に ボックスデザイン(囲い枠)の作り方 HTMLの記述内容 <div class="box27"> <span class="box-title27">ボックスのタイトル</span> <ul> <li>箇条書きにしたい内容①</li> <li>箇条書きにしたい内容②</li> <li>箇条書きにしたい内容③</li> </ul> </di

他人のブログを見ている時に、トップページの記事一覧がタイル状に表示されるように設定してあり、「おしゃれでいいなぁ～」と思ったことはありませんか？ 今回はそんな人のために、cssの記述だけで簡単にトップ画面の記事一覧をタイル状に変更する方法をご紹介したいと思います。 コピペで設定できるようにしているため、とても簡単に設定可能です！ 注意 今回の方法は「はてなブログpro」である事が前提となります。 トップ一覧をカードタイプからタイル状に変更する方法 CSSの記述内容 プレビュー スマートフォン表示は通常にしたい場合 CSSの記述内容 CSSが反映されない場合の対処法 最後に トップ一覧をカードタイプからタイル状に変更する方法 まずは、はてなブログの「設定＞詳細設定」の中にあるトップページの表示形式を一覧形式に変更してください。 CSSの記述内容 CSS /*-----------------