アイコンフォント

よそのサイトやブログを見ているときに、 「自分のサイトでもそんな装飾をしてみたい」 「そのアイコンってどうやったら使えるの？」 などと思ったことはありませんか？ チェックボックスとか→ 外部ページへのリンクとか→https://sigablog.com/ はたまたこのような注意書きなど 今回はこのようなアイコンを提供しているサービスの一つ Font Awesome を、はてなブログで使用する方法をお教えいたします。 また、最後にはCSSのサンプルコードも紹介いたしますので、読み終わったら早速チャレンジしてみてください。 スポンサーリンク // Font Awesomeとは？ はてなブログで使う…

メニューや記事の中に「」こういうアイコンがあるの、見たことありますよね？ これ、とっても簡単に使えるので、是非使い方を覚えてブログに彩りを加えてみてください♪ 初心者でも分かりやすい解説を心がけるので、是非最後までご覧ください！ １．アイコンフォント の使い方 使い方はとっても簡単。 記事の「HTML編集」をクリックして、アイコンを挿入したいところに <tt class="クラス名"></tt> を挿入するだけです！ 「クラス名」のところにはお好きな種類のアイコンを入れます。 例えば、家のマーク「」が入れたければ <tt class="blogicon-home"></tt> とすればOKです…

Font Awesome は多くのアイコンフォントを提供している非常にありがたい存在ですが、その数はフリーだけで1,600個を超える膨大な数であるため、かえって目的のフォントを探し出すのが大変だったりします。 普通であれば検索をかければ解決できるような問題なのですが、Font Awesomeは英語のサイトなので、言葉選びで困ります。 そんな悩みを解消するために、フリーのアイコンフォントのうち、個人的に使いそうだと思った186個のみをピックアップしてみました。 特徴１ 「Ctrl＋F」や「command＋F」で、日本語検索ができます。（ものによっては翻訳が微妙かもしれませんが…） 特徴２ フォン…

本ページにはプロモーションが含まれます。 自分用のバックアップも兼ねて、当ブログのHTML/CSSコードをご紹介します。 はてなブログのヘッダーに表示される「ブログのひとこと説明」をヘッダー上に表示されるようにした他、ヘッダー下の間延びした空間を無くしました。 また、フッターのカスタマイズも載せておきます。 ご自由にコピペして使っていただいて構いません。 利用規約を読む限り、はてなブログ無料版ではヘッダーとフッターはカスタム禁止のようです。はてなブログProの方のみお使いください。 はてな利用規約 - Hatena Policies 当ブログのヘッダー 当ブログのフッター 引用元 みやもとメモ…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、アイコンを用いて何かを説明しているUIはアクセシビリティに気をつけたいというお話をします。 アイコンで説明するUIとは ハンディキャップないユーザーにしか伝わらないマークアップ どこに問題があるのか ハンディキャップのあるユーザーにも伝わるマークアップ なにをしたのか さいごに アイコンで説明するUIとは 冒頭、「アイコンで説明するUI」とはどんなUIなのかを、具体例を用いてご説明します。 よくある例としては、以下のような比較表です。 アイコンを用いて説明しているUIの例 アイコンで利用可能/不可能を説明しています。直感的でわかり…

「関連記事を貼り付けたい！」 「埋め込みだと画像もあって読み込みが遅い！」 「ただのリンクだとそっけない！」 というときに使える文字だけのリンクのデザインをカスタマイズしました。 before はてなブログ カテゴリーの記事一覧 after はてなブログ カテゴリーの記事一覧 太字で見やすくなり、アイコンもついているので普通のリンクと差別化できるようになりました。 PCで見ている方はマウスホバーで少し右に動きます。 before after コピペコード HTML CSS 解説つきCSS 余談 まとめ コピペコード HTML カスタマイズしたリンクを使いたい時はこれを使います。 <p><a c…

はじめに こんにちは！High Linkでプロダクトデザイナーをしている、saori（@nyanta1060）です。現在、香りのサブスク「カラリア 香りの定期便」のデザインを担当しています。 カラリア 香りの定期便では、香水を入れ替えて持ち運べる「アトマイザーケース」を販売しているのですが、最近ではこちらのアトマイザーケースに刻印を追加できる有料サービス（以下、刻印サービス）をリリースしました。今回は、刻印サービスのオフラインとオンラインの体験をデザインした話を書いていこうと思います。 刻印サービスとは？ カラリアの刻印サービスは、アトマイザーケース¥980に、+¥590でお好きな刻印を入れら…

はてなブログを始めてしばらくすると思うこと 『サイトをもっとオシャレにしたい』 HTMLやCSSを理解していると、自分の思い通りのサイトを作ることができます。 今、「HTML？CSS？何それ？」と思った方、これからHTMLやCSSを勉強したい方向け！ HTMLやCSSを学ぶ方法や、はてなブログをカスタマイズする際に私が参考にしているサイトなどをご紹介します。 ▼今スグ本格的にHTMLやCSSを学びたい方にはこちらがおすすめ▼ はてなブログをカスタマイズするには CSSを書く際はエディタを使用する はてなブログをカスタマイズする際に参考にしているサイト サルワカ フジブロっ！ HTMLやCSSを…

当ブログ開設にあたってやりたいことのメモ。とりあえずブログ記事を書いて見つつ、ちょこちょこ取り組んでいきたい。 プロフィール画像の作成 見出しのcss更新 スマホから見た時のデザイン設定 アイコンフォントを使う ブログ記事のアイキャッチ画像を付ける 文章を書いてみてからカテゴリの見直し aboutページの更新 改行の仕方を調べる →連続した空白の行2つ（はてな記法一覧より） 対応の記録 プロフィール画像の作成 Iconponで作成しました。無料で、会員登録など不要でとても簡単に作れました。感謝。 トマトみたいですがりんごをイメージしました（りさんごなので）。

桜母ちゃん 最近ブログカスタマイズにはまってる 桜母ちゃんです 難しい事は分からないよ！ 設定の仕方だけ知りたいな! にゃん太 そんな時はにゃん太が解決するなりよ♫ にゃん子 にゃん太はうっかり早とちりさんだし、桜母ちゃんは超初心者だから私もお手伝いするにゃ よろしくにゃん♪ 疑問を解決！本日のテーマは はてなブログでFont Awesomeを表示する方法 はてなブログでFont Awesomeを表示する方法 Font Awesomeをはてなブログ用に書き換える方法 アイコンフォントのコードを2カ所修正する 具体的な手順 まとめ 桜母ちゃん アイコンフォントを使いたくってFont Awesom…

桜母ちゃん 最近ブログカスタマイズにはまってる 桜母ちゃんです 難しい事は分からないよ！ 設定の仕方だけ知りたいな! にゃん太 そんな時はにゃん太が解決するなりよ♫ にゃん子 にゃん太はうっかり早とちりさんだし、桜母ちゃんは超初心者だから私もお手伝いするにゃ よろしくにゃん♪ 疑問を解決！本日のテーマは Font Awesomeを使う準備と使い方 Font Awesomeを使う準備と使い方 Font Awesomeを使う準備 Font Awesomeのアカウントを作る Font Awesomeにログインする your kitを確認する your kitを自分のブログに貼り付ける Font Aw…

必要に駆られて仕方なしに下調べした時のメモ。 Laravel11 Vue3 Vuetify3 あたりを使う。 TODOアプリ作ろうかと思ったけど、設定以降は目新しい事もなく単調なのでjsonplaceholder使った。 フレームワークを追うのは疲れる。 Laravel Sailの導入 環境構築が面倒なので今回はSailを使ってみることにした。 WSL2環境で試した。以下を参考。 Docker Installation Using Sail 以下のコマンドでプロジェクトを作れる。「todo-app」の部分を好きな名前にすればよい。 curl -s "https://laravel.build/…

2024/5/10 https://megurocss.connpass.com/event/316265/ Anchor Positioninが気になってたので聞けてよかったです VSCodeの拡張機能開発でTailwind CSSを使う Kazuhiro Ebaraさん https://speakerdeck.com/ebarakazuhiro/vscodenokuo-zhang-ji-neng-kai-fa-de-tailwind-csswoshi-u VSCode拡張でTailwind導入 VSCodeの中にSlackをWebViewで埋め込む拡張を作った React + Tailwi…

​_ 「無料版はてなブログでも収益化はできるのか」「いつから収益化できるのか」といった疑問や今までブログをやってきたけど収益化が難しいという悩みを持っている方へ向けて、実際に「ブログ副業」している私が昨年「無料版はてなブログ」で100記事書いた際のアクセス数(PV数)と収益について解説します。 結論を先にいうと「無料版はてなブログでも収益化は可能」です。 ただし、ブログのジャンル選定やライティングスキル、キーワード選定などある程度のノウハウは必要です。 無料版であれば仮に失敗しても一切リスクがありませんし、実際に私が無料版で収益化を成功させています。 お金を増やす方法として投資などもあります…

https://ascii.jp/elem/000/000/270/270130/ 難しそうなんだが。 とはいえ、あいこにフォントの制御をかけられるわけね。それは良いよねz アイコンフォントの書き出し方についてhttps://www.vareal.co.jp/column/u/wheelのsvgアイコン