→favicon
こんにちは！コミュ障女子大生ルカです。今回、ちょっと技術面で困ったことが起こったので、もし有識者の方がいらっしゃったら助言をいただきたいです……。 ログインしている方でしたら、コメント欄は自由開放になっているはずなので、どんなことでも良いので情報をお願いします……！ トラブル内容 タイトルが全てなのですが、もう少し詳しく説明します。Googleなどで検索した場合、記事のタイトルやサイトの名前と一緒にサイトのアイコン画像が表示されます（この画像をファビコンというそうです）。 私のサイトの場合、下記のように顔に赤で「謎」と書かれている、青い髪の女の子が表示されていると思います（GoogleやYah…
リンクカードの設定方法（OGP設定） サムネイル画像の作り方 X（Twitter）用の表示設定 画像が更新されないとき ファビコンの設定方法 ファビコン画像のポイント 👆埋め込みしたときに画像が表示されるようにしてみました。 さらにファビコンの設定もしてみたので、タブにもアイコンが出ます。 かわいいｗ リンクカードの設定方法（OGP設定） リンクカードで画像を表示するには、OGP（Open Graph Protocol） を設定します。 トップページのHTMLの <head>～</head> の間に、以下のmetaタグを入れます。 <meta property="og:title" conte…
Yahoo! JAPANの検索結果は、同じ順位でもGoogleとはクリック率（CTR）が大きく異なることがあります。その最大の理由は、検索結果ページの構造や独自コンテンツ枠の存在にあります。ニュース・知恵袋・ショッピングなどのカード型情報が上部に表示され、ユーザーの視線を奪うため、通常の検索結果リンクは埋もれやすいのです。 しかし、この特性を理解し、タイトルや説明文（メタディスクリプション）、さらにはビジュアル要素をYahoo!仕様に最適化すれば、同じ順位でも大幅にCTRを改善できます。特にYahoo!ユーザーは短時間で情報を選び取る傾向が強く、感情を刺激するワードや視覚的な印象がクリックの決…
はじめに：なぜ今、Webサイトに「質の高いロゴ」が必要なのか？ Chapter 1. 失敗しないロゴのコンセプト設計 Chapter 2.【現代の最適解】AIでアイデア出し → Canvaで制作するワークフロー Step 1. AI画像生成ツールでアイデアを無限に引き出す Step 2. Canvaでアイデアを「清書」し、完成させる Chapter 3.【エンジニアの視点】ロゴは「ベクター形式(SVG)」が必須な理由 Chapter 4. 作成したロゴをWebサイトに実装する 1. ファビコン (Favicon) の設定 2. ヘッダーロゴの設定 3. OGP画像 (SNSシェア用画像) の設…
こんにちは 皆さんはブログのアイコンは何を使っていますか？ フリー画像を使用したり、自分が撮った写真を使ったり、アイコン作成サイトで作っている方もいらっしゃると思います。 せっかくなら、オリジナルのアイコンを使いたいと思っている人も多いと思います。 アイコンはブログの顔でもあるよね 今回はイラストアプリのファイアアルパカを使って、オリジナルのブログアイコンの作成方法を紹介したいと思います。 作成方法の紹介（ペンタブ、手書き） ブログアイコンの作成方法（ペンタブ使用ver.） ①キャンバスの設定 ②下書き ③線画レイヤーの追加 ④線画の作成 ⑤色塗り ⑥影を付ける ⑦背景色を追加 ⑧ファイルの書…
Chromeが最近変なアップデートばっかりをしてきますが、今回バージョン: 124.0.6367.61でまた変な状態にされました。 症状としては、今までタブの左にあったファビコンが左の上になってしまったのと、ブラウザの上にマウスを持っていっても幅を変更する事が出来なくなってしまってます。 一応自分なりに色々いじったり調べたりしてみたのですが、どうやらこれは不具合のようでその内修正する（らしい）との事です。 ↓ファビコンが上すぎる状態 一応解決方法も記述しておきます。 前提として設定をいじるので私のサイトでは当たり前な自己責任となります。 自己責任が嫌いな方は修正が入るまで我慢しましょう。
ブログアイコン（ファビコン）を変える方法 この記事では「はてなブログ」のブログアイコン、ファビコン（favicon）を変更する方法を解説します。 ブログアイコン（ファビコン）の画像を変えてみたけれど、検索結果のファビコンが変わらない、表示されない、反映しない…という人も読んで試してみてください。ファビコンの指定方法が正しくないのかもしれません。 ファビコンの指定方法が正しければ、Googleなどの検索結果に表示されるファビコン（favicon）の画像イメージは下図のように変化します。 favicon 画像変更前のファビコン ブログを立ち上げたばかりの時（画像未設定）、検索結果に表示されるファビ…
こんにちは！ 意匠部のおばらです。 今回はファビコンに関する記事です。 「チャレンジ石垣島」ウェブサイトではファビコンを OS やブラウザの外観モード（ライトモード／ダークモード）に応じて（一部の環境を除き）切り替えています。 今回はそのロジックをご紹介します。 （ロゴの制作秘話に関しては前回の記事を御覧ください） 目次 目次 ファビコンを設定する ライトモード向けのファビコンがダークモードで見づらい メディアクエリでファビコンの見た目を切り替える 方法 ①「SVG 内に記述した CSS で切り替える」 SVG を作成する SVG をテキストエディタで開く <style> タグで CSS を追…
半年ほど前に、ホームページを作ってみようという気になった。 あまり詳しくはないし、デザインも内容も稚拙だけれど、自己満足の範疇で遊んでいる。 その趣味のホームページに、ファビコンをつけたくなった。 👇🏻 この、地球マークのやつを変えたくなった。 なんとかできたので、次回変更の時のために、手順を記しておこうと思う。 ① ファビコンにするイメージを決める。 ② favicon.ico を作る。 ③ FC2のファイルマネージャーに保存する。 ① ファビコンにするイメージを決める。 私はフリー素材を使った。 「ファビコン フリー素材」「ファビコン 作り方」などど検索をすると、いくつものサイトが見つかる…
何の予定も約束もない週末の午後…。 そんな日はただひたすら無為に過ごす、ミモモスティの未桃みもです。こんにちは！！ ブログに何を書いたらいいのか分からなくなる日もある 昨日は張り切ってブログの記事をふたつも書いたのに。 その反動でしょうか。 今日はこれといった話題が思いつきません。 先日購入した「はてなブログ Perfect GuideBook」をぼんやりと眺めながら 「もしも新しいブログを作ったら…」 という妄想を膨らませてみたり。（あくまでも考える「だけ」です。実行には移していません） はてなブログ Perfect GuideBook [改訂第2版] [ JOE AOTO ] ▲ 前半はひ…
www.ideaxidea.com
www.favicon.jp
coliss.com
ao-system.net
www.webcreatorbox.com
www.lifehacker.jp
liginc.co.jp
gigazine.net
suikoudesign.com
