はてなブログのヘッダメニューをリニューアルしました - はてなブログ開発ブログ

2024/03/05 11 users ヘッダメニュー staff.hatenablog 記事末尾

はてなブログでは、ヘッダメニューのリニューアルを進めておりました。 staff.hatenablog.com はてなブログトップページ、はてなブログ管理画面においては既に新しいヘッダメニューをリリースさせて頂きましたが、 本日ブログ表示画面にも反映させるリリースを行いました。 一時的にテキストリンクとして記事末尾へ移動... 続きを読む

ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装する | Pulp Note

2021/04/01 12 users before Pulp Note CSS After 疑似要素

CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 ボタンのスタイル ボタンは11... 続きを読む

コピペで簡単！ボタンやテキストリンク、アイコンで使えるCSSのさまざまなアニメーション -CSSeffectsSnippets | コリス

2021/01/12 9 users コリス プリローダー CSS コピペ アニメーション

ボタンやテキストリンク、アイコン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。 CSSのエフェクトはスニペットに登録しておくと、すぐ...記事の続きを読む 続きを読む

CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト | コリス

2020/12/14 119 users ホバーエフェクト コリス ポパー アニメーション エフェクト

先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションです...記事の続きを読む 続きを読む

CSSのみで実装できる！テキストリンクのホバー時に、カラーをアニメーションで変更させる実装方法のまとめ | コリス

2020/03/26 22 users ピュアCSS 要件 スライド 実装 コリス

テキストリンクをホバーした際に、テキストのカラーをスライドのアニメーションで変更させるピュアCSSの実装方法を紹介します。 IEには対応してないけど実装が簡単な方法、IEに対応しているけど実装がちょっと面倒な方法など、プロジェクトの要件に適したテクニックをご利用ください。 4 Ways to Animate the Color of a... 続きを読む

[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets | コリス

2019/03/15 126 users プリローダー コリス CSS コピペ スニペット

テキストリンクやボタン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。 気になったアニメーションは、スニペットなどに登録しておくと便利...記事の続きを読む 続きを読む

ブログカードとテキストリンクのクリック率を実測・比較した結果 | NaeNote

2017/02/28 30 users 趣旨 iframe NaeNote プロ 実測

はてなブログではブログカードのクリックを検知できなかった 以前「ブログカードは死ぬほどクリックされない」という説に対して異を唱えたことがありました。 クリックされていないのではなく、 技術的な理由でクリックが検知できていないだけだ というのがこの記事の趣旨です。 はてなブログのブログカードはiframeを使っている iframeの枠内と枠外は別サイト扱い そのためブログカードのクリックを枠外のブロ... 続きを読む

はてなブログ公式の「商品名リンク」を使わず「Amazon公式のテキストリンク」を使うとアフィリエイト収入がグッとアップする！ - 変デジはてな支所

2015/11/10 24 users 支所 変デジ アフィリエイト収入 Zippo Amazon公式

2015-11-10 はてなブログ公式の「商品名リンク」を使わず「Amazon公式のテキストリンク」を使うとアフィリエイト収入がグッとアップする！ アフィリエイト はてなブログ はてなブログはAmazonアソシエイト・プログラムを使った商品紹介が簡単に出来ます。多くの方がはてなブログ公式の「Amazon商品紹介」を使っているのでは？たとえば「ZIPPO(ジッポー) ハンディーウォーマー&オイルセッ... 続きを読む

テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 | NxWorld

2015/09/17 190 users NxWorld ナビゲーションリンク ホバー時 改行 CSS

見たい時にすぐ動きの確認ができるものが欲しくて一覧化したのでシェアします。いずれも文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛く、利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 先述したように... 続きを読む

WordPressでも、はてなブログ風のブログカード（サムネ付きリンク）を表示させる

2015/08/05 27 users WordPress サムネ word ブログカード 軌跡

当ブログでは、他の記事にリンクする場合いつもサムネなしのテキストリンクを使っています。 ですが、ほかのブログで「はてなブログ風のブログカード」なるサムネとディスクリプション付きのリンクを見てから、うちもそれを利用してみたいなーと思っていました。 最終的にはうまくいったのですが、他サイトで紹介されている方法ではうまくいかなかったりいろいろ苦労したので、その軌跡をメモしておきたいと思います。 Word... 続きを読む

Textwellでカエレバを使ってアマゾンの商品紹介をするアクション Kaereba - W&R : Jazzと読書の日々

2014/09/03 11 users Textwell カエレバ JAZZ アマゾン 読書

AmazonSearchだとリンクが作れないケースが出てきたので。 商品紹介ブログパーツ カエレバ デザインサンプルあります！カエレバの最新情報はわかったブログで！テキストリンク(Amazon)September Song画像リンク(Amazon)※利用方法はこちら※利用方法はこちら開発者:かん吉会... こういうときは素直になって専用ツールを借りることにします。カエレバ。キーワードで検索してブロ... 続きを読む

【WordPressで特定のカテゴリの記事「だけ」に特定の要素（バナーやテキストリンクなど）を表示する方法】

2013/07/15 151 users WordPress バナー 特定 要素 カテゴリー

例えばですが、特定のカテゴリの記事を見てくれた方に、特定のリンクとかバナーとかを表示させたいときが私はあります。「他のカテゴリーでは見えないけど、このカテゴリーの記事を見てくれた方には、ピンポイントでこのリンクも参考として見てほしいです。ぜひこれも！」みたいな。 同じカテゴリの最新記事とか、関連記事とか、そういうコンテンツとはまた別の位置づけで私は結構よく使います。特に、「他のカテゴリでは見えない... 続きを読む

アイコンフォントでリンクタイプ別にアイコンつける方法 | Webクリエイターボックス

2013/03/18 157 users アイコンフォント Webクリエイターボックス フォント 総称

CSS3を使ったアイコンフォントで、テキストリンクをもう少し華やかに！画像を使うと案外手間がかかるテキスト横のアイコンを、Webフォントを使って簡単に表示させましょう。今回はリンク先や拡張子で異なるアイコンを表示する方法を紹介します。 アイコンフォントとは？ アルファベット1文字に1つのアイコンが設定されているフォントの総称です。サーバー上にあるフォントファイルを読み込んでフォントを表示する「We... 続きを読む

コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ | Webクリエイターボックス

2013/01/29 539 users コピペ エフェクト 目次 Webクリエイターボックス マウス

どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景... 続きを読む

テキストリンクの差別化にborder-bottomを使ってみる｜Webpark

2013/01/17 16 users Webpark text-decoration 点線 差別化

最近海外のサイトなんかを見ているとテキストリンクにボーダーを使っているサイトが多い気がします。普段だと「text-decoration: underline;」のところ「border-bottom: 1px solid #003f8e;」って感じです。 ボーダーにすることで何ができるかというと、テキストの色と違う色の下線にできたり、点線にできたりします。 例えばこんな感じ。下線の色のみ変えています... 続きを読む

Firefoxで役に立つアドオンまとめ : キジトラ速報

2012/10/10 37 users Firefox キジトラ速報 アドオンまとめ test VIP

2012年10月10日22:06 Firefoxで役に立つアドオンまとめ 引用元：http://hayabusa.2ch.net/test/read.cgi/news4vip/1344678660/ テキストリンクやTab Mix Plusはすごく便利だと思います 1: 以下、名無しにかわりましてVIPがお送りします 2012/08/11(土) 18:51:00.19 ID:GUkZQJkD0 な... 続きを読む

jQueryで画像をRetina対応させるプラグインを作ってみた | そぷログ

2012/09/26 34 users jQuery Retina Alt ブログ class

<!-- 画像の幅：data-img-width 画像の高さ：data-img-height 画像のALT：data-img-alt --> <a href="img.jpg" class="img-retina" data-img-width="160px" data-img-height="120px" data-img-alt="画像のALT">JSオフ用のテキストリンクをALTにしておくと... 続きを読む

CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル | コリス

2012/02/05 337 users ポパー コリス Step チュートリアル アニメーション

CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを... 続きを読む

「フリーで使えるフォントのまとめ」のまとめ - とりあえず9JP

2011/04/13 97 users フォント ウンザリ まとめ - 9JP まとめ

無料で利用出来そうなフォントをまとめて紹介されているサイトを更にまとめてみます。 ※テキストリンクの先が更にテキストリンクだと「ウンザリ・・・」って感じだと思うので、出来るだけ個別のフォントを画像で紹介しているサイトを選びました。 ※このサイトで紹介しているサイト同士で同じフォントを紹介してたり…という事は当然あるのでその点はご注意願います。特に日本語フォントなどは数そのものが少ないので重複率が高... 続きを読む

[JS]あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble | コリス

2011/04/06 195 users jQuery jRumble コリス jquery.js 実装

テキストリンクやナビゲーションなど、ページ上のあらゆる要素を振るわせるjQueryのプラグインを紹介します。jRumbleの実装jRumbleの実装は簡単です。 div要素でもリンクでも、あらゆるDOM要素をガタガタさせることができます。JavaScript「jquery.js」と「jrumble.1.0.js」を外部ファイルとして指定します。 続きを読む

[CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル | コリス

2010/12/02 138 users コリス チュートリアル a href CSS HTML

HTML：スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ（当方作成） リストのアイテムはブロ... 続きを読む

最適なテキストリンクの色は？ | ウェブ力学

2010/06/21 684 users ウェブ力学

青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoo... 続きを読む

テキストリンク色の変更で、70億円（！）を稼ぎだすことに成功したマイクロソフト - Feel Like A Fallinstar

2010/03/18 927 users マイクロソフト Bing ユーザビリティ 水色 変更

ユーザビリティの中でも特に狭義の「テキストリンク色」を変えただけで、恐るべきビジネスインパクトが現れたという事例です。 実際に成果の変化が起こったのは、マイクロソフトが鋭意売り出し中の検索エンジン「Bing」です。 テキストリンクを、入念にテストし、8000万ドルの売り上げ増 マイクロソフトは従来、「Live Search」という形でもう少し明るい青（水色に近い）を採用していました。   Bing... 続きを読む