まろりかモンスター

パソコンだいすき♡ 雑記ブログです！

財布を落とした時に備えて知っておくべきこと3つ。日本は素晴らしい。

雑記

f:id:marorika:20180310205218j:plain

先日、財布を無くしかけました。無くしたと気付いた時の絶望感といったら最悪でした。

結果的に紛失した財布を見つけることができたのですが、見つけるまでは落ち着いていられませんでした。

見つからなかった場合は紛失届けを出したりとしないといけないので色々調べました。 そんな中、「財布を落とした時に備えて知っておくべきだ」と思ったことがあったのでまとめました。

財布の紛失に気づいたときの絶望感と焦り

仕事帰りに美容院の予約をしよう財布の中にあるカードを取るため、リュックの中にある財布に手を伸ばしました。 いつも財布を入れているポケットになかなか見つからないのでしっかり中身を目で確認しましたがありませんでした。

財布を落とした場所の心当たりはありました。 仕事帰りにロッカーからリュックを出す時かなと。 電車に乗り遅れないように焦ってリュックを出したので、その際に落ちてしまったのではないかと思いました。

ただ確証はなかったので前日は何をしていたか思い出したり、盗まれた可能性がないかを考えたりしました。

そんこんなしているうちに、そういえばリュックのポケットのチャックは閉まっていたのかが不安になってきました。

などなど、不安や焦りは募る一方で紛失したその日は情緒不安定でした。 家族にも心配をかけてしまい情けなかったです。

次の日出社すると、会社の人が拾ってくれていたのでホッと安心したのでした。

財布を落とした時に備えて知っておくべきこと3つ

f:id:marorika:20180310205153j:plain

１．紛失物は見つかるかもしれない

日本ではモノを紛失しても警察に届けてもらえる可能性が高いので、 誰かが拾って警察に届けてもらえればあとから受け取ることができます。

平成29年は過去最大で拾得物が多かったようですが、 落とし物の中でも財布や各種証明書、携帯電話は6割以上は落とし主に返還されているようです。

f:id:marorika:20180310205120p:plain

遺失物取扱状況(平成29年中) 警視庁

日本は素晴らしいですねぇ！

落とし物は検索できる

警視庁が出している落とし物検索を使えば 警察が預かってくれている落とし物を確認することができます。

「落とし物検索」に掲載されるまでは落とした日から数日かかるのが難点ですが、手軽にさがせるので便利ですね。

なお、紹介した「落とし物検索」で検索できる拾得物は東京都中心です。東京都以外は他道府県警察のホームページで検索できるようです。

警察から連絡をもらえるかもしれない

警視庁のホームページによると以下のように記載されているので、 財布に名刺など電話番号が入っているものを入れておけば連絡をもらえるかもしれません。

警察署では、中身の確認をしながら記名品や連絡先がないかを調べ、落とした人に返します。

２．財布を無くした時は不安になっても意味がない

財布を無くした時は絶望感や不安を感じてしまうと思います。

無くしたと気付いたそのタイミングは残念な気持ちになってしまうのは仕方がないことかもしれませんが、 長く引きずって気分を悪くしてももったいないです。

不安になったことで落とした財布が出てくるわけではないので、 不安になるのではなくやれることをやりましょう。

しっかり状況を整理するのが一番だと思います。

本当に無くしてしまったのか？紛失した可能性のある場所は？財布の中には何が入っていた？
などなど、一度考えられることを整理して整理が終わったらできるだけ考えないことをおすすめします。

不安で財布を無くした時のことを思い出しても堂々巡りするだけで時間がもったいないです。
どうせ考えれば考えるほど記憶はあいまいになっていくので意味はほとんどありません。

３．無くす前にやれることはやっておく

無くさないように対策する

当たり前ですが、財布を無くさないように事前に対策をしておきましょう。

常日頃から無くさないように気をつけることが重要です。これは当たり前ですね。
また、焦っているときが一番無くしやすいということをしっかり認識しておくことが重要だと思います。

物理的に無くさないようにチェーンでくくったり、あえて大きめの財布を使えば無くしづらいと思います。

無くしてもダメージが大きくならないようにする

無くさないように対策するだけでなく、無くしたときのダメージが大きくならないようにする対策も重要です。

財布には使うだけのカードやお金を入れないようにすれば、財布を紛失した時のダメージも減ります。 また、財布をカード入れとお金入れを分ければ、両方一気になくす確率が小さくなります。

財布に名刺や電話番号を記載したメモをいれておけば連絡をもらえる可能性もあり、 財布が戻ってくるかもしれないという期待を持つことができるので精神的ダメージも軽減できます。

おわりに

財布を落とした時に備えて知っておくべきこと3つを紹介しました。

財布を無くした時のことを事前に考えるきっかけになれば嬉しいです。

カナダトロント発！ドリームポップバンドのAlvvaysがおすすめ！

音楽

f:id:marorika:20180309024331p:plain

Alvvaysについて

2011年にカナダトロントで結成されたドリームポップバンドのAlvvaysを紹介します。

女性ボーカルの優しい声とどこか懐かしいメロディーがとても心地よく、 まさに夢をみているような心地の曲を多くリリースしています。

バンド名の綴りはAlvvaysですが、普通に「オールウェイズ」って読みます。vを２つ続けてwにしているのが特徴的です。
ちなみに、「Always」にしなかったのは、すでに「Always」というバンドが存在していたからだそうです。

メンバー

Alvvaysのメンバーは女性3人、男性2人の5人グループです。
元々は、ドラムは男性のPhil MacIsaacでしたが、2017年途中からは女性のSheridan Rileyに変わっています。

ボーカルのMolly Rankinは1990年代に活躍したカントリーミュージックバンド「The Rankin Family」にいた John Morris Rankinの娘です。
Alvvaysの曲にはカントリーミュージックのような曲もあるので、お父さんの影響も受けているのでしょう。

メンバー 役割
Molly Rankin ボーカル、ギター
Kerri MacLellan キーボード、バックボーカル
Alec O'Hanley ギター
Brian Murphy ベースギター
Sheridan Riley ドラム

代表曲

Alvvaysの曲はハズレ曲が少なくどの曲も良い曲が多いのですが、 数ある曲の中で代表曲を選ぶとすると「Archie, Marry Me」です。

この曲は2014年のベストソングとして、アメリカの有名メディアであるRolling Stoneに選出されています。

Alvvays - Archie, Marry Me

このような曲が好きな人はきっとAlvvaysを気に入ると思います。

来日は？

日本ではまだまだAlvvaysは有名ではないかもしれませんが、 2ndアルバムが発表された時はタワレコなどで特設コーナーがしっかりと設けられてました。

Alvvaysは日本でのライブ実績はなく、また、来日予定もないのでAlvvaysファンにとっては悲しいですね。

Alvvaysの公式サイトやSNS

Alvvaysは公式サイトだけでなく、InstagramやTwitter、Facebookもやってます。

公式サイト

ALVVAYS公式サイト

Instagram

Alvvaysさん(@alvvaysband)がシェアした投稿 -

Twitter

Facebook

リリースしたアルバム

Alvvaysはこれまでに2つのアルバムをリリースしています。

どちらのアルバムもドリームポップ、ジャングルポップらしい曲がたくさん収録されているのでおすすめです。

ファーストアルバム：Alvvays

2014年7月にリリースされたファーストアルバム「Alvvays」。
代表曲の「Archie, Marry Me」も収録されています。

「Archie, Marry Me」以外だと次の曲も人気です。

www.youtube.com

セカンドアルバム：Antisocialites

セカンドアルバム「Antisocialites」は2017年9月にリリースされました。

「Antisocialites」に収録されており、個人的にAlvvaysの曲の中で一番好きな曲が以下です。
メロディも動画もどこか懐かしさを感じることができます。Alvvays感があって好きです。

Alvvays - Dreams Tonite

おわりに

おすすめのドリームポップバンドであるAlvvaysを紹介しました。

ドリームポップやジャングルポップが好きな人はAlvvaysを気に入ると思うので、この記事が参考になればうれしいです。

aタグのhref属性を理解しよう！hrefの読み方と使い方は？href="#"の意味は？

IT

f:id:marorika:20180308015559j:plain

hrefとは

hrefとはaタグの属性の一つで、いくつかあるaタグの属性の中でも一番重要なものとなります。

hrefでリンク先の場所を指定することができます。

hrefの読み方は？

hrefの読み方は「エイチレフ」。

aタグとセットで用いるので、「アンカータグのエイチレフ」と呼ぶことが多いです。

hrefとは何の略？

hrefはhypertext referenceの略で、直訳すると「ハイパーテキストの参照」となります。

少し脱線しますが、ハイパーテキストとは文字通り「テキストを超えるテキスト」のことで、 通常のテキストの機能を超えたテキストのことをいいます。ハイパーテキストを作成するための代表的な言語がHTMLです。

つまり、「hrefとはハイパーテキスト上で参照機能として用いられる属性である」ということができます。

hrefのリンク先種類と使い方

f:id:marorika:20180308015618j:plain

hrefではリンク先を指定できますが、 リンク先として指定できる種類には以下があります。

  • URL（絶対パス）
  • URL（相対パス）
  • ページ内の特定要素
  • 他プロトコル（メールやFTP）
  • スクリプト

この中でも一番利用されるのはURL（絶対パス）です。

他のものは頻繁には使わないと思うので、まだ知らない人は徐々に覚えていけばいいと思います。

hrefの使い方

hrefのリンク先種類で紹介したリンク先種類の中でも、 URL（絶対パス）、URL（相対パス）、ページ内の特定要素、スクリプト、について使い方を紹介します。

リンク先としてURL（絶対パス）を指定

hrefのリンク先として一番よく使われるのがURL（絶対パス）です。

リンク先ページとしてURLの絶対パスを指定します。

例えば、以下のように指定すると私のブログのトップ画面に遷移できます。

<a href="https://www.marorika.com/">まろりかモンスター</a>

実際にHTML上に埋め込んだものが以下になります。 クリックすると私のブログのトップページに移ります。

まろりかモンスター

リンク先としてURL（相対パス）を指定

次はURL（相対パス）についてです。

絶対パスではリンク先ページの絶対パスを指定しましたが、今回は相対パスを指定します。

絶対パスと相対パスがわからないと理解が難しいかもしれないませんが、 相対パスは現在のページを起点にリンク先ページの場所を指定する形です。

例えば、今見ているこのページのURLは「https://www.marorika.com/entry/href」なので、 トップページをリンク先にする場合は「../..」と指定してあげます。（「..」は1つ上の階層へ戻ることを意味します。）

全体としては以下のように記述します。 絶対パスより短くて簡潔ですが、URLの階層をしっかり理解していないと使えません。

<a href="../..">まろりかモンスター</a>

実際にHTML上に埋め込んだものが以下になります。 クリックすると私のブログのトップページに移ります。

まろりかモンスター

絶対パス、相対パスがよくわからない場合は、以下のページがわかりやすいと思います。

いまさら聞けない絶対パスと相対パス Win/Mac - Qiita

リンク先としてページ内の特定要素を指定

ページ内の特定要素を指定した場合、指定した先にジャンプすることができます。

なお、事前にリンク先要素にidを付与しておく必要がありますが、 今回は「hrefのリンク先種類」の章にidとして「link-dest」を設定しておきました。

記述の仕方はhrefとして「# + 設定したid」を指定します。

<a href="#link-dest">まろりかモンスター</a>

実際にHTML上に埋め込んだものが以下になります。 クリックすると「hrefのリンク先種類」の章にジャンプします。

hrefのリンク先種類

リンク先としてスクリプトを指定

最後にスクリプトの指定についてです。

hrefでスクリプトを指定できることを知っている人は結構少ないのではないかと思いますが、 hrefでJavaScritpを記述できるのです。

例としてクリックすると「Hello」とダイアログがでるケースを紹介します。

HTMLの記述の仕方はhrefとして「javascript: + スクリプト」を指定します。

<a href="javascript:alert('Hello');">「Hello」ってでるよ</a>

実際にHTML上に埋め込んだものが以下になります。 クリックするとJavaScriptにより「Hello」とダイアログが出ます。

「Hello」ってでるよ

href="#"やhref=""、href="#!"の意味とは？

f:id:marorika:20180308015650j:plain

href="#"の意味とは

いろんなWebサイトのHTMLを見ているとたまに見かけるhref="#"。

hrefのリンク先に#しか記載されておらず特定のidが指定されていないように見えますが、 この場合はページのトップに遷移することになります。

<a href="#">ページトップへ移動</a>

デモですが、以下をクリックするとページのトップに移動するはずです。

ページトップへ移動

href=""の意味とは

hrefの指定をカラにすると現在のページに遷移する意味合いになります。
つまり、ページがリロードされます。

<a href="">ページのリロード</a>

デモですが、以下をクリックするとページがリロードされます。

ページのリロード

href="#!"の意味とは

href="#!"も時々見かけますが、意味合いとしてはaタグをクリックしてもどこにも遷移させない場合に指定します。

idとして!を指定することはないだろうという前提のもと、#!と設定するのが慣例となっています。
なので、!のid部分はページ内に存在しないidであれば、実はなんでも良いのです。

<a href="#!">遷移しないリンク</a>

デモですが、以下をクリックしてもどこにも遷移しないはずです。

遷移しないリンク

遷移させないのであればそもそもhrefを設定しなければいいかと思うかもしれませんが、 href属性自体をなくすとaタグがリンクとして機能せず、リンクのスタイルでなくなってしまいます。

<a>hrefなし</a>は以下のように表示されます。

hrefなし

おわりに

aタグの属性であるhrefついて、使い方を中心に紹介しました。

hrefはよく使うので、この機会に理解を深めてもらえたらうれしいです。

はてなブログの記事一覧に「前のページ」ボタンを追加する方法【コピペOK】

はてなブロガー向け

ソースコード

はてなブログの記事一覧には「前のページ」ボタンが無いのはご存知でしょうか？

実際、「前のページ」ボタンがなくても、ブラウザの履歴で前に戻ればいいだけなのでそこまで困りませんが、 感覚的に「次のページ」ボタンがあるのに「前のページ」ボタンがないのは嫌なので、自分でどうにか追加することにしました。

どうにかイイ感じに「前のページ」ボタンを追加することができたので、 今回は、はてなブログへ「前のページ」ボタンを設置する方法について紹介したいと思います。

「前のページ」ボタンの設置方法

設置方法

「前のページ」ボタンの設置方法ですが、これから紹介するソースコードを はてなブログのフッターHTMLに追加してあげればOKです。

はてなブログの「デザイン」 ⇛ 「カスタマイズ」 ⇛ 「フッタ」と進み、 紹介するソースコードを追加すればOKです。

f:id:marorika:20180304184705p:plain

ソースコード

JavaScriptのソースコードを以下に掲載します。

JavaScriptがわからない人でも理解できるように、 適宜ソースコードにコメントを付記しているので確認してみてください。

仕組みについてですが、URLに?page=という文字があったら記事一覧の2ページ目以降と判断して 「前のページ」ボタンを動的に挿入しています。
「前のページ」ボタンをクリックするとブラウザ履歴の一つ前のページに戻る処理を実行するようになっています。

もちろん、コピペして利用して頂いてOKですので是非ご利用くださいね。 

                    
                        File: hatena-pager-prev.html
                        ----------------------------

                        <script type="text/javascript">
                            // 現在のページが記事一覧の2ページ目以降の場合処理実行
                            if (location.search.indexOf("?page=") === 0) {
                                // aタグの作成
                                var a = document.createElement('a');
                                a.addEventListener("click", function(){history.back();}); // クリックすると一つ前の履歴に戻る処理を追加
                                a.innerHTML = "前のページ"
                                a.setAttribute("href", "#"); // hrefがないとスタイルが崩れるので設定（onClickが処理されるよう#を指定）
                                a.setAttribute("rel", "prev"); // seo対策
                                // spanタグの作成（中に作成したaタグを入れる）
                                var span = document.createElement('span');
                                span.classList.add('pager-prev');
                                span.appendChild(a);
                                // classがpagerのdivタグに上記で作成したものを挿入する（classがpager-nextのspanタグよりも前に挿入する）
                                var element = document.getElementsByClassName("pager")[0];
                                element.insertBefore(span, element.firstChild);
                            }
                        </script>

設置イメージ

「前のページ」ボタンの設置イメージを以下に載せました。
（スマホでスクリーンショットしたものを載せます）

f:id:marorika:20180304182641j:plain

なお、自分のブログのデザインに合うように、CSSでデザインをカスタマイズしてあります。

参考までに、関連するCSSを以下に掲載します。 

                    
                        File: hatena-pager.css
                        ----------------------

                        /* Pager */
                        .pager {
                            position: relative;
                            margin: 2em 0;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-pack: justify;
                                -ms-flex-pack: justify;
                                    justify-content: space-between;
                        }

                        .pager a {
                            color: RGB(68, 153, 187);
                        }

                        .pager a:hover {
                            color: RGB(68, 153, 187);
                        }

                        .pager.autopagerize_insert_before .pager-prev {
                            padding: .5em 0;
                            border: 1px solid #ddd;
                            border-radius: 3px;
                        }

                        .pager.autopagerize_insert_before .pager-prev a {
                            padding: .5em 1em .5em 2em;
                        }

                        .pager.autopagerize_insert_before .pager-prev:before {
                            content: "<<";
                            font-weight: 900;
                            position: absolute;
                            left: .5em;
                            top: .5em;
                            color: RGB(68, 153, 187);
                        }

                        .pager.autopagerize_insert_before .pager-next {
                            padding: .5em 0;
                            border: 1px solid #ddd;
                            margin-left: auto;
                            border-radius: 3px;
                        }

                        .pager.autopagerize_insert_before .pager-next a {
                            padding: .5em 2em .5em 1em;
                        }

                        .pager.autopagerize_insert_before .pager-next:after {
                            content: ">>";
                            font-weight: 900;
                            position: absolute;
                            right: .5em;
                            top: .5em;
                            color: RGB(68, 153, 187);
                        }

                        .pager.pager-permalink .pager-prev {
                            margin-right: .25em;
                            padding: .5em;
                            border: 1px solid #ddd;
                            border-radius: 3px;
                        }

                        .pager.pager-permalink .pager-next {
                            margin-left: auto;
                            padding: .5em;
                            border: 1px solid #ddd;
                            border-radius: 3px;
                        }

おわりに

はてなブログの記事一覧に「前のページ」ボタンを設置する方法を紹介しました。

はてなブログの設定として、フッタにJavaScriptを追加するだけなので簡単に設定することが出来ます。

今回紹介したJavaScirptのソースコードは自由にコピペして使って頂きたいので必要な方は是非ご利用くださいね。

【運営報告】雑記ブログ2ヶ月目のPV数と収益など【はてなブログ】

運営報告 ブロガー向け

f:id:marorika:20180304024748j:plain

雑記ブログを始めてから約2ヶ月が経ちました。

感覚としてはまだ2ヶ月しか経ってないのかぁ！って感じです。 長くブログをやっている感覚ですが、まだまだブログを開始してから短いのですねぇ。

他のブロガーさんの運営報告とかを読むのが楽しいので、私も同じように運営報告したいと思います。

他のブロガーさんの運営報告を見ると1ヶ月で1万PVとか、中には10万PVとかの人もいてとってもすごいのですが、 私はそんなことはありません（泣）

低空飛行感が否めませんが、ブログ始めたての人とかに少しでも参考になれたらうれしいです！

マイペースでやるんだぁっ（泣）

2ヶ月目のブログについて

２ヶ月目である2018/2/1 〜 2018/2/28の期間におけるブログについて報告したいと思います。

投稿数

投稿数は19記事でした。1ヶ月目と合わせてトータル40記事となりました。

f:id:marorika:20180304024807p:plain

キリの良い数字かなぁと2月中に20記事書くことを目標に後半は投稿スピードを上げたのですが、最後は力尽きて1記事足りませんでした。

PV数

一番気になるのはPV数かと思います。

2018/2/1 〜 2018/2/28の期間におけるPV数は2,500強でした！

はやく1万PVとかいったらかっこいいのになぁと思いつつ、まだまだ道のりはながそうです。
40記事書いてきた当ブログですが、 最近は記事を書かない日は70前後くらいのPV数なので、計算すると190記事目くらいで月間1万PVになるはずです。。。

ちなみに流入の割合は7割くらいが検索です。

記事毎のアクセス数のかたよりはあまりなく、 たくさんの記事が毎日1〜2PV稼ぐ感じです。 稼ぎ頭みたいな記事がありません（泣）

いい意味で考えるとニッチな需要は満たせてるのかなぁ？（笑）

収益

当ブログにはGoogleアドセンスの広告を貼っています。

Googleアドセンスの審査を通過したのが2月中旬でそこから早速広告を設置してみましたが、 チョコバットがギリギリ買えないくらいの収益という結果でした。

まぁまだまだPV数が少ないですからね（泣）

【2018年2月】Googleアドセンス審査を10時間かからずに通過した話【◯◯がなくても大丈夫だった！】

読まれているTOP3記事

読まれていると言ってもどの記事も日に10PVもいかないのですが。。。
以下の記事が読まれていました。

No.1

Bootstrap 4を導入するための設定方法【2018年最新版】

私はBootstrap 4の記事をよく書くのですが、そのおかげもあってかBootstrap 4の初期設定についての記事がアクセス数No.1でした。

No.2

松屋のチーズタッカルビ定食は女性にはオススメできないと思った話

この記事、No.2なのですが、私が書いた記事の中で一番キライな記事なのです。。。

理由は松屋のチーズタッカルビはいずれ販売されなくなるはずなので、アクセス数が減ることが予想できることです。あと、タイトル的にあまり気持ちのいいものではないからです。

No.3

Chromeの新しいタブで履歴サムネイルを非表示にする方法

No.3はこの記事でした。

No.3といっても日に5PVもいきません！

2ヶ月目で良かった事と良くなかった事

f:id:marorika:20180304024933j:plain

良かった事

他のブログとの交流

1ヶ月目と比べると2ヶ月目は他のブログとの交流が少し増えたのが良かったと思います。

最初は慣れないものでビクビクしてコメントやブックマークできませんでしたが、 最近はちょくちょくコメントしたり、気に入った記事はブックマークしたりするようになりました。最近はちょくちょくコメントしたり、気に入った記事はブックマークしたりするようになりました。

自分がブログをやっていくのにも他の人のブログを見ているとやる気になるので、 いい影響を受けています。

目標の月間10記事は余裕だった

2ヶ月目がスタートする時は10記事くらい書ければいいやと思っていましたが、 考えていたよりもブログを書くのが習慣化されてきて19記事も書くことができました。 なので、3ヶ月目は20記事を目標でやっていこうと思います。

音楽記事を書いた

2ヶ月目にして音楽を題材にした記事を1記事書きました。 PV数はともかく、書いていて楽しかったので良かったです☆
またどこかで音楽記事を書こうと思います。

RihannaにもカバーされたサイケデリックロックバンドのTame Impalaがおしゃれでかっこいい

良くなかった事

ニッチなパソコン関連の記事が多め

私はIT会社に努めていることもあって、どうしてもパソコン関連の記事が書きやすく多くなってしまいました。

需要が多いのならともかく、もっと見てもらえる内容を書いていきたいなと思いました！

ツイッターをあまり利用しなかった

ブログ1ヶ月で書いた記事でツイッターをうまく利用することを目標に掲げていましたが、 あまり利用できませんでしたぁ。

あまり頑張らずに徐々にツイッターに慣れていこうと思います！

3ヶ月目の抱負

月間20記事書く

2ヶ月目と同じくらいのペースで3ヶ月目も記事が書ければなと思います。

もう少しブログのデザインも変えたいので、記事の執筆と並行して作業しようと思います。

例えば、会話形式の吹き出しとか設定できるようにしたいなぁ。

amazonアソシエイトとか楽天アフィリエイトを始める

商品レビューとかまだやったことないので挑戦してみたいなとか思っています。

まずはやり方を調べるところから頑張ろうと思います。

PV数が集まりそうな記事を書く

PV数が増えてほしいなぁと思うので、読まれる記事を書けるようになりたいです。

キーワードリサーチとか挑戦してみましょうかねぇ。

なにはともあれ、とりあえず100記事くらいは早めに到達したいです。

おわりに

雑記ブログとして運営している当ブログの2ヶ月目について書きました。

なんだかんだ、しばらくはブログを続けていけそうな気持ちになっていなので、この調子で引き続き頑張りまーす！

Bootstrap 4で固定ヘッダーと固定フッターを設定する簡単な方法

Bootstrap

たくさんのWebサイトで採用されている固定ヘッダーや固定フッターをBootstrap 4を用いて簡単に実現する方法を紹介します。

固定ヘッダーと固定フッターを設定するにはHTMLやCSS、場合によってはJavaScriptの知識が必要になるので、想像以上に設定が難しいものですが、 Bootstrap 4を利用すればHTMLタグにclassを追加するだけ固定ヘッダーと固定フッターを簡単に設定できます。

Bootstrap 4の利用を前提としているので、まだ準備ができていない人は以下のページを参考にしてください。

www.marorika.com

固定ヘッダー、固定フッターとは

固定ヘッダーとは

固定ヘッダーとは、Webページの上部に固定されているヘッダーのことを言います。 スクロールしても上部に固定され続け、隠れずに残った状態となります。

スティッキーヘッダー(Sticky Header）やスティッキートップ(Sticky Top)とも呼ばれます。

この固定ヘッダーは様々なサイトで採用されており、Webサイトのナビゲーションの役割として設置されるケースが多いです。
Webサイトの主要カテゴリや検索窓、ユーザーページへのリンクなどを設置します。

固定フッターとは

固定フッターとは、Webページの下部に固定されているフッターのことを言います。 スクロールする前から常に下部に表示されている状態となります。

スティッキーフッター(Sticky Footer)やスティッキーボトム(Sticky Bottom)とも呼ばれます。

固定フッターを利用しているWebサイトは固定ヘッダーと比べると少ないですが、 スマホ向けWebページではあえて固定フッターを採用しているサイトもたまに見かけます。 スマホでは画面の下部の方が指が届きやすくクリックしやすいですもんね。

デモサンプル

設定方法の前にまずはサンプル画像を以下に掲載しました。

ボディ部をグレー、ヘッダー部をグリーン、メイン部を水色、フッター部をピンクに色付けしています。

スクロールが上部の場合

固定ヘッダーデモ

初期表示の段階でフッターが下部に固定されているのが分かります。

スクロールが下部の場合

固定フッターデモ

スクロールを下部まで移動してもヘッダーが上部に固定されていることがわかります。
また初期表示にはヘッダーよりも上部に表示されていた「Sticky!」という文言は隠れています。

なお、下部にグレーのボディ部が見えているのは、フッター部の高さ分くらいメイン部をmarginで上げているためです。

サンプルのソースコード

上記のデモサンプルのソースコードは以下となります。

コピペしてhtmlファイルとして保存しブラウザで表示すれば、掲載した画像と同じ形になるはずです。 

                    
                        File: bootstrap-sticky.html
                        ---------------------------

                        <!DOCTYPE html>
                        <html lang="ja">
                        <head>
                        <meta charset="utf-8">
                        <!-- viewport meta -->
                        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                        <!-- Bootstrap CSS -->
                        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
                        <style>
                            body {background-color: lightgray;}
                            header {background-color: palegreen;}
                            main {background-color: lightblue;}
                            footer {background-color: hotpink;}
                        </style>
                        <title>Sticky</title>
                        </head>
                        <body>
                        <p>
                            Sticky！
                        </p>
                        <header class="sticky-top">
                            <div>
                                header
                            </div>
                        </header>
                        <main class="mb-5">
                            <p>
                                S
                            </p>
                            <p>
                                t
                            </p>
                            <p>
                                i
                            </p>
                            <p>
                                c
                            </p>
                            <p>
                                k
                            </p>
                            <p>
                                y
                            </p>
                            <p>
                                !
                            </p>
                        </main>
                        <footer class="fixed-bottom">
                            footer
                        </footer>
                        <!-- jQuery、Popper.js、Bootstrap JS -->
                        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
                        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
                        </body>
                        </html>

Bootstrap 4で固定ヘッダー、固定フッターを設定する方法

固定ヘッダーを実現する方法

Bootstrap 4で固定ヘッダーを実現する方法はとても簡単で、ヘッダー要素に対しclassを一つ指定して上げるだけです。

class="sticky-top"を追加してあげるだけです。

デモサンプルのようにヘッダーよりも上部に要素を追加すれば、初期表示時には表示されるけど下にスクロールしたら隠れるようにすることもできます。 もちろん、固定ヘッダーとして指定した要素はページ上部に固定された状態となります。

デモサンプルではヘッダーよりも上に「Sticky!」と文字を設定しましたが、文字ではなく画像を設定するのもいいと思います。

固定フッターを実現する方法

Bootstrap 4で固定フッターを実現する方法もとても簡単で、フッター要素に対しclassを一つ指定して上げるだけです。

class="fixed-bottom"を追加してあげるだけです。

なお、そのままだと固定フッターの背部にフッター意外の要素が隠れてしまうので、隠れてしまう部分についてはmargin-bottomで底上げしてあげる必要があります。
なおサンプルでは、メイン要素にBootstrap 4のclassであるclass="mb-5"を指定することでmargin-bottomを設定しています。
サンプルでは適当な高さ分だけ底上げしていますが、正しく設定する場合はフッター部の高さ分だけ底上げしてあげれば良いです。

おわりに

Bootstrap 4で固定ヘッダーと固定フッターを簡単に設定する方法について紹介しました。

CSSやJavaScriptでゴリゴリ設定するよりも簡単に設定ができるのでとてもおすすめです。

なお、Bootstrapの公式サイトに今回紹介したclassの説明があるので、気になる方は（英語ですが）見てみてください。

Bootstrap公式サイト
CSSフレームワーク Bootstrap入門
posted with カエレバ
掌田津耶乃 秀和システム 2018-02-22
Amazon
楽天市場
Yahooショッピング

他人のブログに指摘したいのだけど、それをする立場ではないので葛藤している件について

雑記

悩んでるイメージ

ブログを始めた当初は自ら他の人のブログを読むことが少なかったのですが、 最近は他の人のブログを読むことが楽しくなってきてよく読んでいます。

スターを付けてくれたり読者になってくれたことをきっかけにブログを見てみて、楽しめそうなブログがあったらウォッチすることが多いですが。 他の人のブログを読むことによって自分の知らない分野を知ることが出来てとても楽しいです。 もちろん自分と同系統の人のブログを読む時も楽しいです。

また、他人のブログでいいなって思うことはどんどん自分のブログに取り入れることができるので、 ブログを読むメリットを感じています。

他人のブログの改善できそうな点が気になる

いろんなブログをたくさん読んでいるのですが、 ブログを読んでいく中でアドバイスというか改善した方がもっと良くなるのになぁって思うことがよくあります。

だけど、私はブログを初めてまだ2ヶ月たたないくらいであり指摘できる立場でもないので指摘することができずに葛藤しています。

人気ブロガーがアドバイスするのであれば逆にうれしいし納得できるかもしれませんが、ただの初心者に指摘されても嬉しくないよなと。。。

改善できそうな点

f:id:marorika:20180227010539j:plain

改善に向けて指摘したいなって思うことは、例えば以下のような事があります。

  • スマホで見ると記事がグラグラしている（padding設定をミスっている？）
  • ブックマークしようとしたらわかりづらい場所にボタンがある
  • 文字が大きすぎて読みづらい（小さすぎても同様）
  • 全体的にガチャガチャしてて読みづらい（画像の大きさがバラバラとか）
  • リンク切れしている

などなどありますが、こういった点は他者の目が無いとおそらく気づきづらいのでしょう。

自分のブログも他者から見れば改善点がたくさん見つかるでしょうが、 やっぱり客観的に自分のブログを見るのは難しいです。

場合によってはあえてそうしている場合があるので、一概に改善点とはならないところも難しいです。

指摘したい。。。

とにかくモヤモヤが残ることがよくあるのです。
自分はお節介なのかもしれません。

きっと指摘を嫌には思わずにプラスにとらえてくれる人もいるのでしょうが、もちろん嫌に思う人もいるはずです。 その判断がつけば私も指摘できるのですが。。。

指摘しようと考えた

フィードバック

最初はブックマークコメントやコメント欄を利用して指摘しようか考えました。 だけど、ブックマークやコメント欄、ツイッターとかで指摘した場合、第三者にも内容を見られてしまうのでそれはそれで嫌だなと。。。

かといって、ツイッターのダイレクトメールやブログの問い合わせから意見するのも図々しいように感じます。

そんなこんな考えて、とりあえず現状は指摘はできないなと思いました。

今後指摘できるか否か

お互いを認識しあっている関係の人にはいずれ指摘できるかもしれないなとも思っています。

まだブログは2ヶ月しかやっていないけどこの短い期間の中でもスターを付けてくれたりコメントくれたりする人っていて、 そういう人には客観的なブログへの意見も何らかの形でいずれ伝えられたら良いな、とか思っています。

おわりに

他人のブログに指摘したいというお節介な話でした。

今後も時々モヤモヤしながらいろいろとブログを読んでいこうと思います（笑）

はてなブログでnoindexを設定する方法（特定の記事を検索結果に表示させない方法）【コピペOK】

はてなブロガー向け

アイキャッチ

特定の記事を検索結果に表示させない方法は、記事のmetaタグにnoindexを設定すればできます。

今回はそのnoindexの設定方法を、特にはてなブログ向けに紹介します。

noindexについて

noindexとは

noindexとは文字の通りでindexが無い状態のことです。

記事に対してnoidexを設定するとGoogleにindexされなくなります。 indexされない、すなわち検索結果に表示されなくなります。

検索結果に表示させないようにする必要があるのか疑問を持つ人もいるかと思いますが、 noindexを必要に応じて設定する理由は、良質なサイトにするためです。

Googleによるウェブマスター向け公式ブログ では以下の様に記載されています。（抜粋）

  • サイト内に同一または類似のトピックについて、キーワードがわずかに異なるだけの類似の記事や完全に重複する記事が存在しないか？
  • 記事が短い、内容が薄い、または役立つ具体的な内容がない、といったものではないか？

また、以下のようにも述べられています。

低品質なコンテンツがサイトの一部にしか存在しない場合でも、サイト全体の掲載順位に影響を与えることがあるということにご注意ください。低品質なページを削除したり、内容の薄いページをまとめて役に立つコンテンツに改善したり、もしくは低品質なコンテンツを他のドメインに移動させたりすることが、最終的に良質なコンテンツの掲載順位を改善することにつながります。

これらのことから、Googleから良質なサイトと認識してもらうためには、低品質な記事はむやみに検索結果に載せない方が良いことがわかります。
noindexを適切に使えば、より良質なサイトにすることができるのです。

noidexを使うケース

noindexは以下のケースで設定すると良いです。

  • ユーザーにとって価値を提供していない
  • 記事自体は必要だが検索結果には表示させなくてよい

上記に該当する記事やページはどれなのか判断が難しいですが、 いろいろ調べてみると以下が対象になり得ます。

  • 文章が短かく内容が薄い記事
  • サイトマップやカテゴリーページ
  • プライバシーポリシーや問い合わせページ

Googleはnoidexを設定すべき対象を明確にはしていないので、noindexを設定すべきか否かについての明確な答えは今のところありません。

例えば、プライバシーポリシーをnoindexにするか否かについても議論があって、 「必要だけど検索には載せなくて良いからnoindexを設定する派」と 「サイトのプライバシーポリシーを確認する際に検索される可能性があるのでnoindexを設定しない派」で別れています。

このように悩む部分はありますが、基本的に「ユーザーにとって価値がない」または「検索に載せるべきものでない」場合にnoindexの設定を検討します。

なお、noindexでもクローラによる巡回は行われるのでnoindexしたページからのリンクは認識されるようです。
クロールすらさせたくない場合はrobots.txtで制御しましょう。

はてなブログへnoindexを設定する

noindexの設定方法

記事やページをnoindexに設定する方法は簡単で 対象のページのhead要素に以下の1行を追加するだけです。

この1行を追加するだけなのですが、はてなブログでは個別のページ毎にhead要素の内容を編集できないため、 一手間必要となります。

はてなブログにnoidexを設定する方法

はてなブログで特定ページのhead要素を編集するには、JavaScriptを用いて動的に追加してあげれば良いです。

JavaScriptのコード自体は記事中に書くことが出来るので、個別のページ毎に設定が可能となります。

技術的なことに詳しくない人やJavaScriptに馴染みがない人にとっては難しいかもしれませんが、 やることは以下のコードをコピペして記事のどこかに貼り付けるだけです。
（クローラに速く認識してもらうために記事の一番上に貼り付けることをオススメします。） 

                    
                        File: hatena-noindex.html
                        -------------------------

                        <script type="text/javascript">
                            // 追加するmetaタグの作成
                            var newMeta = document.createElement("meta");
                            newMeta.setAttribute("name","robots");
                            newMeta.setAttribute("content","noindex");
                            // 作成したmetaタグをhead要素内末尾に追加
                            document.getElementsByTagName("head")[0].appendChild(newMeta);
                        </script>

掲載したJavaScriptは大きく2部に分かれています。
1部目は追加するmeta要素を作成し、2部目では作成したmeta要素をhead要素内の末尾に追加しています。

なお注意点ですが、はてなブログの「見たまま編集」モードでは利用できません。
紹介したコードはHTMLとして認識してもらう必要があるので、「はてな記法編集」、「Markdown編集」、「HTML編集」モードのいずれかである必要があります。

設定イメージは以下のようになります。

はてなブログの記事へコードを設定するイメージ

おわりに

はてなブログの個別のページにnoindexを設定する方法を紹介しました。

はてなブログではhead要素を個別に編集することができないので、JavaScriptを用いました。
コピペして記事に貼り付けるだけなので、はてなブログでnoindexの設定が必要な人は利用してくださいね。

秋葉原駅周辺にあるルノアールまとめ【店舗までの経路や営業時間】

ルノアール マップ

ルノアールイメージ

秋葉原駅周辺にあるカフェのルノアールについて、店舗までの経路やwifi有無、営業時間などについてまとめます。

秋葉原駅周辺にはルノアールが5店舗あります。結構多いですね。

Cafeルノアール ヨドバシAkiba横店

店舗名 Cafeルノアール ヨドバシAkiba横店
最寄り口 JR秋葉原中央改札口、または、昭和通り口
駅から徒歩 4分
wifi有無 有り
座席数 禁煙：36席
喫煙：32席
営業時間 平日：07:30-23:00
土曜：07:30-23:00
日祝：08:00-23:00
Cafeルノアール ヨドバシAkiba横店

Cafeルノアール 秋葉原昭和通り口店

店舗名 Cafeルノアール 秋葉原昭和通り口店
最寄り口 JR秋葉原昭和通り口
駅から徒歩 3分
wifi有無 有り
座席数 禁煙：37席
喫煙：44席
営業時間 平日：07:30-23:00
土曜：07:30-23:00
日祝：08:00-22:00
Cafeルノアール 秋葉原昭和通り口店

喫茶室ルノアール 秋葉原店

店舗名 喫茶室ルノアール 秋葉原店
最寄り口 JR秋葉原電気街口
駅から徒歩 4分
wifi有無 有り
座席数 禁煙：27席
喫煙：30席
営業時間 平日：08:30-22:00
土曜：08:00-22:00
日祝：08:00-21:00
喫茶室ルノアール 秋葉原店

喫茶室ルノアール 秋葉原電気街口店

店舗名 喫茶室ルノアール 秋葉原電気街口店
最寄り口 JR秋葉原電気街口
駅から徒歩 2分
wifi有無 有り
座席数 禁煙：45席
喫煙：26席
営業時間 全日：07:30-22:00
喫茶室ルノアール 秋葉原電気街口店

喫茶室ルノアール ニュー秋葉原店

店舗名 喫茶室ルノアール ニュー秋葉原店
最寄り口 JR秋葉原電気街口
駅から徒歩 2分
wifi有無 有り
座席数 禁煙：29席
喫煙：35席
営業時間 平日：07:30-22:00
土曜：07:30-22:00
日祝：08:00-21:00
喫茶室ルノアール ニュー秋葉原店

おわりに

秋葉原駅周辺にあるルノアール5店舗を紹介しました。

店舗までの経路や営業時間などを掲載したので、お気に入りの店舗に行ってみてください。

【サマソニ2018】サイケデリックロックバンドのTame Impalaがおしゃれでかっこいい【オーストラリア発】

音楽

Tame Impala

オーストラリア出身のサイケデリックロックバンドのTame Impalaを紹介します。

サイケデリックバンドらしく複雑だけど心地の良い曲が多く、また、どの曲もおしゃれな雰囲気を漂わせています。 Tame ImpalaのボーカルであるKevin Parkerが曲を制作しており、独特な音を織り交ぜた曲が多いです。

サイケデリック系の音楽が好きな人にとってはお気に入りの曲が見つかると思うので是非チェックしてみてください。

Tame Imapalaについて

Tame Impalaはオーストラリアパース出身の5人組サイケデリックロックバンドです。
2007年からボーカルのKevin Parkerを中心に活動を開始し、これまで3つのアルバムをリリースしています。

グラミー賞にノミネートされたり、日本でも有名なRihannaにもカバーされたりと、海外では有名なバンドです。
日本ではあまり有名ではないですが、2013年にはフジロックフェスティバルにも参加しています。

メンバー

Tame Impalaメンバー

Tame Impalaは現在5人で活動しています。
途中メンバーの入れ替わりもありましたが、2013年以降は以下のメンバーで活動しています。

メンバー 役割
Kevin Parker ボーカル、ギター
Jay Watson シンセ、バックボーカル、ギター
Dominic Simper ギター、シンセ
Cam Avery ベース、バックボーカル
Julien Barbagallo ドラム、バックボーカル

余談ですがボーカルであるKevin Parkerは裸足でライブをするスタイルです。

Tame Impalaがリリースしたアルバム

今まで3つのアルバムを出しています。
どのアルバムの様々なメディアから賞を獲得したり高い評価を受けています。

ファーストアルバム：Innerspeaker

Tame Impala - Alter Ego

Tame Impalaのファースト・アルバムであるInnerspeakerは2010年にリリースされました。このアルバムでオーストラリアでは様々な賞を受賞しました。

リリースした以降は、有名なアメリカのサイケデリックポップバンドであるMGMTのツアーのオープニングバンドとしても活躍しました。

セカンドアルバム：Lonerism

Tame Impala - Mind Mischief

Lonerismは2012年にリリースされたTame Impalaのセカンドアルバムです。

WebマガジンのStill in Rockでは、2012年に出たアルバムで中では一番だと評価されたこのアルバム。 Rolling Stone, Triple J, NMEなど様々なメディアでも2012年で一番評価できるアルバムとされました。

アルバムの中に収録されているElephantはアメリカで携帯のBlackberryの広告に使われたりしました。 2014年にはオルタナティブミュージック部門でグラミー賞にもノミネートされています。

上記に掲載したYoutubeのミュージックビデオは再生回数もかなり多いです。

サードアルバム：Currents

Tame Impala - The Less I Know The Better

2015年にCurrentsはTame Impalaのサードアルバムとしてリリースされました。

このアルバムもLonerismと同様に2016年のグラミー賞でアルタナティブミュージック部門にノミネートされました。 また、アルバムに収録されているSame Ol' Mistakesは日本でも有名なRihannaにもカバーされています。

上記に掲載したYoutubeのミュージックビデオに登場する女の子がとてもかわいいのでチェックしてみてください。 再生回数も5千万回を超えていてすごいですね。

おわりに

おすすめのサイケデリックロックバンドであるTame Impalaを紹介しました。

おしゃれで心地の良い楽曲が多いのでとてもおすすめのバンドです。 皆さんにも是非チェックしていもらいたいです。

次にリリースされる楽曲が待ち遠しいです。。。

最後にRihannaがカバーした曲を掲載します。

Rihanna - Same Ol' Mistakes

プライバシーポリシー | お問い合わせ