どうも！フジグチです！ ブログのカスタマイズを進めていく中で一度は使いたくなるのが、「アイコン」ですよね。 はてなブログではデフォルトで読み込まれている「アイコンフォント」があります。 例えば とか とか。 これをCSSで装飾していくと、フォローボタンやシェアボタンを作ることができます。 はてなブログではこうしたアイコンフォントが125種類用意されています（2021/6/7 時点） カスタマイズを公開している都合上アイコンフォントをよく使うのですが、自分で用意したほうが使い勝手が良さそうなので、今回まとめてみました。 この記事の特徴 アイコンを大きく表示しているので探しやすい アイコンをクリックしてコードをコピーできる 使いたい形式に合わせてコードも付与できる アイコンフォントの使い方 HTMLで使用する方法 大きく表示したい場合 見たまま編集で使用する際の注意点 CSSの疑似要素で表示す
すぐ使える！はてなブログ向けアイコン一覧 こちらでははてなブログの標準機能で利用できるアイコンを一覧にしています。 お好みのものを見つけてみてください。 HTMLコードの書き方 HTML編集で下記のコードを追加してください。 <i class="クラス名"></i> 最初のアイコンを表示するには <i class="blogicon-hatenablog"></i> と書きます。 CSSコードの書き方 CSS編集で下記のコードを追加してください。 (クラスまたはID):before{ font-family:blogicon; content:"\(コード)" カテゴリ名の前に最初のアイコンを表示するには .categories:before{ font-family:blogicon; content:"\f000" と書きます。 ↓はてなブログのCSS編集方法はこちら↓ www.biz
はてなブログ｜無料で使える100種類超のアイコンフォント素材の使い方 - Simple Life Navi
こんにちは。シンプルライフナビです🌿 ブログでデザインアイコンを使ってみたいと思ったことはありませんか？ 私のブログでは無料で使えるアイコンフォントを一部利用しています。 そこで、はてなブログユーザーが標準で使える、はてなブログのアイコンフォントの使い方を記事にしました。 この記事のオススメ対象 はてなブログユーザーにオススメです。 はてなブログでは、外部のフォントを読み込まなくても標準で使えるアイコンフォントが備わっています。 ぜひ使ってみましょう！ 例えば、このページの左上の方にある「 トップ」というところや日付の前の時計マークなどにアイコンフォントを使用しています。 アイコンがあると文字だけよりもイメージしやすく、わかりやすく感じますよね😄 ブログのデザインカスタマイズや表現の修正をしようとお考えの場合などに、参考にしていただけると幸いです。 はてなブログユーザーならアイコンフォ
【はてなブログ】ブログアイコン、Webフォント一覧（124種類）使い方、表示されない時の対処法 - バンビの初心者ブログ教室
はてなブログで標準で使えるアイコンフォント（Webフォント）とその使い方を紹介します。 ↓↓これぜんぶ！ダウンロードしなくても使えます！！ グローバルメニューや、ブログ中のちょっとしたポイントなどを示したい時にアイコンを使うと目立ちますよね。 ポイントを目立たせたい時 ↓↓ ポイント スマホのボトムメニュー ↓↓（ボトムメニューのCSSはこちら） SNSのシェアボタンなどをつくるのにも使えます！ この記事では、上記のようなWebアイコンをはてなブログの中で使う方法やコピペでできるコード、また上手く表示されない場合の対処法などを紹介しますので、ぜひご参考にしてください。 アイコンは、Font Awesome などを外部から読み込む方法もありますが、はてなブログでは120種類ほどのオリジナルのWEBフォントをデフォルトで読み込んでいます。 これらのフォントであれば、外部から読み込むよりページが
【ブログカスタマイズ】「はてなブログ」のアイコンフォントの種類・使い方を解説｜グローバルメニューにおすすめ - redoブログ
今回は「はてなブログ」でデフォルトで使えるとても便利な”アイコンフォント”の表示方法を紹介したいと思います。 アイコンフォントを使いこなすとはてなブログの見た目がオシャレになり、見栄えもよくなります。 毎年はてなブログで使えるアイコンフォントは増えており、昨年から「DAZN」など6種類増えて、"合計123種類”になっています。 私のTOPページのグローバルメニューに以下の様なアイコンフォントを追加しています。 今回は最もカンタンな”はてなブログのアイコンフォント”の使い方と種類を紹介します。 アイコンフォントの使い方 アイコンフォントのサイズを変えたい場合 はてなブログアイコンフォント一覧 まとめ アイコンフォントの使い方 このアイコンフォントを使う時は、タグを使って、”HTML”上で下記のように記入します。 <i class="クラス名"></i> すると上の様に”クラス名”にあわせて色
はてなブログで使えるアイコンフォント一覧【全122種】2020年9月時点 - Takeuchi BLOG
・はてなブログで使えるアイコンフォントの使い方を知りたい。 ・はてなブログで使えるアイコンフォントの一覧を見たい。 こういった疑問に答えます。 本記事の内容 はてなブログで使えるアイコンフォント(blogicon)の一覧をまとめました（全122種） はてなブログのアイコンフォント(blogicon)の使い方 この記事を書いている私は、2006年から始めて、アフィリエイト歴は13年ほど。 当ブログの他にも複数ブログを運営していて、毎月コンスタントに収益が発生しています。 こういった私が、解説していきます。 本記事の内容 はてなブログのデフォルトで使えるアイコンフォント(blogicon)について はてなブログで使えるアイコンフォント(blogicon)の一覧まとめ（全122種）【2020年9月時点】 はてなブログのアイコンフォント(blogicon)の使い方 HTMLの中で、iタグを使う場合
サードパーティクッキー問題で、スターつけるのが面倒になっちゃうのは何とかなりませんか… - keroyonの『続・日々精進』日記
サードパーティクッキーがオフになっていると、スターつけるのが面倒じゃないですか…。 ＜目次＞ はてなのサードパーティクッキーオフ問題 自分はどうなのよ？ 対策…してみたけど Chromeの設定「SameSite by default cookies」を「Disable」に。 …お願い… はてなのサードパーティクッキーオフ問題 最近、読みに行くいくつかのサイトで「こんなの出るなぁ」と思っていたのですが…。 スターをつけるときに、スターボタンを押すと、スターがつかないだけでなく、 本来のスターのボタンと、このウィンドウの「AddStar」ボタンを押す必要があるのです。←マスクドニシオカ(id:maskednishioka) さんのサイトのスクショいただきました。勝手にすみません 1スターにつき2クリック。３スターだと6クリック。 反応が悪い時は、２つで離脱…って、くじけそうになります…。ｺﾞﾒ
皆さんは普段、WEBでAPIを作っていますでしょうか？ 最近はリッチなUIやスマートフォンアプリの開発が当たり前になってきたので、 APIを作ることが多いのではないでしょうか。 APIの開発を楽にするために、GraphQLを使ってみませんか？ 現状のAPI開発の悩み 現在APIを作るときは、REST設計で開発を行うことが多いと思います。 実際開発中に以下のような悩みを持ったことはないでしょうか？ API多すぎ 仕様がよく変わる ドキュメントがメンテできない もうRESTのAPI作るの飽きたよ… そんなあなたにぜひGraphQLを！ GraphQLを使えば楽しいAPI開発が待っているかも！ GraphQLって何？ 答: A query language for your API. (出典: GraphQL ) 以上です！(^o^) ……要するに、SQLみたいにクエリを書いて、サーバにリクエス
【2021年最新版全116種類】初心者でも超簡単！はてなブログのアイコンフォントの使い方。<i class>で表示できない方も。【コピペOK・CSSいらず】 - 30分集中のすゝめ
メニューや記事の中に「」こういうアイコンがあるの、見たことありますよね？ これ、とっても簡単に使えるので、是非使い方を覚えてブログに彩りを加えてみてください♪ 初心者でも分かりやすい解説を心がけるので、是非最後までご覧ください！ １．アイコンフォント の使い方 使い方はとっても簡単。 記事の「HTML編集」をクリックして、アイコンを挿入したいところに <tt class="クラス名"></tt> を挿入するだけです！ 「クラス名」のところにはお好きな種類のアイコンを入れます。 例えば、家のマーク「」が入れたければ <tt class="blogicon-home"></tt> とすればOKです。 クラス名は最後に一覧を載せているので、好きなものを選んでください。 ２．サイズを大きくする方法 サイズが小さくて見にくい！という場合には大きくして表示するやり方があります。 クラス名の後に半角スペ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログで使えるアイコンフォント全125種-コードを追加してワンクリックでコピー！ - フジブロっ！
すぐ使える！はてなブログ向けアイコン一覧 - Change Forward
GraphQLをはじめよう！ - UUUMエンジニアブログ