#StreetView アプリで共有89977
https://www.google.com/maps/@/data=!3m4!1e1!3m2!1sibZAGxDAFJHUGzkKbbEtOQ!2e0
最近のコメント
2024年4月 月 火 水 木 金 土 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ブログ統計情報
- 49,780 ヒット
人気の投稿とページ
BookMarklet 呼び出し用に！『Keyconfig』設定例
[Chrome拡張機能]ブックマークレットの呼び出し用に！『Keyconfig』設定例
[Chrome拡張機能]ブックマークレットの呼び出し用に！『Keyconfig』設定例紹介。 – Sunabox
Labels: Blog 関連, Chrome拡張機能
 |
| Keyboard 2 / john_a_ward |
今まで、キーボードショートカットって覚えるのが苦手で、精々使っても「Ctrl+C」「Ctrl+V」・・・つまりコピペくらいしか使ってなかったんですが、
そこかしこで、Chrome拡張機能の「Keyconfig」があるからChromeを使っている！的な記事を見るので、一度試してみようと思ってインストールしてみました。
リンク
ダウンロードリンク
Chrome ウェブストア – Keyconfig
参考にさせて頂いたサイト
ブログ執筆を効率化！ 各種ブックマークレットを登録できるChromeエクステンション『Chrome Keyconfig』を使いこなそう | NANOKAMO BLOG
Keyconfigとは？
そもそも、このKeyconfigという拡張機能は、様々な動作をキーボードショートカットに登録して、使えるようにするというアプリ。
ただ、設定できる範囲が多彩で、マスターすれば、凡そマウスは使わくてもいい？くらいの項目があるので、使用して一番生きてくるのはノートPCを使う時だと思います。
デスクトップだと、どうしてもマウス！っていうときにキーボードから手は離さないといけませんからね・・・。
ノートPCだと、大抵タッチパネルがあるので、マウスで選びにくいところを補うようにすると、全くキーボードから動かさなくていいんじゃないかな？って思うわけです。
今回試しに設定してみた項目
使い方は、色んなところで紹介されているので、今更紹介するまでもないと思いますが、
 |
| 画像赤枠のフォームをクリックして、動作を入力後、Addクリックです。 |
 |
| 追加後、ショートカットの右側に「アクションなし」と表示された部分があるので、 そこをクリックして、動作を設定です。 |
アクションまで設定出来たら、ショートカットの動作フォーム右にある「save」が押せないか確認しておいて下さい。押せるようならsaveしておきましょう！
※追記・・・ブックマークレットなど、URLを設定する場合は、アクション『go to #1』を選択です！
拡張機能すでにを色々とインストールしている人は、キーボードショートカットが被ると厄介なので、一度確認してみるか、まず設定されていないようなキーボードショートカット動作を設定するといいと思いますヽ(´ー｀)ノ
画像で試しに設定しようとしているのは「Alt+Shift+s」です。設定できる動作が結構な量なので、少しややこしいと感じるかもしれませんが、分かるところだけ使っていけばいいんです。
▲とりあえず、私が設定したのはこんな感じです。ブックマークレットを使えるようにしたかったのが、インストールした理由の中でも大きかったので、「go to #1」での設定が多くなっています。
また、使わないなと思ったのは潔く削除！
設定自体も、actionタブ以外は触ってませんｗ
追記
設定した内容ですが、設定後、Chromeを再起動させないと有効になりませんので、一つ一つSave出来ているのを確認してから、再起動してくださいね。
設定内容詳細
参考になればと思いますので、特にブックマークレット関連で、設定したものをあげておきますね。
Keyconfigに登録する際、ブックマークレットのコードが表示されずに、「リンクをブックバークバーにドラッグして下さい」となっているような場合には、一度、ブックバークバーに登録して、ブックマークを編集から、URLに表示されている部分をコピペしてくださいね！
[1] カエレバ・ヨメレバ
■商品紹介ブログパーツ カエレバ
■書籍紹介ブログパーツ ヨメレバ
こちらは、Amazonや楽天などの商品リンクを簡単につくることが出来るブックマークレットです。
商品紹介するときに、複数のサイトの商品リンクを貼ることが出来るので、「私、Amazon嫌いだし」といった部分が少なくなると思います。
私は、そこまで使用頻度が高くないので「Shift押しながらkae」「Shift押しながらyome」で登録しました。
Komepon!
Komepon! – はてブやTwitterのコメントをワンクリックでチェック！
[2] これは、参照しているサイトのはてブ・Twitterコメントを確認できるブックマークレット。
TOPSYコメントも確認出来るので、エゴサーチにも便利ですよ。
これも、さぁ確認しよう！っていう感じなので「Shift押しながらkome」で登録です。
ShareHtml(2種類)
[3] ブログ書いてる人にはきっと有名な、サムネイル付きのサイトリンクを簡単に作れるブックマークレットです。先程からのサイトリンクも、こちらを使って貼り付けています。
ご覧のように、はてブ数も表示 出来ます(´～｀)
貼り方によってサムネイルの大きさを変えているので、
書式テンプレートで「サムネイル小・大」の2つを「Alt+S」「Alt+D」で登録しています。
サムネイル付きで！参考リンクを貼るのに便利なブックマークレットがありました。 – sunabox
▲軽くですが、記事にもしています
[4]見ているサイトを素早くツイートすることが出来るブックマークレットです。短縮URLの設定も出来るので、ほんとにワンクリックでリンクツイートが出来ます。
FocusHtml NEOがすごい！Twitterアイコンまで加えた全部のせリンクを作るブックマークレットをご紹介！ – sunabox
FocusHtml NEO導入奮闘記 〜応用編〜 | iに生きるライオン
▲ツイートから、キーワードでフィルタかけて、適合したものを全部リンクにしてブログに貼ることができる「FocusHtml NEO」というとんでもないブックマークレットがあるのですが、それの書式のものも設定して、全部で3種類設定しています。
- 「普通にツイート(短縮URL) [Alt+T]」
- 「ブログ更新ツイート(短縮URL+更新しましたコメント付き) [Alt+R]」
- 「FocusHtml NEO用(短縮しない+Focus用書式) [Alt+E]」
こんな感じですね。
Make Linkジェネレーター
[5] リンク作成のアクションは、Keyconfigの設定の中にもあるのですが、ちょっと書式を変えたり、引用文作成にも使いたかったので、上記のサイトでブックマークレットを作って登録しました。
リンク用
- javascript😦function(){var ele=document.createElement(‘textarea’);ele.style.width=‘100%’;ele.value=‘<a href=”‘+location.href+‘” target=”_blank” title=”新しいタブで開きます”>’+document.title+‘</a>’;document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()
これは、「カエレバ」「ヨメレバ」のリンク紹介に使っています、先頭の「■」は後付けですが。
「Alt+L」で登録。
引用(Blockquote)用
- javascript😦function(){var ele=document.createElement(‘textarea’);ele.style.width=‘100%’;ele.value=‘<blockquote cite=”‘+location.href+‘” title=”‘+document.title+‘”>’+window.getSelection()+‘
</blockquote>’
;document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()
リンク用
- javascript😦function(){var ele=document.createElement(‘textarea’);ele.style.width=‘100%’;ele.value=‘<a href=”‘+location.href+‘” target=”_blank” title=”新しいタブで開きます”>’+document.title+‘</a>’;document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()
これは、「カエレバ」「ヨメレバ」のリンク紹介に使っています、先頭の「■」は後付けですが。
「Alt+L」で登録。
引用(Blockquote)用
- javascript😦function(){var ele=document.createElement(‘textarea’);ele.style.width=‘100%’;ele.value=‘<blockquote cite=”‘+location.href+‘” title=”‘+document.title+‘”>’+window.getSelection()+‘
</blockquote>’
;document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()
こちらは、「Alt+Q」で登録。
追記
「blockquote」用に登録した「Alt+Q」ですが、使うことのありそうなWikipediaサイト内で使用すると、ウィキペディア既定のキーボードショートカットと被ってしまい、ページ移動してしまいます。
私は、ウィキペディアのアカウントを作ってしまって、回避しましたが、アカウント～？？って思う人は、登録キーを変更したほうがいいかもしれませんね。
ウィキペディアのショートカットキーについて
■Help:キーボード・ショートカット – Wikipedia
▼使用サンプル
「三国志」とは、魏（ぎ）・呉（ご）・蜀（しょく）の三国が争覇した、三国時代の歴史を述べた歴史書である。撰者は西晋の陳寿（233年 – 297年）（詳しくは『三国志 (歴史書)』を参照）。 後世、歴史書の『三国志』やその他の民間伝承を基として唐・宋・元の時代にかけてこれら三国時代の三国の争覇を基とした説話が好まれ、その説話を基として明の初期に羅貫中らの手により、『三国志演義』として成立した。 「三国志」の世界は『三国志演義』を基としてその後も発展を続け、世界中に広まった。
via – 三国志 – Wikipedia
まずは、使用頻度が個人的に高いものだけを登録してみました。
これを覚えたら、また追加して・・・と思うのですが、
きっとそこまで使わないなと思ったブックマークレットなどはきっと登録しないだろうし、それほど変化しないかもしれませんｗ
あ、使えそうだな・・・っと思った人の設定参考に、何か1つでもなればいいなと思います。
それではまた！
[Chrome]これだけは外せない！Chrome拡張機能厳選13個まとめ！ – sunabox
Chromeの拡張機能は、チェックしきれないくらいの数があって大変です。 そんな中で、これだけは外せないという拡張機能を13個まとめてみました！ …
Keyconfigの制限モード（limited mode） Chrome
Google Chrome拡張機能Keyconfigが使えない時の解決法
私はGoogle Chromeの拡張機能「Keyconfig」を使用しています。
Keyconfigを利用することにより、キーボードショートカットによりブックマークレットを起動する事が出来ます。
具体的な利用法として例を挙げると、
- Amazonのページ内でk+aで商品紹介リンク「カエレバ」を起動
- f+iで開いているページのタイトルリンクを取得
- a+ nでGoogle Analyticsのページを開く
といった使い方をしています。
▲ブックマークに登録しているアイコンを押すより早いツールです。
Keyconfigの使い方に関しては、以前のブログで紹介していました。
→Chrome拡張機能「Keyconfig」ショートカットでブックマークレット起動できるのが便利！
さて、ここで問題が発生します。
今まで使えていたはずのf+iキーを押しても、開いているページのタイトルリンクを取得出来なくなっていました。
結論としては、escキーを押す事で有効になりました。
Gogle Chrome拡張機能「Keyconfig」が使えない時の解決法
指定したページでKeyconfigが使えない時、以下のように解決を行いました。
▲Google Chromeの「設定」から
▲「拡張機能」→Keyconfigの「オプション」を選択します。
▲するとActions for limited modeに「Esc」が登録されていました。
Keyconfigの制限モード（limited mode）について
Actions for limited mode とは何か？ということですが、
同じページの「Keyconfig」のNewsタブを見てみました。
そこには、「制限モード（limited mode）」の記載がありました。
2009年10月19日のアップデート内容に
Keyconfigのアクションがページ側のショートカットよりも優先されるように調整しました。また、アクションに制限モードを追加しました。デフォルトではEscキーで制限モードに移行し、制限モードではデフォルトでEsc以外のキーが無効になります。これによりサイト側のショートカットキーが有効になります。制限モードでもアクションは追加できるので、常に優先して使いたいキーを定義することができます。 Thx yuta.cielo
とあります。
まとめると、
- デフォルト・・・いつものモード
- 制限モード（limited mode）・・・Esc以外のキーを無効化し、サイト内のショートカットキーが有効
といった感じになります。
Keyconfigで登録してあるキーボードショートカットを一時的に無効化したいときに、制限モードというものが用意されているわけですね。
制限モードへと移行するキーボードショートカットキーは、初期設定ではEscとなっています。
制限モードへ移行するキーボードショートカットを変更
▲Escはちょくちょく別の理由で押す事があるので、これを変更し、control+Qとしました。
▲さて、control+Qを押して制限モードを解除した後、f+iを押したら、記事タイトルリンクが出力されるようになりました。
関連記事を貼るときに必須なツールなので、解決出来て良かったです。
擬似要素「before」「after」、指定した場所の前後に好きな文字を挿入する
[CSS] 擬似要素「before」「after」の基本から使い方までを徹底紹介!!
今回は「擬似要素」の中でも重要な「before」と「after」についてです。この基本をしっかりと知っておくことでWEBデザインの表現の幅がアホみたいに広くなります。
「before」と「after」で文字を挿入
では擬似要素「before」と「after」の基本的な使い方を紹介します。
基本: 文字を前後に入れる
「before」と「after」の基本的な使い方というのは、ただ単に、指定した場所の前後に好きな文字を挿入することです。
まずは例としてこんな文章を用意しました。HTMLタグも実にシンプルで、ただ単に<p>タグを入れているだけです。
<p>昨日は暑い夜だった。</p>
<p>そして熱い夜でもあった。そう。一晩中ドラクエ5に没頭していたからだ。</p>
<p>なんと!</p>
<p>ついに「はぐれメタル」が仲間になったのだ。</p>
❶「:before」で「pタグ」の前に文字を挿入
では、「before」属性を使って、すべての<p>の前に「オレ的には」というウザい文言を入れてみます。
ではCSSを見てみます。
p:before {
content: "オレ的には" ;
}
こんな感じですね。
たったこれだけの指定です。「p:before」のように「:（コロン）」の後ろに「before」と入れます。
で、その中で「content:"ここに自由に文章を入れる"; 」という指定をするだけです。「ダブルクォーテーションマーク」をお忘れなく!
❷「:after」で「pタグ」の後ろに文字を挿入
では今度は後ろに入れてみます。たぶん予想できそうですけど、「after」って英単語を使うだけです。
p:after {
content:"……と言ってみる";
}
「……と言ってみる」と挿入しましたが、ウザいですねー。自信持って言えよ（笑）。
サンプルページで確認してほしいこと!
1つだけ、サンプルページでやって欲しいことがあります。それは文字をドラッグすること。ドラッグするとこちらの画像のようになるんですねー。
そうです。選択されないんです。あくまで擬似で強引に入れているものだからか、普通のテキストとは違って文字として認識されません。なのでGoogleからも認識されないので重要なキーワードをここに入れてもSEO的には意味ないですよー。
❸応用: 挿入文字に装飾を入れる
今度は挿入した文字をいじってみます。しかも前後両方に入れてウザさを演出してみましょう。
CSS
p:before {
content:"オレ的には";
color:red;
font-size:200%;
}
p:after {
content:"……と言ってみる";
text-decoration: line-through ;
border: 1px solid blue ;
margin-left: 3em ;
padding: 0.1em 0.3em ;
background: yellow ;
}
簡単ですね。先ほどの擬似要素の下にCSSコードを追加するだけです。このサンプルを見ると結構いろんなことができるのがわかりますねー。ほら、楽しくなってきたでしょ?
❹実践: ほかのHTMLタグにも使ってみる
この「before」と「after」ですが、ほとんどのHTMLタグに使えます。
私の場合は、<h3>に数字を入れるときに「before」を使って入れています。
HTML
<h3 id="no-01">ドラクエへの愛情について</h3>
CSS
#no-01 {
content:【1】;
}
この例で、「class」ではなく「id」を使って指定しているのは、ただ単にページ内リンクとしても使うためです。なので見出しに使う場合は「id」が便利ですよー（ページ内リンクなど「aタグ」についてはこちらをどうぞ）。
私が見出し数字を擬似要素でやっている理由はGoogleから見ると「数字」はコンテンツとは関係ない記号で、ただ人間が見てプロセスとして見やすいから入れているだけだからです。
画像を挿入することもできる!
この擬似要素のすさまじいところは、画像も挿入できること!! これは最強です。文字だけではないのでかなりの幅が広がります。
❺画像を前後に挿入
画像挿入の基本的なやり方を見てみましょう。
HTML
<p>この画像は「before」で入れているのでドラッグできません。</p>
CSS
p:before {
content : url(http://yossense.com/images/article/2014-drawing-03.png) ;
display: block;
}
上記のような感じで「content: url(ここに画像へのURLを入れる);」の中に画像へのURLを入れるんですね。絶対パスでも絶対パスでもOKです。
文字の時は「 ” 」の中に入れましたが、画像の場合は「 ( 」なのもポイントです。
残念ながら出現させた画像のサイズを変更できません。なので、ピッタリのサイズを用意しないといけませんね。
❻応用: アイコン画像を入れる
さて応用編です。指定した文字列を<span>で囲み、アイコン画像を挿入してみます。
オススメのブラウザは「Google Chrome」です。昔は「Firefox」のヘビーユーザーだったんですが、一時期重くなってたときに切り替えました。え? 「インターネット・エクスプローラー」って何ですか?
この画像挿入のやり方ですが、このブログでは気が狂ったように使いまくっています。こんな感じで、ソフトウェアのアイコンで使っています。
すべては見てくださっている「あなた」が見やすくなるため! SEO的にはGoogleからの評価として何の意味もないです。
ではHTMLとCSSを見てみましょう。
HTML
私は<span class="icon_chrome">Google Chrome</span>が大好きです。
ちなみにこのコードは単語登録で登録しています。セミコロンを使った登録がオススメですよー♪
CSS
.icon_chrome:before {
content: url(http://yossense.com/images/article/icon_chrome.gif) ;
position : relative ;
bottom : -0.16em ;
margin-right : 0.1em ;
}
こんな感じで微調整しています。細かいことやってるでしょ（笑）? 主に使うのは「position」と「margin」での位置の調整ですね。
アイコンは画像だけでなく、WEBフォントも併用して使っています。この「Twitter」とか。
❼実践: 矢印とかいろんなことに応用できます!
例えば、企業のホームページでフローチャートの「矢印」を、この「after」で表現したりできます。
HTML
<ol class="process">
<li>材料を仕入れる</li>
<li>商品を作成する</li>
<li>配送する</li>
</ol>
ほら、やっぱりフローチャートってその構造上<ol>タグを使いたいじゃないですか? 間違っても<br />と「↓」の組み合わせなんてゴメンです。
CSS
.process {
width : 80% ;
text-align : center ;
}
.process li {
list-style : none ;
}
.process li:after {
content : url(http://yossense.com/images/base/arrow-down-01.png) ;
display : block ;
text-align : center ;
}
.process li:last-child:after {
content : none ;
}
❽一番最後の「li:last-child:after」の指定ですが、これは一番最後に出てくる<li>には「after」を適応させない指定です。「content:none;」という指定で、何も出なくさせられます。これ、結構重要で便利です。
CSS3では「:after」ではなく「::after」と書くのが正しいようです。どっちでも表示されますが。あとIE 7以下では、「before」「after」に対応していませんが私は完全無視しています（笑）。
オマケ:「before」「after」でできないこと
すっごく便利な擬似要素「before」と「after」ですが、できないこともあります。
- 画像の大きさを変更する
- 上でも書きましたが、出現させた画像のサイズを大きくしたり小さくしたりはできません。
- リンクを貼る
- 出現させた画像やテキストに
<a>を付けてリンクを貼ることはできません。あくまで実態のない幻的な位置づけということですね。
さて、今回は「before」と「after」の基本的な使い方を見ましたが、ここに上げているのは本当に初歩の初歩です。世の中に出回っている「これどうやってやっているの!?」的なデザインはこれらを駆使してやっていることが多々あります。
あ、そうそう。この最後のまとめのコーナーにある私の似顔絵も「before」で出しています。
実は、ブログを始めたころに、予めこのまとめの文章の領域を<div class="addup">で囲んでいたんです。でも最初はデザインは超適当にしていたのですが（だって最初は誰にも見られないから文章優先でやってたもの）後々は何かを挿入してわかりやすくしようと思っていました。
この擬似要素は予め「class」で囲んでさえいれば後からいくらでもいじれるので、とりあえず何らかの「class」で囲んでおく殺法はかなりオススメです。
WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。
スマホでの調整CSS
[CSS] スマホ対応は超重要! 私が最低限やっている6つのこと
今現在、Google検索では「スマホ対応」がされているかどうかは超重要になりました。PCの検索順位はスマホでの検索順位が適応されるそうです。
そのためにはスマホ対応がしっかりとされていないとダメです。今回はブログのスマホ対応がテーマです。
参考: Googleがモバイル ファースト インデックスを導入予定、影響は？対応は？ | 海外SEO情報ブログ
私がブログのスマホでの表示対応で最低限やっていることをまとめたいと思います!
スマホ対応で困った6つのこと
今回は私がスマホ対応のために最低限やっている6つを紹介するのですが、分かりやすいように「問題点」を見出しにして紹介しますね。
[1] スマホで見たら画像がはみ出す?!
まずはこちらの比較画像をご覧ください。
スマホで見た時に、上画像の左側のような画像を見たことありませんか? これは画像サイズがパソコンのままになっているんですね。大きいのではみ出しています。
これをスマホで見た時は自動で上画像の右側のように縮小してほしいんです。でも大丈夫! <img>に以下のコードを加えるだけでOKです。
img {
max-width : 100% ;
height : auto ;
}
ハイ。これは一発で直せました!
※2014年11月23日追記:「height:auto;」を入れ忘れていたので、追記しました。これがないと<img>タグに直接高さ指定をしている場合に画像がびよーんと伸びてしまいます。
[2] 動画や地図がはみ出す
YouTubeやGoogleマップをブログに埋め込んだときに、画面からはみ出していませんか?
ほら、YouTubeのこういうやつですよー。
あと、Googleマップがはみ出しているのもよく見ますね。
これも簡単に直ります。こちらのコードを追記するだけです!
iframe { width : 100% ; }
[3] 画像の横に文字がキューってなってる
さて次です。これもよく見ます。
これは、画像を「float : left ;」の指定で、文字を右側に回りこませているんですよね。
PC画面のように横幅が広ければ問題ないのですが、スマホだと画像の横に文字を回りこませるには無理があります。
なので、この「float」の回り込み指定を解除するだけです。
でもパソコンで見た時は、そのままにしておきたいので、ここではメディアクエリを使いましょう。
@media screen and (max-width: 480px) {※ ここにCSSを普通に入れる }
上記のメディアクエリの記述内に、調整したいCSSを入れ、下記のように合体です。
@media screen and (max-width: 480px) {
img { float : none ; }
}
[4] 余白とか空きすぎなんだけど……
あとは微調整ですねー。どのページもきっと「width」「padding」「margin」などを駆使して、パソコンで見た時にキレイに見えるようにコードを書いている思います。
でもそれをスマホで見ても同じようにはいかないんですねー。この例❶❷を見てください。
けっこう違いますね。
❶見出し（h2タグ）の調整
まずはこちらの「見出し」を見てください。オレンジ色の帯の部分です。
この例の場合、文字が大きすぎるのと、文字周りのスペースを取り過ぎだと思います。なので、メディアクエリで、横幅が480pxになると、「文字を少し小さくしたり、文字周りの余白を減らすCSS」を読み込ませます。
@media screen and (max-width: 480px) {
h2 {
font-size : 75% ;
margin : 1em 0 0.8em 0 ; }
}
| 変更前 | 変更後 |
|---|---|
| font-size（文字の大きさ）→ 105% | font-size → 75% ※ 文字の大きさを小さくしました。 |
| margin（余白）→ 0.7em 0 2em 0 | margin → 1em 0 0.8em 0 ※ 基本「 0 」にします。上下の余白を少し減らしました。 |
❷段落（pタグ）の調整
今度は最も文章に使われている<p>タグ。これは一番読みやすさに関わるので重要です。
上の「BEFORE」を見て私が気になったのは、両サイドのスキマ、文字の大きさ、余白（マージン）、行間です。実はこのままでも読みにくくないのですが、私のブログ記事のように長い文章の場合、スマホでは横一列の文字数を多めにしないと、長くなりすぎるんですよ（笑）。
なので、これもメディアクエリを使います。
@media screen and (max-width: 480px) {
p {
width : 100% ;
font-size : 65% ;
margin : 0 0 1.8em 0 ;
line-height : 1.7 ; }
}
変更したのはこちらの点。
| 変更前 | 変更後 |
|---|---|
| width（横幅）→ 85% | width → 100% ※ 両サイドの空間を減らすために文字の横一列の幅を広げました。 |
| font-size（文字の大きさ）→ 75% | font-size → 65% ※ 文字の大きさを小さくしました。 |
| margin（文字周りのスペース）→ 0 auto 2.5em auto ※ 左右は自動指定（auto）です。 |
margin → 0 0 1.8em 0 ※ 文字下のマージン以外はゼロで。 |
| line-height（行間）→ 1.9 | line-height → 1.7 ※ 少しだけ行間を減らしました。 |
<ul>とか<table>なども、同じような要領で「メディアクエリ」の中に追加していけばOKです。ちょっとだけ、手間だけど簡単です。
[5] スマホを横向きにしたら文字が大きい!
スマホを横向きにすると文字の大きさが急にでかくなることってないですか? これも余裕で直せるんですねー。
以下のコードを<body>のCSSに入れるだけ。
body { -webkit-text-size-adjust : 100% ; }
これだけで直ります。うまくいかないときは「!important」を入れてみてください。
body { -webkit-text-size-adjust : 100%!important ; }
これでもうまくいかない時は、<head>内にある「viewport」を以下のようにしてみてください。
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
[6] スクロールで横がグラグラする
スマホでタテにスクロールさせていると、左右にグラグラするサイトってありますよね。これも粗療法ですが、一発で直せる方法があります。
#wrap { overflow : hidden ; }
大枠の<div>（ここでは「#wrap」というidにしています）などに
「overflow : hidden ;」を入れるだけなんですね。
「overflow : hidden ;」は、はみ出した部分を強引に隠して見えなくするという意味です。
参考: [スマホサイト]左右に微妙にずれるのを解消するCSSメモ – ライフボックス
モバイルフレンドリーテストでチェック!
こちらのMobile-Friendly Test（モバイル フレンドリー テスト）で、自分のサイトがちゃんと「モバイルフレンドリー（スマホ対応）」かどうかを調べられますよー! 自分のサイトのURLを入れてチェックしてみてくださいね。
ちなみに「ヨッセンス」をチェックしてみると「Awesome!（スゲーぜ!）This page is mobile-friendly.（このページはスマホ対応できてるやん!）」と言われました。
さて、今回は最低限やっておいた方がいい、レスポンシブデザインについてでした。Google云々より、今回紹介したものはユーザーにとって見やすくする方法なのでぜひやってみてください。
それにしても、こういうレスポンシブデザインとかWEBについて学ぶのって独学では時間がかかりますよね。
brタグで改行の連打
文章で余白を作るのになぜbrタグで改行を連打したらダメなの?
ブログを書いていると「HTMLタグ」って言葉を頻繁に聞きます。で「見出しは<h2>タグを使え!」とか耳にするので、よくわからないけど使ったりします。
今回は、なんでそんなふうに使うのが良いかについて紹介しますね!
よくあるこんな文章を見てください
まずは、こんな感じのよくありそうなブログの出だし文章を見てください。 あ……内容ではなく、余白に注目です。
こんにちは!
今回は運動神経ゼロのわたしが「回し蹴り」の練習をしたいと思います!
イメージで言うと……（以下省略）
🍎この行と行の余白ですが、たぶん初心者の方は下記のようにHTMLを書いている方が多いのではないでしょうか?
こんにちは!<br /> <br />
<br />
今回は運動神経ゼロのわたしが「回し蹴り」の練習をしたいと思います!<br />
<br />
<br />
イメージで言うと……（以下省略）
ええ。「改行タグ」こと<br/>の連打です。だって、読みやすいように余白を作りたいんだもの。 わたしもHTMLを知らなかったときにはやっていました。でも正しくは、下のようにやるべきなんです。
<p>こんにちは!</p>
<p>今回は運動神経ゼロのわたしが「回し蹴り」の練習をしたいと思います!</p>
<p>イメージで言うと……（以下省略）</p>
あれ? <br/>タグを使っていませんね!? なんと代わりに「段落タグ」の<p>を使っています。
これってどういうこと??
実は人間の目で見ると、どちらを見ても同じように見えます。
こんにちは!
今回は運動神経ゼロのわたしが「回し蹴り」の練習をしたいと思います!
イメージで言うと……（以下省略）
ほら、これを見て、余白を表現するために<br/>を使っていようが、<p>を使っていようが人間の目にはどっちでもいいですよね? じゃあ、なんで<br/>ではなく<p>じゃないとダメと言っているのでしょうか? これは実は人間のためじゃないんです。Googleのためにです。
スポンサーリンク
Googleから見たWEBサイトはこんな感じ
Googleはインターネットの世界をクローラと呼ばれるコンピューター（グーグルボット: Googlebot）を走らせて皆さんの書いたブログをはじめとするデータを集めています。
何のためにかというと、そのデータをGoogleの検索順位の評価基準と照らしあわせ、「このブログのこの記事が素晴らしいから1位にしておこう!」と検索順位を決めるわけです。
で、Googleは人間がブラウザを使って見ているのとは違うふうにWEBサイトを見ています。こちらです。
Googleから見たブログの記事GoogleからWEBサイトやブログ記事を見ると、こんなふうに見えているんですよ。暗号みたいですねー。
このコードを見るには[ WEBページのどこでもいいのでマウスの右クリック ] → [ 出てきたメニューの中から「ページのソースを表示」を選択 ] → [ 新しいウィンドウでソース（HTMLコード）が見られる ]でオッケーです（Google Chromeの場合）。
ページの「ソース」を表示させる
Googleから見ると<br />と<p>は大違い
ということで、Googleからするとこれと……
こんにちは!<br /> <br />
<br />
今回は運動神経ゼロのわたしが「回し蹴り」の練習をしたいと思います!<br />
<br />
<br />
イメージで言うと……（以下省略）
……これは……
<p>こんにちは!</p>
<p>今回は運動神経ゼロのわたしが「回し蹴り」の練習をしたいと思います!</p>
<p>イメージで言うと……（以下省略）</p>
まったく違うというわけです。そもそもこの2つのHTMLタグはこんな役目を持っています。
<p>とは?
- 段落のまとまりを表現するためのHTMLタグ。
<p>と</p>にはさまれた部分が1つの段落だよ!という意味です。
<br/>とは?
- 段落内での改行を表現するためのHTMLタグ。
<br/>のところで改行しているよという意味。
ほら<p>タグも<br/>タグも、「余白を表現する」という役目は持ち合わせていないのがおわかりかと。ちなみにこんなルールがあります（ほかにもありますがわかりやすくするために省略）。
<br/>は、<p>の中で使う<br/>は2つ以上連続で使えない
もし<br/>を使うのなら、これだったらオッケーです。
<p>こんにちは!<br /> 今回は運動神経ゼロのわたしが「回し蹴り」の練習をしたいと思います!<br />
イメージで言うと……（以下省略）</p>
<p>の中で連打しない限りなら使えるんですね。わたしはこちらのような理由で、ほぼ<br/>タグを使わないんですが。 ![[HTML] BRタグは使うな! 私が「改行」を一切使わなくなった1つの理由](https://i0.wp.com/yossense.com/wp-content/uploads/br-do-not-use-250.jpg)
HTMLコード上で改行しても反映されない
では、なんでGoogleのためにこんなコードを書かなければいけないかというと、Googleは改行を認識できないからです。 例えば……
<p>ああ……
おなかがすいたなぁ……。
何が食べたいなぁ……</p>
この3行に分けているHTMLコードを見ても、Googleにはこんなふうに見えています。
<p>ああ……おなかがすいたなぁ……。何か食べたいなぁ……</p>
❶ちゃんと<br/>タグを書いてあげないと「ここが改行する場所ですよ!」と分かってもらえないんです。
❷それと同じで、「文字を太字にするHTMLタグ」である<b>を入れないと、太字にすることが伝わらない
……とかそういう意味です。
<p>ああ……<br /> おなかがすいたなぁ……。<br />
何か<b>食べたい</b>なぁ……</p>
こう書くことで、やっとGoogleに
「ああ、この文章は1つの段落になっていて、こことここに『改行』があるんだな、『食べたい』を太字にしているんだな」……と伝わるんですね。
じゃあどうやって余白を付けるんだよ!
でもHTMLでちゃんとした文法で書いても、納得のいかない表示のときがあります。
Googleに伝えるべきは正しいHTMLの記述です。でも人間にとっては余白を上手く使った「文章の読みやすさ」が重要です。
だから<br/>を連打したりしてるのですが、それをGoogleが見ても「うん。このブログは読者の読みやすさのために<br/>をいっぱい使って余白を作り出しているんだな。読み手視線ですばらしい!」とは受け取りません。
「なにこの文章!? <br/>を連打して文法違反だし、わけわかんねーよ!」と認識するわけです。
余白をもっと付けたければ「CSS」で対応しよう!
<P>タグwidth設定
かといって、ブログ記事は人間のために書いているのに、HTMLの文法を優先しすぎて読みづらくなるのってどうなの?!ですよね。
<br/>を連打せずにどうやって余白を作るんだよ!……というお声が聞こえてきそうです。
そこで登場するのがCSS（スタイルシート）です。基本的にすべての装飾はCSSにお願いしましょう。
ここに書くと長くなりすぎるので、CSSについては別途記事を書きますね。
さて、今回はHTMLの超基本のお話をしました。なぜ<br/>の連打がダメなのかが分かっていただけたと思います!
ただし、文法どおりに書かないとペナルティをくらって検索順位が下がるとかそういうことではありません。Googleに内容を伝えやすくするためにやるんです。
Googleに伝えやすくなるということは、結果的に検索順位で上に来やすくなることでもあるので。
WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。
改行タグは使うな！ [HTML] BRタグ Pタグの横幅を調整し、見やすく
[HTML] BRタグは使うな! 私が「改行」を一切使わなくなった1つの理由
WEB制作に関わっている方にはお馴染みのタグと言えば<br>、もしくは<br />タグです。5年前ぐらい前までは何かとお世話になっていたこのタグですが、徐々に嫌われるようになってきました。
というわけで今回は、<br />を使わないほうが良い理由です。
→→ <p>の横幅を調整しないと一列の文字数が多すぎて見づらい
改行タグは他のデバイスで見るとズレるから使うな!
なぜ<br />を使わない方が良いのでしょうか?その理由はこの一言で終わってしまうのですが、そうなんです。
ほかのデバイスで見たときにズレる!
WEBコンテンツをWindowsとかMacで書くと、普通はPC用のモニターに合わせて改行をすると思います。文字の横幅って、スマホだと大分狭いんですよね。スマホどころか、デスクトップでもモニターが違えば改行の位置もずれちゃうんです。
なので、デバイスの多様化に対応するために「改行タグ」は一切使わなくなったというわけ。
ややこしいので具体例で見てみましょう。
PC→○ / スマホ→×な例
まずはパソコンのモニターで見た時にバッチリに見えるように改行しているけど、スマホで見るとアレ?な例です。
❶パソコンのモニターに合わせた改行
こんな感じで非常に見やすく改行しています。……パソコンで見る分には。
❷それをスマホで見ると
ところがそれをスマホで見てみるとこんな風になっています。
読みやすいように意図的に入れた改行と見事にズレまくっています。とくに1、2文字で改行が入っているのはウザすぎですよね。
PCと比べ、スマホの文字の表示数が極端に少ないことが原因です。
スポンサーリンク
PC→○ / スマホ→○
ではさっそく直しましょう。全部の改行を取ります。段落はもちろん<p>で囲んでいます。
❶改行を取り払いました
スマホで見たら変なところに改行が入りまくっていたので、すべての改行を取りました。
パソコンで見ても問題なく見られますよね。ただ、<p>の横幅を調整しないと一列の文字数が多すぎて見づらくなるのでご注意下さい。
❷スマホで見てみると
さて、すべての改行をとっぱらったやつをスマホで見てみます。どうなっているのでしょうか?
おおー! 見やすい!! そうなんです。スマホで見ると横幅が狭いので、横に20文字ぐらいでちょうど読みやすい量です。
スポンサーリンク
brタグに関する追記
<br>タグに関する追記です。
<br>と<br />のどっち?
<br>という表記と<br />という表記の両方があります。この違いというのは、そのページが「HTML」で書かれているか、「XHTML」で書かれているかの違いです。
<br>- HTMLで書かれたページに使います。
<br />- XHTMLで書かれたページに使います。このXHTMLというやつは、「開始タグで始まれば終了タグ（閉じタグ）を必ず入れなければならない」というルールがあります。
<p>で始まれば</p>で終わるというものですね。でもこの<br>には終了タグが存在しないため、強引に（?）<br />と表記するわけです。<img />タグも同じですね。
<br />を消し去る裏ワザ
何百何千にもわたるページで、すでに<br />を使いまくってて、もうどうしようもないよ!って方、いると思います。でもCSSをチョイといじるだけで一発ですべての改行を無効化にする技があるようです。
@media screen and (max-width: 480px) {
br { display : none ; }
}
これをやると、スマホで見たときだけ、本当にすべての<br />が消え去ります!きち（@YOSHI_YANO）さん、情報教えてくれてありがとうございます。
そう言えば7、8年前に初めてWEBに携わりだした頃には<p>タグなんて使っていませんでした。段落の違いを出すときでも<br />を連打してスペースを開けていましたねー。懐かしい。
<br />の連打はHTMLでは文法違反になります。
これによってスパム判定を受けることはないですが、できるなら文法を守って記述したいものです。ただ<br />を連打しているブログでも検索順位が強いものも多いです（笑）。
検索順位にとって一番大切なのは、正しい文法ではなくコンテンツの内容というのも事実ということですね。
WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。
BookMarkletを作成、「ブックマークレット・ジェネレーター」
コレ抜きでブログは書けない!!
ブロガーにオススメの厳選ブックマークレット!!
以前、記事でブックマークレットってなんぞや?について書きました。今度は私が実際に使っていて、現在進行形で役に立ちまくっているオススメのブックマークレットを紹介します!!
ブックマークレットをオススメしている理由は、ブラウザのお気に入り（ブックマーク）に登録でき、ワンクリックで起動できるという手軽さだけではありません。なんと言っても軽いんです! 今回は「ブロガー向け」に絞ってのお勧めブックマークレットを紹介します!
ブロガーにオススメのブックマークレット
では私も普段から愛用しているブロガー向けのブックマークレットを5つを紹介します。
最初は面倒臭いが、アフィリエイターの方や、普通にWEB制作をされる方も要チェックですよ～♪
記事紹介のブックマークレット
「普通のサラリーマンのiPhone日記」のヒロ（@hiro45jp）さんが作者です。
このブックマークレットで出来ること
❶このshareHtmlは、一瞬でこれだけのことができます。
- ページのスクリーンショットが作られ、小さく縮小される
（クリックするとページに飛ぶ）。 - ページのタイトルが表示される（クリックするとページに飛ぶ）。
- 登録されている「はてなブックマーク」数が表示される。
- ひと言コメントも入力できる（ポップアップウインドウで入力）。
私のブログでは、最もよく使っているブックマークレットです。これがなかったら、スクリーンショット画像なんてまず入れないでしょう。面倒すぎます（笑）。本当に神ブックマークレットとはこのことだと思います。
このブックマークレットは、自分のブログで他の方の記事を紹介したり、自分の記事を参照するときにもバリバリ使えますよ～。
❷このShareHTMLが、ブラウザで開いているタブ全部に、一瞬でかけられる、Google Chromeの拡張機能もオススメです。
[2] 商品紹介リンクを作るブックマークレット
次は「カエレバ」「ヨメレバ」「ポチレバ」の3セットの神ブックマークレットです。こちらは私も大好きな「わかったブログ」のかん吉（@kankichi）さんが作成しています。
このブックマークレットで出来ること
これらのブックマークレットは、一瞬でこんなことができます。
- 商品の画像（クリックすると商品ページに飛ぶ）を表示させる。
- 商品名（クリックすると商品ページに飛ぶ）が表示される。
- 予め選択しておいたショップ（アマゾン、楽天、Yahooなど）へのリンクテキストが表示される。
- すべてのリンク先に自分のアフィリエイトコードが入る。
という訳で、アフィリエイターには必須のブックマークレットだと思います。
ちなみに「カエレバ」「ヨメレバ」「ポチレバ」の3つのブックマークレットは、作り方、登録方法、表示のされ方などは同じですが、下記のような差があります。
❶カエレバ
こちらが基本になります。アマゾンとか楽天の商品をアフィリエイトとして紹介したいときは、とりあえず「カエレバ」を使っておきましょう。
❷ヨメレバ
こちらは書籍を紹介するのに特化したブックマークレットです。なのでKindleへのリンクも自動で生成されます。便利ですねー。
❸ポチレバ
こちらはiTunesで販売されているもの、つまりiPhoneアプリとか音楽を紹介するのに特化したブックマークレットです。
これを手動で作ろうとすれば、アマゾンと楽天の商品ページへのリンク先を探して貼り付けるだけでもかなり手間です。カエレバ無しでやろうと想像するだけでゾッとします。しかも手動と違い、ブックマークレットの場合は、リンクの貼り付けミスがありません。
カエレバ・ヨメレバ・ポチレバのカスタマイズはこちらの記事をどうぞ。私はこれをやるだけでアフィリエイトの収益が激増しました。
[3] ページの情報を引き抜き、自由にHTMLを作成するブックマークレット
[3] 次に紹介するのはMake Linkです。
ShareHtmlみたいに自分用のブックマークレットを作れます。HTMLを知っているへ向けたブックマークレットで、アイデア次第でいろんなことができます。
簡単に説明すると
「ページURL」「ページタイトル」「選択しているテキスト」を抜き出し、
自分用に自由に文章やhtmlタグに組み込めるブックマークレットです。
使い方によっては、ブロガーだけでなくWEB制作に携わる方すべてにオススメできるブックマークレットです。
このブックマークレットで出来ること
例えばですが、こんなタグが一瞬で作れます。 一瞬ですよ! マジで。
<blockquote cite="http://yossense.com/toy_can/" title="ついに揃った「銀のエンゼル」5枚! おもちゃのカンヅメをもらうぞ～!">
<p>金のエンゼルは37年間生きてきて、まだ見たこともないし、銀のエンゼルは、5枚集めないといけません。子どもの頃は、何年もかけて5枚も紛失せずに集めるなんてほぼ不可能（笑）。</p>
</blockquote>ついに揃った「銀のエンゼル」5枚! おもちゃのカンヅメをもらうぞ～!
<p class="quoted"><cite><a href="http://yossense.com/toy_can/" target="_blank"></a></cite>より引用しました。</p>
これを表示するとこんな感じ。
金のエンゼルは37年間生きてきて、まだ見たこともないし、銀のエンゼルは、5枚集めないといけません。子どもの頃は、何年もかけて5枚も紛失せずに集めるなんてほぼ不可能（笑）。
ついに揃った「銀のエンゼル」5枚! おもちゃのカンヅメをもらうぞ～!より引用しました。
変数を組み込むことで情報を抜き出せる
もちろん、上の例は、あくまで一つの例です。下にある4つの変数をHTMLタグに組み込むことで、自由にカスタマイズできちゃいます。
| ページのURL | %url% |
|---|---|
| ページのタイトル | %title% |
| 選択しているテキスト | %text% |
| ページのURLエンコード | %encodeURI% |
例えば「%url%」を使えば、ブックマークレットを起動させたページのURLを取得できるということです。
[4] Youtubeなど動画の埋め込みコードを取るブックマークレット
YouTube・TED・USTREAMを始めとする動画をブログに貼り付けるときに超便利な「Video2HTML」です。動画の埋め込みコードを一瞬で取得できます。
ブログ「Feelingplace」のふぃーぷれ（@feelingplace）さんが制作者です。
このブックマークレットで出来ること
- 動画が見られるサイト「YouTube」「Vimeo」「TED」「Daily Motion」「SlideShare」「USTREAM」の動画をページの中に埋め込められる。
- 動画を表示する横幅も自由に変更できる。
- サムネイルも表示できる。
最初の設定のときに横幅も決められるのは嬉しいですね。自分のブログに合った大きさに調整できるんです! これでメイン領域から動画がはみ出すような悲しい事件とはオサラバです。
もちろん、このブックマークレットを使わないでも、ブログに貼り付けるHTMLコードを取得できるのですが、普通にやると面倒なんですよね～。いやはや、ふぃーぷれ（@feelingplace）さんに感謝!
ふぃーぷれさんのブログではYouTube2HTMLというブックマークレットも公開されていますが、Video2HTMLに統合されているようです。なのでVideo2HTMLをお使い下さい。
[5] 複数の検索エンジンで同時に検索するブックマークレット
WEB関連の仕事をやっていると、検索することがめっちゃ多いです。私のようなブロガーで言うと、Googleはもちろん、無料素材サイトや、類義語辞典とか……。
そして気づくんですよ。複数の検索エンジンで同じキーワードを検索するのってウザい!ってことに。例えばアフィリリンクを貼る時にiOS用のiTunes、そしてAndroid用のGoogle Playで検索するとか、音楽のアフィリを貼りたいときにアマゾンとiTunesで検索するとか。ほかにも無料素材サイトの「ぱくたそ」と「足成」で検索するとか。結構あるでしょ?
それを一度の検索で済ませてくれる「Search at Once」というブックマークレットがあるんですよ!
このブックマークレットで出来ること
- 複数の検索エンジンで同時に検索
- 「iTunes」「Google Play」「Amazon」が選べる。
- ほかにも好きな検索エンジンも自分でカスタマイズできる
詳しくは下記の記事をどうぞ!!
BookMarklet ワンクリックで便利な簡易プログラム
ブックマークレットとは? ワンクリックで便利な簡易プログラム
今回はブックマークレット（Bookmarklet）についてのお話です。
パソコンはインターネットを見るぐらい……って方には馴染みが無い言葉だと思います。ですが、ブロガーにとっては、ブックマークレットのない記事投稿なんてあり得ない!ってレベルのものです。
ということでブックマークレットって何?
という初心者に向けたお話をしてみたいと思います。
で、ブックマークレットってなに?
さてブックマークレットって何なのでしょう?
ブックマークレット (Bookmarklet) とは、
ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである
ブックマークレットの知識がない場合はティンプンカンプンなハズです。
簡単に言うと、ブラウザのお気に入り（ブックマーク）に登録できる、ちょっとしたプログラムのことです。プログラムってどういうことかと言うと、ブラウザ上で複雑な動作がボタン一つで可能になるようなものです。
という訳でブックマークレットでどんなことが出来るのかを簡単に見てみましょう。
- ページのスクリーンショットが作られ、小さく縮小される（クリックするとページに飛ぶ）。
- ページのタイトルが表示される（クリックするとページに飛ぶ）。
- 登録されている「はてなブックマーク」数が表示される。
- ひと言コメントも入力できる（ポップアップウインドウで入力）。
箇条書きで書きましたが、分かりにくいですね……。現物を見れば一目瞭然です。こんな感じ!!
そうです。主にブログで見かける、参考サイトなどを表示しているやつです。これは「ブックマークレット」という簡易プログラムを使って作っていたんです。
❷これ、普通にやったら……
まさに神ブックマークレットです。もしブックマークレットを使わずに、画像のスクリーンショットを撮って、画像編集ソフトで開いてトリミングして……という風に普通にやろうとすると３～5分ぐらいかかるのではないでしょうか?
それがお気に入り登録の中にある「ShareHtml」という文字をクリックするだけで出来るようになるんです!
ブックマークレットの登録・使い方
それではブックマークレットの登録の仕方から使い方までを見て行きましょう。
「ブックマークレット」を登録
ブックマークレットは作成した方のページ上で無料で手に入ります。大抵がこんな感じで、普通のリンクテキスト（クリックするとリンク先に飛ぶ文字）のように置かれています。
上記の画像で言うと「ShareHtml」という文字のリンク先にプログラムが配置されています。なので、クリックするとこのプログラム、つまりブックマークレットが起動するようになっています。
なので、このリンク先をお気に入り登録すれば良いのです。
❶ブックマークレットのテキストをドラッグ
ブックマークレットのテキストの上にカーソルを合わせ、ドラッグします。
そしてブックマークバーの上でドロップします。Google Chromeのブックマークについては以下の記事をご参考に! あ、↓ここでもブックマークレットを使ってこれを作っています。
❷ブックマークレットの登録完了
はい、完成です!! ブックマークバー上に「ShareHtml」っていう文字が入りました。
インターネット・エクスプローラーの場合は、テキスト上で[ マウスの右クリック ] → [ お気に入りに追加 ] で登録できます。
ブックマーク（お気に入り）に登録したやつをクリックするだけです。お気に入りのページに行くのと同じやり方です。 そうなんです。ブックマーク（お気に入り）に入れて使うから「ブックマークレット」という名前なんですね。 このブックマークレットですが、そのままだといちいち「お気に入り」からブックマークレットを選ばなくてはなりません。超面倒ですよね。 こちらで紹介する技を使えば、ショートカットでブックマークレットを起動できます。詳しくは下記にて。ブックマークレットの使い方
補足❶: ブックマークレットをショートカットで起動する方法
補足❷: ブックマークレットをマウスジェスチャーで起動する方法
上で、ブックマークレットをショートカットにしましたが、さらに踏み込んで、マウスジェスチャーで起動させる技も紹介します。
マウスジェスチャーをご存じない方にも、これを機に知ってほしいですー! もう便利すぎですんで。
あ! ちなみに、マウスジェスチャーに設定したい場合は、まず上で紹介している「ショートカットの設定」を済ませてから行いますので!
いまさら……って感じもするのですが、冒頭でも書いたように、ブックマークレットって、ブロガーの中では常識です。なのに一般的には認識度が激低いものの一つだと思います。なので、ぜひブロガーじゃない方にもオススメしたくて記事を書きました。
ブログに見出し(Hタグ)が重要
ブログに見出し(Hタグ)が重要だというのはなぜ?…をわかりやすくまとめた
今回はHTMLを勉強していると必ず突き当たる「<h1>タグ」とか「<h2>タグ」とも呼ばれる「見出し」について紹介します。
目次
「見出し」って何?
さて、ブログやWEBサイトの中で使われる「見出し」という言葉は、何を指すのでしょうか?
口で言うよりも見たほうが早いと思うので、下記画像を見てください。こういうものを指します。
「見出し2」の例
簡単にいうと、上の画像のオレンジの帯部分のように、文章中の重要なキーワード（要約した短いキャッチフレーズ）を文章の前に目立つように配置している部分です。これを「見出し」と言います。
あ、ちなみに上の画像で「見出し2（h2タグ）」と書いてあるのは気にしないでください。あとで説明しますので!
見出しの重要性
では、なぜブログ記事の中に「見出し」を入れる必要があるのでしょうか?
その理由をまとめてみます。
- 文章が読みやすくなる
- 見出しがない文章だと、メリハリがないため非常に読みづらい。読みづらいとすぐに読者はページから離脱します。
- 内容を理解しやすい
- 見出しは、あとに続く文章群の内容を要約しているため、流し読みをするときに内容を理解しやすくします。理想は見出しを読むだけで記事内に何を書いているかがある程度理解できること!
- 目印になる
- 見出しはデザイン的に目立つため、後から読むときに「どこまで読んだか」の目安になる。また、どこに書いてあったかを探すときの印になる。
- 検索順位の指標になる
- Googleが、その記事の検索順位を付けるときに「見出し」を頼りにする。
最後の「検索順位の指標になる」というのは補足が要りますね。こちらは後ほど詳しく書いてあります!
ブログではこんなふうに見出しを付けるよ
ブログで「見出し」を作りたいときは、こんなプルダウンでできます。
「段落」のプルダウンで「見出し」を付ける
これはWordPressでの例ですが、どの無料ブログでも大体同じだと思います。
もしくはHTMLで、こんなふうに<h2>のようなコードではさむと見出しになります。
<h2>ここに見出しが入ります</h2>
WEBサイトには6種類の見出しがある!
WEBサイト上の「見出し」には優先順位があって、6種類の見出しが存在します。
- 見出し1（
<h1>） - 見出し2（
<h2>） - 見出し3（
<h3>） - 見出し4（
<h4>） - 見出し5（
<h5>） - 見出し6（
<h6>）
……のように、数字の1～6まであるんですねー。わたしは使っても見出し4（<h4>）までですが。
で、「見出し1」が最も大きな見出しで、2、3……になるにつれ、小さな見出しになっていきます。
いや……まだよくわかんないんだけど??
ええ、もっと図を元にわかりやすく説明します。
見出しは「包括するもの → 包括されるもの」の順に
ではこちらの「おしながき」を見てください。レストランのメニューですね。
この「おしながき」の中の見出しはどれでしょうか?
この「おしながき」の「見出し1（<h1>タグ）」「見出し2（<h2>タグ）」「見出し3（<h3>タグ）」はどれ?（
正解はこちらです（アニメーションになっています）!
アニメーションで見る「見出し1（<h1>タグ）」から「見出し3（<h3>タグ）」まで
上の画像はアニメーションになっているのでじっと見ていてください。
なんとなく、「見出し」の優先順位がわかってきましたか?
ブログの中での見出しの例
ブログで使う「見出し」はこういうものです。
ブログでの見出しの例
もうちょっとわかりやすい例を出します。
「私の好きなお菓子」を見出しでまとめると…
たとえば「私の好きなお菓子を紹介」という記事を書くとします（← 本当は記事タイトルをもっと考えるべきですが）。
たぶん書くとしたらこんな感じの「見出し」を付けるでしょうね。
【見出し1】私の好きなお菓子を紹介
【見出し2】私の好きなスナック
【見出し3】好きなポテトチップス
【見出し4】プリングルスのサワークリームオニオンが最強
【見出し4】スタンダードな塩味はカルビー
【見出し4】わさビーフの美味さ
【見出し3】コーン系のスナック
【見出し4】うまい棒なら「サラダ味」が最強
【見出し4】しみコーンの絶妙なハーモニー
【見出し2】私の好きなチョコレート
【見出し3】好きな板チョコ
【見出し4】レオニダスはやはり鉄板
【見出し4】明治ミルクチョコは伝統の味
【見出し3】ウエハース系チョコ
【見出し4】キットカットは毎日食いたい
ほかにも「見出し2」には「好きなキャンディ」とか「好きなグミ」といろいろ出てきますね。
まぁ、ここまで広がるのなら記事を分けたほうがいいんですけど（笑）。
ちなみに、各「見出し」のあとには必ず文章がきます。あくまで、見出しの後につづく文章の要約＝「見出し」ということですね!
上の例のように、見出しの「1」とか「2」の順番は……
「包括するもの」→「包括されるもの」
……へと、順番に使うことを覚えておいてくださいね!
見出しの使い方
では、見出しは具体的にどうやって使うのでしょうか? その使い方を紹介します。
通常は「h2」だけでオッケー
上の例では<h2>から<h4>までふんだんに見出しを使っていますが、物事を体系的にまとめた記事でない限り、通常は<h2>ぐらいを使っていればオッケーです。
<h3>とか下位層の見出しは使う必要はありません。
「見出し2」の例
なぜ<h1>ではなく<h2>から使うのかというと、実はブログではたいていの場合、記事タイトルが「見出し1（<h1>）」になっているからです。
「はてなブログ」では「大見出し」を選択しても「<h2>タグ」ではなく「<h3>タグ」が入るそうです。無料ブログを使っている方はご注意ください。
1つの記事内に「見出し1（<h1>）」を複数使うのは良くないので、記事内には「見出し2（<h2>）」から使うというわけです。
ルールに従って「hタグ」を使う
先ほど「見出しは優先順位があって、順番に使う」と書きました。
でも、ブログ初心者の方にはこういうミスをする方がいらっしゃいます。
見出しタグを使わずに文字を大きく装飾する
まず多いミスは「見出し2（<h2>）」を使わずに、<span>などで文字を大きくして装飾すること。
たとえばこんな感じ。
<span style="color:red; font-size:30px;">私の好きなチョコレート</span>
たしかにこう記述すると、こんなふうに見かけ上は文字が大きくなって赤くなって目立ちます。
私の好きなチョコレート
人間にとってはこれで良いのですが、実はGoogleから見て「見出し」とは認識されないんですよー! なのでちゃんと<h2>のような「hタグ」を使いましょう!
この下のような感じで!
<h2>私の好きなチョコレート</h2>
h5のデザインが好きだからh5を使用 → ×
あと、こういうものも見かけます。
それは「見出し5（<h5>）」のデザインが好きだからと言って本来<h2>を使うべきところに<h5>を使うというミスです。
デザインが好きだからと言って本来「見出し2」のところに「見出し5」を使うのはダメ!
デザインはもう少し慣れてきたらCSSの勉強をして、いくらでも変更できますのでご安心を!
ということで、デザインのことはさておき、<h2>から使っていってください。
<h5>のデザインが好きなら、後日勉強してから<h2>のデザインを<h5>のデザインに変更できますので!
「見出し」は検索順位に関わってくる
では、なぜ「見出しタグ」を付けてまで、Googleに「ここが見出しだよ!」ということを伝えたいのでしょうか?
実は検索順位に関わってくるからです。
「hタグ」を使わないとGoogleに「見出し」と伝わらない
Googleのコンピューターは、どのキーワードでどの記事が上位に来るのが望ましいかを、ネット上を徘徊しながらランク付けしていっています。
「Google」での検索結果
その際に重視するのが、「何について書かれているか」です。そのための重要な指標が「記事タイトル」と「見出し(<h1>～<h6>)」なんですね。
なので、装飾的に文字を大きくして赤くするだけでは、Googleのコンピューターに「ここが見出しだよ!」ということが伝わりません。
じゃあどうするかというと、「<h2>」のような「見出しタグ」を使う以外の方法がありません。じゃないとGoogleには「見出し」と認識されないから。
人間向けとGoogle向けの「読みやすさ」
つまり、見出しを表すコードの<h2>は、Googleが読みやすくするための印なんです。
Googleが読みやすくする??……どういう意味?
……と思われそうなので、こちらで人間向けの「読みやすさ」とGoogle向けの「読みやすさ」を説明します。
人間向けの「読みやすさ」とGoogle向けの「読みやすさ」
上の画像のように、人間向きの「読みやすさ」は、ほかの文章と区別させる装飾を加えることです。
見出しの背景を赤くして、文字を大きくするなどの装飾を施し、ほかの文章群に埋没させないデザインにすることで読みやすくなります。
でもGoogleに対しては、色を変えることや文字の大きさを変えることでは伝わらず、代わりに<h2>のような見出しタグを使うんです。
Googleに装飾は見えないんですね。単に<h2>のようなコードでしか判別できません。
これで、Googleにどれが見出しなのかが伝わり、その記事が何について書いてあるのかが明確になり、検索順位も上がってくるわけ。
見出しを使うときの注意点
では、Googleに「この記事が何について書かれているか?」を伝えやすくするために、見出しで気をつけるべきことをまとめます。
1見出しは後に続く「文章群」の要約
見出しはその文章群を端的に要約した「キャッチコピー」のようなものです。
ということで「見出し」は「見出し」のあとに続く文章群を要約して書きましょう。つまりこういうのはアウトです。
【サッカーのルール「オフサイド」について】
ふと思ったが、グラノーラは美味い。毎日食っても飽きない。というか、わたしは実際に1年間毎朝グラノーラを食べ続けたことがある。そして……（略）
ヨス
いやームチャクチャですね。「サッカーのルール」という見出しなのに、グラノーラについて語っている!
2見出しは端的に
記事タイトルと同じで、見出しが長くなりすぎるとGoogleに何が言いたいのか伝わりにくくなります。
端的にそのパートを凝縮した見出しにしましょう。特に意識したいのは見出しは文章ではないこと!
あくまで「見出し」で、「キャッチコピー」のようなものです。最低でも「。」で区切って2文になるのはやめましょう。
長い「見出し」はGoogleに伝わらないだけでなく、人間の目にも読みにくくなりますよ～。
3見出しは具体的に
よく見かけるのが抽象的な見出しです。
「種類」とか「外観」みたいな見出しですね。人間は文脈でわかってもGoogleには伝わりにくいです。
- × 種類 → ◯ 狩猟犬の種類
- × 外観 → ◯ 吉野家丸亀店の外観
みたいな感じで、確実にGoogleに伝わるように具体的にしましょう。
4場合によっては数字を入れる
手順を示すときなどは頭に数字を入れたほうが読者にとってわかりやすいです。以前書いた「見出しには数字を打て」にもありますが。
たとえば、「あなたが犬を飼うべき10個の理由」というタイトルなら……
<h2>【3】犬は癒しをくれる</h2>
みたいに数字を入れたほうが「今は10個のうち3個目だ」というのがわかりやすいです。
数字は必要なときだけ入れましょう。なんでもかんでも見出しに数字を入れるのは逆に不自然なのでやめましょう。
5見出しのあとには文章を入れる
「見出し」はあくまで要約した文章です。見出しが連続で続かないようにします。
<h2>犬の種類</h2>
<h3>柴犬</h3>
上のようにするのではなく、「犬の種類」に関する文章を記述しましょう。
<h2>犬の種類</h2>
こちらでは犬の種類についてまとめて……（略）
<h3>柴犬</h3>
柴犬の名前の由来は……（略）
「見出し」はあくまで「見出し」です!! うしろに文章が来て初めて「見出し」になりますよー!
長くなりましたが、これがHTMLでいうところの「hタグ」こと「見出し」についてです。
「見出し」は検索順位のためにあるわけではありません。適切な部分を見出しにすることで読者にとって読みやすくしてくれます。
慣れてくると簡単にできるようになりますので、ひたすら書いていってくださいねー。
![Grand Teton [Explored 4/28/24]](https://live.staticflickr.com/65535/53683680357_50bfb8a6e8_s.jpg "Grand Teton [Explored 4/28/24]")
海岸通りの夕陽 