2018-08-15

はてなブログでLINE風の会話形式の吹き出しを使ってみた！

ブログ

どうも、ヨリミチです。
今回はLINE風の吹き出しに挑戦してみました。
皆さんもぜひ楽しいんでやってみてください。

参考サイト

基本はこちらのコードをいじっただけです。 www.notitle-weblog.com

www.tawashix.com

バックアップ

CSSの知識ゼロで直感でいじったのでブログのバックアップ必須です。

サブブログが余っているなら新規に作ってそこで試すのもいいよ

CSSコード

一番下の「クラス名」「画像のURL」は書き換えて、デザインCSSにコピペ

/* LINE風吹き出し　*/
.entry-content .me-line,
.entry-content .you-line {
    position: relative;
    width: 80%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 12px;
    border-radius: 16px;
    z-index: 1;
}
.entry-content .me-line {
    background-color: #abf18c;
    margin: 20px 20% 40px 0;
}
.entry-content .you-line {
    border: 2px solid #999;
    background-color: #fff;
    margin: 20px 0 40px 19%;
}
.entry-content .me-line::before,
.entry-content .you-line::before {
    position: absolute;
    content: "";
    top: 16px;
    width: 10px;
    height: 10px;
    z-index: 2;
}
.entry-content .me-line::before {
    border-right: 2px solid #abf18c;
    border-bottom: 2px solid #abf18c;
    background-color: #abf18c;
    right: -7px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.entry-content .you-line::before {
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    background-color: #fff;
    left: -7px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.entry-content .me-line::after,
.entry-content .you-line::after {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    top: -10px;
    border-radius: 40px;
    border: 3px solid #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.entry-content .me-line::after {
    right: -110px;
}
.entry-content .you-line::after {
    left: -110px;
}
@media screen and (max-width: 620px) {
    .entry-content .me-line,
    .entry-content .you-line {
        width: 70%
    }
    .entry-content .me-line {
        margin-right: 30%;
    }
    .entry-content .you-line {
        margin-left: 30%;
    }
}
@media screen and (max-width: 478px) {
    .entry-content .me-line::after,
    .entry-content .you-line::after {
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
    .entry-content .me-line::after {
        right: -84px;
    }
    .entry-content .you-line::after {
        left: -84px;
    }
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

例

.kumatan::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/W/WalkingYorimichi/20180815/20180815100720.jpg
);}
.kumami::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/W/WalkingYorimichi/20180815/20180815100727.jpg
);}

LILNE風に会話してみる

記事の編集モードは「Markdown」でした方が楽です。

<p class="me-line kumatan">どう？</p>
<p class ="you-line kumami">なにこれ？</p>

どう？

なにこれ？

吹き出しだよ

やるやん

以上です。

2018-08-14

はてなブログのスターはめっちゃ便利だった！

ブログ

どうも、ヨリミチです。

はてなスターってご存知ですか？

この記事では、スターの説明と便利な活用法について書きたいと思います。

はてなスターって何？

記事の下の方にあるこういうやつです

f:id:WalkingYorimichi:20180814193553j:plain:w200

読んでくれたんだ！ってことがわかるのでとてもうれしんです。
PVの情報だけだとなんだか味気ないですもんね。

これ3つ付けてくれている人がいるんですが、

バグだと思っていました(笑)

もしくは、プロの人や複数サブアカウントを持っている人が、ワンクリックすると３つになっちゃう仕様だと思っていました。今日まで(笑)

調べてみると、いくつでもスターをつけられる仕様のようです(笑)

はてなスターの３つに意味がある？

３つつけると最後まで読みました！
１つだと、もうちょっとがんばれ！

みたいなのが慣習として一部にはあるようです。
ぼくは全然気にしませんが、今日まで知らなかったですし。

ちなみに、このスター、自分の記事にもつけられます(笑)
1個でも3個でも100個でも(笑)
でも運営からスパムと判断されてBANされるかもしれないので、やらないほうがいいです(笑)。むなしいだけですしね。
読者登録も同じくできますが、常識の範囲内で、一つだけするにはいいらしい。

はてなスターがもえらえることの利点は?

もらえたらうれしい、もらったひとが自分のブログに訪問してくれてもうれしい。
でもスターがいくら多くても、はてなのトップページに載せてもらえるわけじゃありません。あくまで、はてブ（はてなブックマーク）基準なんです。
僕はまだはてブ活用できていないので、ほとんどしていません(笑)。

f:id:WalkingYorimichi:20180814201201j:plain
はてなブックマーク画面

これ見づらいんですよね。なので普通にブラウザの機能でお気に入り登録していて、存在すら忘れていました(笑)

でも、こういうことってありませんか？

スマホで見たあの記事、PCで見たいから、また検索…

はてブのアプリがあるので、PCではてブした記事をスマホでみたり、その逆ができたりするので、うまく使えばとても便利。

この画面を使わないにしても、参考になった、みんなにみてほしい！ってときにはてブしたほうがよかったなと思った。

はてなスターのデメリットは？

スターがなくてちょっと寂しいぐらいです(笑)

はてなスターの便利機能

まずはこちらのページにアクセスして見てください。

http://s.hatena.ne.jp/[はてなID]/stars

[はてなID]はあなたのIDです。
IDに大文字が入っている人は大文字で書いてください。

するとこんな画面が表示されます。

はてなスターユーザーページのスター履歴
f:id:WalkingYorimichi:20180814223014j:plain

はてなスターユーザーページの☆レポート
f:id:WalkingYorimichi:20180814223043j:plain

これめちゃくちゃ見やすいんだけど(笑)(笑)

自分がはてなスターしたページが時系列で日付事に並べられているし、相手の名前もわかりやすく表示されているし、はてブの画面より見やすいんだけど(笑)

なぜはてブ画面はあーなった？

☆レポートに関しては、スターが貰えたページが日付ごとに並べられている。

ブラウザのお気に入りだと、ジャンルで分けられるけど、日付では分けられない（そういうプラグインもあるかもしれないが）ので、

タイトル忘れたけど、〇〇さんのあの記事どれだったかな？
一昨日スターした記事どれだっけ？
今日はどれぐらいスターしたのかなー？

ってなときに使えそう。

さらに、これを活用すれば、〇月に参考にしたブログを紹介みたいなこともできる。

右のスターフレンドを見てほしい。
これは相互にスターした場合に表示される。
3か月互いにスターをしないと消えてしまう。
自分がよく行く人のページを見るときに便利。

まとめ

はてなスターは純粋にその人の成果物に対する評価。

はてブはそれを他者と共有したいときに使う。

読者登録は人物やブログ自体がお気に入りのときに使う。

しかし、読者登録は1回きり。

これでは記事を書いても、読者が見てくれているのかどうかがわからない。

そこで、はてなスターで既読しました報告。

既読…

あれ、これLINEみたいに自動でいいんじゃないの？(笑)

って、思ったけど、仲のいい人ならともかく、そうじゃない人に毎回既読されて、「きんもー☆」って思われる可能性も出てくる(笑)
まあでも、公開している時点で、見るなというのもおかしいわけで、じゃあ、記事ごとに公開範囲を決められるようにすればいいんじゃないかなと思ったり、読者登録もカテゴリーごとに登録できれば、知りたい情報だけ通知されていいのになと思う。はてなブログはもっと進化できる伸びしろがあるんじゃないかなと思った。

それにしても、はてなスターのユーザーページの機能を利用しているひとはいるのかな？
いや、使ってて当たり前なのかな？
僕は便利なのでこれからは使おうと思いました。

最後まで見てくれたかもしれない人にありがとう！

2018-08-13

はてなブログでamazonアソシエイトの審査通過までにやったこと

ブログ

こんばんは、ヨリミチです。

2018年8月12日に審査通過のメールをもらえました！うれしい！
落ちるかもとビクビクしていたのですが無事承認を頂けてよかったです。
この記事では審査までしたことを書いていこうと思います。

まず、素朴な疑問から
amazonアソシエイトについて
承認されたらすること
- Amazonアソシエイトの規約
- アソシエイト・セントラル・ホームをお気に入りに
はてなブログでの設定
審査までにやったこと
まとめ

まず、素朴な疑問から

ブログ歴は？

2018年6月7日に開設なので2か月ぐらいです。

どのブログで登録したの？

このブログです。
2018年8月12日時点で18記事。
承認されて浮かれた勢いではてなProにしたんですが、登録当時は無料はてなです。

なぜ登録しようと思ったの？

8月に入ってから急にPV(アクセス数)が増えたからです。
ブログ開設1か月目の6月は全然PVがでなくて、7月は地震や台風や多忙で放置状態にしてたわけですが、何もしていないのに急にPVが増えたのでちょっとやる気が出てきました。いや、欲が出ました(笑)

amazonアソシエイトについて

amazonが提供する成果報酬型のアフィリエイト・プログラムです。 成果報酬型とは、広告をブログに張って、読者にクリックしてもらい、その商品が購入された時点で報酬が支払われます。ちなみに、Googleアドセンスはクリック報酬型で、広告をクリックしてもらうだけで報酬がもらえます。

amazonのアカウント取得はフリーメールでもいけるの？

フリーメールだと審査が通りにくいという話もありますが、僕はフリーメールでしました。商品はいくつか購入しましたが、プライム会員ではないです。

登録料は？

無料です。

どこで登録できるの？

Amazonアソシエイト（アフィリエイト）プログラムに参加しよう！

登録する方法は？

上記のサイトで「無料アカウントを作成する」をクリック
名前や住所を正確に書く
ウェブサイト情報の入力で申請するサイトのトップページを入力。
サイトの種類を選択(適当で)
紹介する商品の種類(これも適当で)
アカウント認証で電話番号を入力
電話がかかってきますが、機械音声なので安心してください。
お支払情報はすぐに入力しました。

報酬(紹介料)の支払い方法は？

Amazonギフト券
紹介料が￥500になったら支払われます。
手数料無料
銀行振込
紹介料が￥5000になったら支払われます。
なんと振込手数料は無料！
以前は￥300かかっていました。

その月の紹介料が上記の条件に満たなかった場合でも、翌月に繰り越されますので安心してください。

審査期間は？

2018年8月11日の夜に申請して、よく12日の昼に承認メールが来ました。 12日が日曜だから月曜以降かなと思っていたんですがいけました。お盆なので審査まで時間がかかると思ったんですが関係なかったですね(笑) 人によっては数時間で承認がもらえたり、何日もかかかる場合があるようです。

承認されたらすること

特に規約の部分は重要です。

Amazonアソシエイトの規約

以下の文言をサイトのどこかに明記しなければなりません。規約に反するとBANの可能性もあるそうです。僕はaboutページに記載しました。

[サイト名]は、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。

アソシエイト・セントラル・ホームをお気に入りに

アソシエイト・セントラル - ホーム

ここでクリック数の確認や、商品リンクを作成などをします。頻繁にアクセスすることになるのでお気に入りにしておきましょう。

はてなブログでの設定

はてなブログにamazonアソシエイトIDを登録

はてなブログのアカウント設定＞AmazonアソシエイトIDで変更するをクリックしてIDをコピペ。
これで商品リンクを張ると報酬が得られることになります。

はてなブログの機能で商品リンクを張るには？

記事編集画面から貼り付け

f:id:WalkingYorimichi:20180813082751j:plain

もし無い場合は+ボタンから追加

詳細
はてなブログ Perfect GuideBook
- 作者: JOE AOTO
- 出版社/メーカー: ソーテック社
- 発売日: 2016/07/22
- メディア: 単行本
- この商品を含むブログ (3件) を見る
画像
商品名
はてなブログ Perfect GuideBook

Amazonで商品リンクを作成して張るには？

紹介したい商品を普通にアマゾンで検索します。商品ページの一番上にAmazonアソシエイトツールバーがあるので、そこでリンクを作成できます。

審査までにやったこと

Amazonの商品の紹介をしました。

www.yorimichiblog.com

これAmazonの商品のリンクを張ること自体は、アソシエイトが承認されていなくてもできます。もちろん、報酬はないですが。一番効果があったのはこれじゃないかなと思います。
商品を売りたいという心意気を買ってくれたのかな。

書いた記事は一つだけだけど(笑)
しかも楽天の広告張ってた。

とある日記サイトは15記事ほどあり、アドセンスは通過したけど、Amazonは落とされたそうです。
サイトを見てみると、商品の紹介が一つもありませんでした。

審査を通過するには商品紹介をしているかが重要なんじゃないでしょうか。

なお、承認されたら、承認前のAmazon商品のリンクは再度張りなおしてください。
承認前はamazonアソシエイトID無し、つまり無名のリンクなので報酬は発生しません。
承認後は張っていたリンクを削除してから、同じようにAmazon商品のリンクを張るとID付きのURLになり、報酬を得られます。

これだけだと不安なので、審査直前にやったのは以下

ブログデザインの変更

ブログのテーマを「Minimalism」に変更にして見出しなどのデザインを変更しました。

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳

編集画面＞デザイン＞デザインテーマのインストール

グローバルナビゲーションの設置

このサイトでいうと、サイト上部のHOME,about,Contactの部分です。

デザイン→PC→ヘッダ→タイトル下に以下のコードを追加 URLのところは書き換えてください。

<nav id="gnav">
    <div class="gnav-inner" id="menu-scroll">
    <div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
    <div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
    <div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
    </div>
</nav>

アイコンは他にも沢山あります
Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた

楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO

コンタクトフォームの追加

Googleフォームで「お問い合わせフォーム」を作成する方法 - 思考は現実化する

Amazonアソシエイト対策というより、Googleアドセンス対策で入れました。

パンくずリストの追加

Home>ブログ>はてなブロガが編集画面＞デザイン＞カスタマイズ＞記事＞パンくずリストにチェック

まとめ

Amazonのアカウントで商品を購入する
Amazon商品を紹介する
ブログの見栄えを変える

何をすれば審査を通過できるかはAmazonの中の人にしかわからないですが、本記事で気になったところを試してみるといいかもしれません。

審査を通過する目的を通じて、ブログのカスタマイズ方法などを学習できたので良かったです。

ある一定のラインをクリアできたことで自信にもつながりました。

次はGoogleアドセンスなんだけど…
これは難関のようですね。独自ドメインにもしないといけないし、とりあえず、はてなProの無料期間を試してから考えようかな。

気づいたら4000文字超えてた...

最後まで読んで頂きありがとうございます！

2018-08-10

【Netflix】ドント・ブリーズ 2018年8月22日配信開始！【ホラー映画】

洋画

f:id:WalkingYorimichi:20180810034320j:plain

2018年8月22日に「ドント・ブリーズ」がようやくNetflixで配信されます！

これ友人に勧められてDVDで見たんだけどめちゃくちゃおもしろかった！

まだ見ていない人のためにネタバレしないように紹介しますので安心して読んでください。

ドント・ブリーズ [AmazonDVDコレクション] [Blu-ray]

出版社/メーカー: ソニー・ピクチャーズエンタテインメント
発売日: 2017/10/04
メディア: Blu-ray
この商品を含むブログ (4件) を見る

ドント・ブリーズとは

知る人ぞ知るサスペンスホラー映画

2016年公開の映画で、原題は「Don't Breathe」で「息をするな！」って意味です。

あらすじ

盲目のおじいちゃんの家に若者3人が泥棒に入るお話です。

若者たちが偵察に行くと、杖をついたおじいちゃんがヨタヨタと道を歩いているのを発見します。

きっと一人暮らしで気の優しいおじいちゃんなんだろうなぁ…

おじいちゃん↓

f:id:WalkingYorimichi:20180810014810j:plain

違いました(笑)

見ての通りムキムキマッチョでイカツイです(笑)

それもそのはず、元軍人という設定なんです。

「盲目で元軍人のおじいちゃん」

もうこの設定だけでおもしろいのは確実ですね(笑)

普通に考えたら、盲目の老人ｖｓ若者3人だと結果は明らかなわけですが、映画なのでそうはいきません(笑)

盲目の設定なので完全に目は見えませんが、耳はすごくいいんです。

息すらしちゃダメなんです！

映画で海に潜っているシーンを見ると、思わず自分も一緒に息を止めてしまったりしませんか？

この映画もそれと同じで、息を止めて見入ってしまいます(笑)

※息の止めすぎに注意！

まとめ

「ドント・ブリーズ」には盲目という設定をいかしたスリルなシーンがたくさんありますので、皆さんの期待は裏切りません。

どうなるかは見てのお楽しみ！！

まだ見てない人、見たことあるけどもう一度見たい人は是非Netflixで見てください。

この映画の予告動画↓

映画『ドント・ブリーズ』予告

ドント・ブリーズ [AmazonDVDコレクション] [Blu-ray]

出版社/メーカー: ソニー・ピクチャーズエンタテインメント
発売日: 2017/10/04
メディア: Blu-ray
この商品を含むブログ (4件) を見る

Netflixとは

Netflix

全動画を無料で見れる動画配信サイトです。

DTVやAmazonプライムビデオと違って、すべて無料です。

一部有料とかでがっかりすることはありません。

全部無料見放題なので子供が勝手に有料映画を見てしまうということもありませんので、家族でも安心して見れると思います。

ベーシック	スタンダード	プレミアム
650円	950円	1450円
SD画質(DVD相当)	HD画質(Blu-ray相当)	4k画質(対応作品のみ)
同時視聴1台	同時視聴2台	同時視聴4台