自分のホームページやブログを紹介する際に、ただのリンクを貼るだけだとあまり目立ちません。 なので、目立って、かつ覚えてもらいやすい良い方法はないかなと考えていました。 そんな時にふと目に留まったのが、こちら。 「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=
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を設定していない時に
GOOGLE BLOGGERの設定：HTMLコードで文字に囲み枠【無料】
自分がブログを始めてからいろいろブログを見てると、 この文字を囲む枠はどうやって設定するのだろうか? という疑問にぶつかりました。 BLOGGERのツールボタンを調べてみましたが、どうも枠を作る機能は無いようなので、 やはり、自分でコードを入力するしかないです。 ですが、準備しておけば、コピペで完了するので、それほど難しくはありません。 デザインや色は好みがあるので難しいですが、探せばいろいろあるようです。 この記事では GOOGLE BLOGGERで、HTMLコードのみで文字の囲み枠を挿入する 手順を書いていきます。 GOOGLE BLOGGERの設定：HTMLコードで文字に囲み枠【無料】 囲み枠とは こんな感じの枠です こんな感じの枠です これだけでも枠の色と背景の色を変えれば、かなりのアレンジができます 正直いうと、楽しいのは最初だけで、いろいろ試しますが、そのうちいつも使うものはあ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
onclick属性を使った「上へ戻る」スクロール