こんにちは、ヨシタカです！みなさん、ブログ楽しんでますか？ 前回はブログ記事にLINE風吹き出しを載せる方法をご紹介しました。 smatech.hatenablog.com いろいろなブログをみてみると、四角い枠で文章を囲んでいるものがあって、わたしもやってみたかったのですが、、、 はてなブログではワンクリックで囲み枠にするアイコンってないんですよね。。。 そこで今回はコピペするだけでブログ記事に囲み枠をかんたんに追加する方法をまとめましたので、ご紹介したいと思います。 えっ、ほんとうにコピペするだけなの？ そうですね、コピペするだけです。ただ、基本色を赤（#fc4a1a）にしているので、色を変えたい場合はこの部分を変更してください。 カラーコードはWEB色見本 原色大辞典 - HTMLカラーコードのサイトさんがまとめていただいているので参考にしてくださいね。代表となる色を一部記載します。

はてなブログのサイドバーに設置できる 「注目記事」の一覧に順位を表示してみます。 完成のイメージは下のような形になります。 注目記事の順位表示 CSSの編集 順位を表示するCSS 順位のカウンタ 順位の表示 バッジ型の順位表示にする まとめ CSSの編集 今回設定が必要なのは、CSSのみです。 はてなブログでは、 「管理画面」→「デザイン」→「カスタマイズ」→「デザインCSS」で CSSの編集ができます。 cssの編集 順位を表示するCSS デザインCSSの欄に以下のコードを追記します。 /* ranking */ .entries-access-ranking{ counter-reset: rank 0; } .entries-access-ranking-item:before{ counter-increment: rank 1; content: counter(rank) "