どうも！フジグチです！ はてなのロゴが新しくなりました。わたしが思うはてな（ブログ）のロゴは なのですが、変わったのは、株式会社はてなのロゴマークです。 以前のひし形のマークからシンプルな丸になり、「？」はてなマークが浮かんでいるのがよく分かるようになりました。 新しいロゴを見て気付いたのですが、以前のロゴも「？」はてなマークをモチーフにしていたんですね。 このロゴについてはてなは以下のように述べています。 ロゴマークは、「ノード」や「二進法」をモチーフに、知的好奇心と当社を象徴する「はてなマーク」が浮かび上がるデザインです。 また、技術の力でWebサービスを開発する「ものづくり」企業として、シンボルマークも身近なものを使って「つくる」ことができるよう設計しました。 「身近なものを使ってつくることができる」という言葉に「知的好奇心」がくすぐられたのでHTMLとCSSでこのロゴを作ってみまし

どうも！フジグチです！ 前回はてなブログで使えるアイコンフォントをまとめましたが、今回は早速そのアイコンフォントを使い、サイドバーにアイコンを並べてカテゴリを表示するカスタマイズをしていきます。 記事内では「カテゴリ」として紹介しますが、おすすめ記事やまとめページなど「リンク」として使えるので、使い方は色々アレンジできます。 さらに、はてなブログのアイコンフォントだけでなく、FontAwesomeを使ったカスタマイズ方法も解説していきます。 はてなブログのアイコンフォント125種 ＋ FontAwesomeは1609種、あわせて1734種類のアイコンが使えます！多すぎて困っちゃいますね。 この記事の特徴 入力フォームに入力してコードを編集 記事内でプレビューできる カラーの変更ができる マウスオーバー時の背景色も選択したカラーに合わせて変更される はてなブログのアイコンフォントとFontA

どうも！フジグチです！ ブログのカスタマイズを進めていく中で一度は使いたくなるのが、「アイコン」ですよね。 はてなブログではデフォルトで読み込まれている「アイコンフォント」があります。 例えば とか とか。 これをCSSで装飾していくと、フォローボタンやシェアボタンを作ることができます。 はてなブログではこうしたアイコンフォントが125種類用意されています（2021/6/7 時点） カスタマイズを公開している都合上アイコンフォントをよく使うのですが、自分で用意したほうが使い勝手が良さそうなので、今回まとめてみました。 この記事の特徴 アイコンを大きく表示しているので探しやすい アイコンをクリックしてコードをコピーできる 使いたい形式に合わせてコードも付与できる アイコンフォントの使い方 HTMLで使用する方法 大きく表示したい場合 見たまま編集で使用する際の注意点 CSSの疑似要素で表示す

どうも！フジグチです！ 当サイト製作のテーマ【Cappuccino】公開から1ヶ月が過ぎ、289インストール（※2021/1/5時点）でありがたいことに、「人気のテーマランキング」にも入るなど多くの方々に使って頂いています。 Cappuccino公開からスパンは短いですが、もう1つテーマを公開したのでお知らせいたします。 今回私がテーマを作った理由は、はてなブログのこの記事を読んだからです。 デザインテーマコンテストが開催され表彰されればギフト券が貰え、最大100名の参加者にCanva Proの無料クーポン（3ヶ月分）がもらえるという、イベントのお知らせでした。 偶然にもCappuccinoは12月3日に公開しているので、参加賞が貰える！と喜んでいたのですが、テーマの募集期間は12月25日～となっておりその前の投稿は無効になると。 マジすか。。。タイミング悪過ぎないですかね。。。 じゃあ「