自分のホームページやブログを紹介する際に、ただのリンクを貼るだけだとあまり目立ちません。 なので、目立って、かつ覚えてもらいやすい良い方法はないかなと考えていました。 そんな時にふと目に留まったのが、こちら。 「Googleウェブマスターツール」のサイト選択のところなんだが、どうもファビコンを取得して画像を表示しているようです。 こんな感じで、リンクの前にファビコン画像を表示できたら、目立って覚えてもらいやすくて良さそう！ ということで、その方法を調べてみました。
ファビコン画像を取得する便利なWebサービス（API）
自分のホームページやブログを紹介する際に、ただのリンクを貼るだけだとあまり目立ちません。 なので、目立って、かつ覚えてもらいやすい良い方法はないかなと考えていました。 そんな時にふと目に留まったのが、こちら。 「Googleウェブマスターツール」のサイト選択のところなんだが、どうもファビコンを取得して画像を表示しているようです。 こんな感じで、リンクの前にファビコン画像を表示できたら、目立って覚えてもらいやすくて良さそう！ ということで、その方法を調べてみました。
YouTube 動画埋め込みのレスポンシブ対応方法 - by Takumi Hirashima
YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介します。 埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。 また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。 動画の埋め込みをレスポンシブ対応する方法 aspect-ratio を使った方法 padding-top ハックを使った方法 動画の埋め込みをレスポンシブ対応する方法 まずは YouTube からコピーした「動画の埋め込みのコード（iframe）」をブロック要素（<div class="youtube">〜</div>）で囲みます。 <div class="youtube"> <iframe width="560" heig
簡単に設置できる！Blogger ブログでトップへ戻るボタンを設置する
注意 テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。 不安な方は以下の関連記事を参照してください。 【 超初心者向け 】 Blogger のテンプレートを反映・編集する方法 JQuery の導入 JQuery の導入をしていない場合、以下の script を <head> の直下に記述します。 <!-- JQuery --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/> Font Awesome の導入 Font Awesome を導入していない場合、以下のコードを <head> の直下に記述します。 <link href='https://use.fontawesome.com/releases/v5.6.4/css/al
jQueryで簡単ドロップダウンメニュー
恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。 今回はjQueryを使ってコピペで作成できる ドロップダウンメニューをご紹介します。 今回作成するドロップダウンメニューのデモがこちら DEMO 早速作成していきましょう！ jQueryを読み込ませる。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> これをHTMLのbodyの閉じタグの前に入れましょう。 HTMLで形を作る。 <ul class="dropdwn"> <li>HOME</li> <li>A <ul class="dropdwn_menu"> <li><a href="#">A1</a></li> <li><a href=
「痰が絡んで切れない時」に効果的な３つの対処法とは？：達人に訊け！：中日新聞Web
痰を治す3つの方法 私の場合は家にいて、お茶など水分をたっぷり摂っているといいのですが、外に出ると、とたんに痰がからんできます。 知り合いの薬剤師さんの場合は、朝はいいけれど、薬局に出勤し、お客さんと話し始めるとつらくなる、とのこと。暖房による乾燥が大きい、と言っていました。そこで、 1.「水分を摂る」 2.「暖房の乾燥・温度の変化に気をつける」 3.「抵抗力を上げる」 ことがポイントだね、というところで、話が落ち着きました。 以下で具体的な対処法を説明していきます。 【関連記事】 肺に効く『5つのツボ』で呼吸器トラブルを解消しよう 痰を切るのに「良い食べ物」「悪い食べ物」 ①痰を切る食べ物 痰がからむのを防ぐ食べ物もあります。 昔からよく知られているのが、 ・大根 ・山芋 ・レンコン ・タケノコ 大根のおろし汁にハチミツを混ぜ、ゆっくり喉を潤しながら飲むと、痰のからみが少なくなります。か
ぽっこりお腹に効くのは「腹筋」ではなく「尻筋トレ」だった！
1976年東京都出身。スポーツトレーナー、コンディショニングコーチ、鍼灸師。日本大学を卒業後、オハイオ州立大学トレド大学にて運動科学を専攻。米国MLB傘下3Aチームにて野球におけるコンディショニング・トレーニングの経験を積む。2003年より千葉ロッテマリーンズのコンディショニング・コーディネーターを務め、05年の日本一に貢献。14年には元WBC代表選手・渡辺俊介投手のMLB挑戦をサポートするため、パーソナルトレーナーとして米国に同行。15年、ラグビーのトップリーグチーム・近鉄ライナーズのヘッドコンディショニングコーチに就任。18年からは社会人ラグビーチーム・清水建設ブルーシャークスのコンディショニングコーチを務めるとともに、日本大学のハイパフォーマンスディレクターとして、ラグビー部を中心に、駅伝やサッカー部のトレーニングプログラムを管理している。 ニュース3面鏡 インターネットの登場以来、
onclickで画面遷移
こんにちは、さるまりんです。 <form>タグに囲まれたボタンでフォームをサブミットするのではなく単純に別のページへ遷移したいことがあります。 例えば複数ページで構成される入力フォームで「次へ」ではフォームをサブミットして、「戻る」では単純に前のページに戻る場合です。 どうやろうかな？と考えていたら<button>や<input type="button">のonclickを思いついきました。 onclickにlocation.hrefで飛び先ページを設定すると可能になります。 <button>タグ <button type="button" onclick="location.href='[遷移先]"> <input>タグ <intput type="button" onclick="location.href='[遷移先]"> ハマったのは<button>にtypeを設定していない時に
ネーティブがカチンとくる6つの直訳英語 電話の相手にWho are you? はNG
“I expect you to come at 4 pm.”は「4時に必ず来い」の意味 ネーティブスピーカーとの商談や会議で、正しく英語を話していたつもりでも、相手が急に怪訝な表情をしたり、不機嫌になったりしたことはないでしょうか？ もしかすると、覚えた単語を組み合わせただけでは、ネーティブにあなたの意図することがきちんと伝わっていないのかもしれません。これから、英会話をマスターしたつもりの日本人が犯すNG事例を紹介します。 実際にあった事例では、ある会議で日本のビジネスパーソンが、米国人に“How do you think?”と尋ねたところ、その米国人は怒りだしてしまいました。日本人は、「あなたはどう思いますか？」と伝えたかったのでしょう。しかし、その表現は「どのように考えるのか」ではなく、「（どうしてそう考えるの）自分で考えればわかるでしょ？」と、相手を軽蔑するニュアンスになってしま
GOOGLE BLOGGERの設定：HTMLコードで文字に囲み枠【無料】
自分がブログを始めてからいろいろブログを見てると、 この文字を囲む枠はどうやって設定するのだろうか? という疑問にぶつかりました。 BLOGGERのツールボタンを調べてみましたが、どうも枠を作る機能は無いようなので、 やはり、自分でコードを入力するしかないです。 ですが、準備しておけば、コピペで完了するので、それほど難しくはありません。 デザインや色は好みがあるので難しいですが、探せばいろいろあるようです。 この記事では GOOGLE BLOGGERで、HTMLコードのみで文字の囲み枠を挿入する 手順を書いていきます。 GOOGLE BLOGGERの設定：HTMLコードで文字に囲み枠【無料】 囲み枠とは こんな感じの枠です こんな感じの枠です これだけでも枠の色と背景の色を変えれば、かなりのアレンジができます 正直いうと、楽しいのは最初だけで、いろいろ試しますが、そのうちいつも使うものはあ
CSS でドロップシャドウをつける方法 - by Takumi Hirashima
CSS でドロップシャドウをつける方法を紹介します。 例えば、CSS で要素に影をつけたいときに便利な方法です。 類似機能のボックスシャドウと比べて、ドロップシャドウは擬似要素も対象になります。 ドロップシャドウを付ける方法 ブラウザの対応状況 box-shadow じゃだめなの？ ドロップシャドウを付ける方法 CSS で特定の要素にドロップシャドウを付ける方法を紹介します。 ドロップシャドウをつけるには filter プロパティの関数 drop-shadow を使用します。 実際の見た目はこんな感じです。 ベースの HTML は次の通りです。 <div class="dropshadow">ドロップシャドウ</div> CSS はこちら。 .dropshadow { position: relative; width: 240px; margin: 0 auto; padding: 15
box-shadowはもう古い？CSS新時代の「影の落とし方」
長い間Webデザイナーが愛してやまないものの1つに*「box-shadow（ボックスシャドウ）」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで本稿では、CSS新時代の影の落とし方につい
box-shadow
CSS3 の box-shadow はボックスに１つあるいは複数の影（ドロップシャドウ効果）を付加する プロパティです。これを使うことによって、立体的な要素の表現が可能に可能になりました。 他の要素の配置に影響を与えないので重なることがあります。 box-shadowプロパティでボックスに影を表示 ※下記 サンプルコード：高さ,幅,ボーダーなどのコードは省略してます。各自で設定してください。 シャドウ 外側 右方向、下方向 box-shadow構文： 水平方向 垂直方向 ぼかし 広がり 色 向き（内向きにする場合insetを付加）； .shadow { box-shadow:6px 0px 0px 0px blue; } /* 水平方向 右へ 6px */ .shadow { box-shadow:6px 7px 0px 0px blue; } /* 垂直方向 下へ 7px */ .sha
CSSアニメーションで要素が一瞬伸縮したりちらつく場合の対処法 | TechMemo
transitionやtransformでCSSアニメーションを要素にかけた時に、要素の幅が一瞬だけ伸縮してしまったり、ちらついてしまう場合があります。私もよく以下のようなCSSを指定することがあるのですが、アニメーション時に画像が一瞬だけ伸縮してしまうことがあります。 a img{ transition:all .3s ease-in-out; } a:hover img{ opacity:0.8; } このような現象を対処するための方法をご紹介したいと思います。 CSSアニメーションで要素が一瞬伸縮したりちらついたりする場合の対処法 要素が伸縮したりちらついてしまう現象が発生する場合は、アニメーションを指定している要素に対して、以下のCSSを追加します。 a img{ -webkit-backface-visibility:hidden; backface-visibility:hid
CSSのグラデーション（linear-gradient）の使い方を総まとめ！
この記事では、「背景」や「ボタン」などWebページの様々な部分にCSSでグラデーションをかける方法を紹介していきます。
CSSのみで要素を六角形にする方法
CSSのみで六角形を実装する方法 上記のような六角形を実装します。 まず、HTMLは以下のように記述します。今回はdivにしていますが、リンク等でもOKです。 .hexagon { width: 88px; height: 50px; background: #aaa; position: relative; } .hexagon_cont { height: 100%; font-size: 16px; font-weight: bold; color: #fff; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; } .hexagon::before, .hexagon::after { content: ""; width: 100%; height
「筆者」「著者」「作者」 の違いとは : 違いがわかる事典
筆者は、文章を書いた人。書画を書いた人もいう。 著者は、書物を書き著した人。 文章を書いた人であれば「筆者」だが、その文章が書籍化されていなければ「著者」ではない。 書籍化されていれば、「筆者」でもあり「著者」でもあるが、「筆者」は一人称としても使えるのに対し、「著者」は一人称として使えず、書き手が自身を指す時は「筆者」である。 また、「著者」は書物を書き著した人を広く表す言葉だが、「筆者」は事実のみを書き記すのではなく、何らかの主張を含んだ文章を書く人に対して用いられる。 作者は、創作的・芸術的な内容の書物、脚本などを書いた人。文章に限らず、絵画や彫刻などの芸術作品を作った人もいう。 「著者」と重なる部分もあるが、「作者」は事実や自身の主張ではなく、小説など「作品」と呼ばれるものの作り手に対して用いられる。
【CSS】マウスオーバーするとアンダーラインがﾇﾙｯと伸びてくるテキストの作り方
マウスを乗せるとアンダーラインがヌルっと出てくるリンクテキストを最近良く見るので、使用率が高そうな2パターンを作ってみました。
最近よく見る、マウスオーバー時にヌルっと拡大する画像の作り方+α
最近トップページの記事一覧をグリッドレイアウトで組んでいるブログが多いですよね（うちのブログもだけど） そして、ほとんどのブログが各コンテンツにというカードっぽいデザイン（上に画像・下にタイトル）を採用しています。まぁ普通にお洒落です…が、画像部分にマウスオーバーした時、何もエフェクトが掛からないのってちょっと味気ないですよね。 そこで今回は、マウスオーバーした際に画像をヌルっと拡大させる方法を紹介します。ﾇﾙﾘ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
onclick属性を使った「上へ戻る」スクロール
【ワードプレス】コクーンに設置した、カスタム検索のデザインを調整しました