はてなブログの読者登録ボタンの設置やカスタマイズ

「読者になる」ボタンが見つからないブログってたまにないですか？

どっかにボタンがあるんでしょうけど、中々見つからないことがあります。

 これです↓↓

実は読者登録ボタンは増やしたり好きなところに設置することができます。今回は、読者登録ボタンの増設の仕方について説明していきます。

記事後半ではオリジナルの読者登録ボタンの作り方も紹介します。

読者登録ボタンを増やしてみよう

以下の手順で「読者になる」ボタンのコードが入手できます。

ダッシュボード→設定→詳細設定に進みます

詳細設定の下の方にある「読者になるボタン」のコードをコピーしてください。

これを、記事の中に挿入すれば記事中に読者登録ボタンを設置することができます。HTML編集で貼り付けてくださいね。

記事中だけでなく、

ダッシュボード→デザイン→カスタマイズ→記事→記事上下カスタマイズ

で、記事の上下に表示させることもできます。記事上下のカスタマイズをしておけば、記事を書くたびにボタンを設置する手間が省けます。

読者になるページへ飛ぶリンクを貼る方法

もう一つ方法があって、「読者になる」ページにリンクを貼る方法。以下のリンクは「読者になる」ページのURLです。クリックしてみると、「読者になる」ページに飛びます。

https://blog.hatena.ne.jp/shiromatakumi/shiromatakumi.hatenablog.com/subscribe

https://blog.hatena.ne.jp/あなたのID/ブログのURL/subscribe

上記が「読者になる」ページのURLです。このリンクに飛ぶようにコードを書けば、簡単に「読者になる」ボタンを作ることができます。

試しにこのような読者登録ボタンを作ってみました。

読者になる

この「読者になる」ボタンは、マウスがのるとボタンが凹むようになってます。

ソースコード

一応ソースコードのせます。

まず、以下のHTMLコードを記事下や記事上あたりにコピペしてください。

※もしここにコードが表示されてない場合は、ページを再度読み込んでください。

まずはHTML。こっちは単純にdiv要素のなかにa要素でリンクを貼っているだけです。ブログのURLは、「http://」以降のURLです。

次に、カスタムCSSに以下のコードをコピペしてください。 

※もしここにコードが表示されてない場合は、ページを再度読み込んでください。

CSSの方は少し工夫してます。マウスを載せると、少し位置が変わってボタンが押されているような動きにしました。

box-shadowで立体感を出しています。

↓↓このカラーコードを参考に、自分の好きな色に変えてみて下さい。

www.color-sample.com

せっかく読者登録しようと思ったのに、ボタンが見当たらないので諦めてしまう人もいるかもしれません。

この機会損失はとてももったいない。しっかり目立つようにボタンを設置してみましょう。

はてなブログのデザインテーマ「Silence」を公開しました

みなさま、お久しぶりでございます。

久々に、はてなブログのデザインテーマを作成しました。

デザインテーマ「Silence」

テーマの名前は「Silence」

blog.hatena.ne.jp

現在、このブログでも「Silence」を使っています。

デモ用のサイトもあります。

theme-silence.hateblo.jp

カスタマイズが楽チン

以下の画像のようなシェアボタン、フォローボタンを簡単に設置することができます。

他にも、

テキストテキスト

テキストテキスト

テキストテキスト

テキストテキスト

こんなカスタマイズも標準搭載しています。

それ以外にも色々カスタマイズできます。

カスタマイズの仕方は以下の記事に書いているので、そちらをご覧ください。

theme-silence.hateblo.jp

theme-silence.hateblo.jp

theme-silence.hateblo.jp

theme-silence.hateblo.jp

theme-silence.hateblo.jp

使用上の注意事項

テーマに関する注意事項は以下の記事にまとめています。

theme-silence.hateblo.jp

もし不具合などあれば、お手数ですがコメント欄にてご報告いただけると助かります。

不具合以外については回答いたしかねるので、ご了承下さい。

「NO TITLE」はWordPressに移行しました

「NO TITLE」はWordPressに移行しました。

 実際は、2018年の10月くらいには移行してました。

www.notitle-weblog.com

こちらの跡地は、「No Name」というブログ名に変更しました。

YouTubeを埋め込んでも重くならないようにする軽量化する方法【新バージョン】

以前紹介したYouTubeを埋め込んでも重くならないようにする方法の新しいバージョンです。

記事後半にははてなブログで使う方法も紹介しています。

YouTubeを埋め込んでも重くならないようにする方法

動画が埋め込まれているように見えますが、画像が表示されている状態です。

この画像がクリックされることで動画が埋め込まれます。

<div class="youtube-wrap">
  <div class="youtube" data-video="https://www.youtube.com/embed/動画ID?autoplay=1">
    <img src="https://img.youtube.com/vi/動画ID/hqdefault.jpg" alt="動画のタイトルなど">
  </div>
</div>

HTMLはこんな感じです。

動画IDというのはURLの「V=」の後の文字列です（画像）。

お次はCSS。

.youtube-wrap {
  padding: 30px 0;
  text-align: center;
  background-color: #000;
  margin-bottom: 6px;
}
.youtube {
  vertical-align: bottom;
  margin-bottom: 0;
  display: inline-block;
  position: relative;
  width: 480px;
  height: 270px;
  overflow: hidden;
}
.youtube:before, .youtube:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
}
.youtube:before {
  width: 64px;
  height: 44px;
  background-color: #cc181e;
  margin: -22px 0 0 -32px;
  border-radius: 12px;
  z-index: 2;
  opacity: .9;
  transition: all .3s;
}
.youtube:after {
  margin: -10px 0 0 -8px;
  border: solid 10px transparent;
  border-right: solid 18px transparent;
  border-left: solid 18px #fff;
  z-index: 3;
}
.youtube img {
  position: relative;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  vertical-align: bottom;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  cursor: pointer;
}
@media screen and (max-width: 560px){
  .youtube-wrap {
    padding: 0;
    background-color: transparent;
  }
  .youtube:before {
    border-radius: 10px;
    width: 50px;
    height: 36px;
    margin-left: -28px;
    margin-top: -18px;
  }
  .youtube:after {
    margin-top: -8px;
    margin-left: -10px;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-right: solid 16px transparent;
    border-left: solid 16px #fff;
  }
}
@media screen and (max-width: 488px){
  .youtube {
    width: 100%;
    max-width: 480px;
    height: 56.25%;
  }
  .youtube img {
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
  }
}

ちょっと複雑ですが、YouTubeの再生ボタンのように装飾しています。

以下はJavaScript。

function embedYouTube(){
  var youtube = document.getElementsByClassName('youtube');
  for(var i=0;i<youtube.length;i++){
    youtube[i].addEventListener('click',function(){
      video = '<iframe src="'+ this.getAttribute('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
      this.outerHTML = video;
    });
  }
}
embedYouTube();

画像をクリックするとiframeが埋め込まれるように処理をしています。

はてなブログで使うには

はてなブログでYouTube動画の埋め込みを使う時は、記事内に以下の動画IDとalt属性を書き換えて挿入してください。

<div class="youtube-wrap"><div class="youtube" data-video="https://www.youtube.com/embed/動画ID?autoplay=1"><img src="https://img.youtube.com/vi/動画ID/hqdefault.jpg" alt="動画のタイトルなど"></div></div>

以下のCSSを「デザイン」→「カスタマイズ」→「デザインCSS」に追加してください。

.youtube-wrap {
  padding: 30px 0;
  text-align: center;
  background-color: #000;
  margin-bottom: 6px;
}
.youtube {
  vertical-align: bottom;
  margin-bottom: 0;
  display: inline-block;
  position: relative;
  width: 480px;
  height: 270px;
  overflow: hidden;
}
.youtube:before, .youtube:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
}
.youtube:before {
  width: 64px;
  height: 44px;
  background-color: #cc181e;
  margin: -22px 0 0 -32px;
  border-radius: 12px;
  z-index: 2;
  opacity: .9;
  transition: all .3s;
}
.youtube:after {
  margin: -10px 0 0 -8px;
  border: solid 10px transparent;
  border-right: solid 18px transparent;
  border-left: solid 18px #fff;
  z-index: 3;
}
.youtube img {
  position: relative;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  vertical-align: bottom;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  cursor: pointer;
}

レスポンシブにしていない人は、スマホにも対応されるために「デザイン」→「スマートフォン」→「ヘッダ」に以下を追加してください。

<style>
.youtube-wrap {
  padding: 30px 0;
  text-align: center;
  background-color: #000;
  margin-bottom: 6px;
}
.youtube {
  vertical-align: bottom;
  margin-bottom: 0;
  display: inline-block;
  position: relative;
  width: 480px;
  height: 270px;
  overflow: hidden;
}
.youtube:before, .youtube:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
}
.youtube:before {
  width: 64px;
  height: 44px;
  background-color: #cc181e;
  margin: -22px 0 0 -32px;
  border-radius: 12px;
  z-index: 2;
  opacity: .9;
  transition: all .3s;
}
.youtube:after {
  margin: -10px 0 0 -8px;
  border: solid 10px transparent;
  border-right: solid 18px transparent;
  border-left: solid 18px #fff;
  z-index: 3;
}
.youtube img {
  position: relative;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  vertical-align: bottom;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  cursor: pointer;
}
@media screen and (max-width: 560px){
  .youtube-wrap {
    padding: 0;
    background-color: transparent;
  }
  .youtube:before {
    border-radius: 10px;
    width: 50px;
    height: 36px;
    margin-left: -28px;
    margin-top: -18px;
  }
  .youtube:after {
    margin-top: -8px;
    margin-left: -10px;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-right: solid 16px transparent;
    border-left: solid 16px #fff;
  }
}
@media screen and (max-width: 488px){
  .youtube {
    width: 100%;
    max-width: 480px;
    height: 56.25%;
  }
  .youtube img {
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
  }
}
</style>

これをコピペしてください。

そして、以下を「デザイン」→「カスタマイズ」→「フッタ」にコピペしてください。

<script>
function embedYouTube(){
  var youtube = document.getElementsByClassName('youtube');
  for(var i=0;i<youtube.length;i++){
    youtube[i].addEventListener('click',function(){
      video = '<iframe src="'+ this.getAttribute('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
      this.outerHTML = video;
    });
  }
}
embedYouTube();
</script>

レスポンシブにしていない人は、「デザイン」→「スマートフォン」→「フッタ」にも同じコードを追加してください。]

以上です。

• はてなブログの読者登録ボタンの設置やカスタマイズ - No Name
• はてなブログのデザインテーマ「Silence」を公開しました - No Name