読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

はてなブログの画像クリックポップアップ表示をCSS一行で解除する方法

はてなブログ

はてなフォトライフからはてなブログに画像を挿入しますと、クリックでポップアップ表示となります。記事内の画像を小さく表示する場合は便利といえば便利なんですが、クリックしてもほとんど同じ程度では意味がありません。



ポップアップ表示を CSS 一行で削除する

そこで、ポップアップ表示を CSS 一行で削除する方法です。

管理画面 > デザイン > カスタマイズ > デザインCSS に次の CSS を追加します。

f:id:ausnichts:20170110200519p:plain


追加CSS

img.hatena-fotolife { pointer-events: none; }


対応ブラウザは、Can I use... Support tables for HTML5, CSS3, etc ですので問題ないと思います。


ポップアップの仕組み

はてなブログのソースではどうなっているかといいますと、編集モードで若干異なっていますが、画像を挿入しますと、次の HTML が挿入されます。

<img class="hatena-fotolife" title="f:id:ausnichts:20161230140751p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/ausnichts/20161230/20161230140751.png" alt="f:id:ausnichts:20161230140751p:plain" />


このclass="hatena-fotolifeに javascript でクリックイベントが設定されており、クリックしますと、Colorbox で元画像がポップアップするようになっています。

そのクリックイベントを解除すればポップアップしなくなるということです。


フォトライフ画像のアドレス

ところで、はてなフォトライフの画像のアドレスを取得するのって結構面倒じゃないですか? 皆さん、どうやって取得しているんでしょう?

私は、フォトライフから選択する場合は、個別画像を右クリックして「画像アドレスをコピー」していますが、他にいい方法があるのでしょうか?

フィッシング詐欺注意!2016 年年次訪問者調査 (Obu) Chrome: ユーザー調査

Web Tips

このサイトに書いているつもりが別サイトでしたので転載です。

@半径とことこ60分



こんなサイトに誘導されました。フィッシング詐欺ですね。 

f:id:ausnichts:20161230140751p:plain

 

いかにも胡散臭いアドレスです。

http://0tpzz.exclusiverewards.unship.xyz/

ググってみますと1年ほど前から出回っているようです。

 

アンケートに答えていきますと、

f:id:ausnichts:20161230145036p:plain

と、お礼を差し上げますのでここをクリックとなります。

クリックしてみましたが、IPアドレスを隠してアクセスしているせいかタイムアウトになってしまいました。個人情報を入力する画面になるらしいです。

 

見知らぬ拡張機能も入っていないようですし、マルウェアでもなさそうですので、閉じてしまえば問題ないようです。

 

はてなブログのトップページを固定して企業サイト風にする方法

はてなブログ

はてなブログはブログなんですから、トップページは記事を複数個掲載する仕様になっています。ただ、いろいろカスタマイズに手を出しますと、固定ページに出来ないかと思い始めます。その方法です。



予約投稿でトップページをつくる

f:id:ausnichts:20161228114442j:plain

記事作成ページで編集オプションを選び、投稿日時を未来、9999-12-31 23:59 に設定します。日時は10年後でも20年後でも、そんな先のこと考えられん!日付であれば問題ありません。

カスタムURLを home にしているのは、後々利用するために分かりやすくしています。記憶しておけばデフォルトのままでも問題ありません。

当然ですが、トップページの記事数は「1」にしなくてはいけません。

ところで、この編集ページのプレビューでは日付が実際の投稿日時になるんですね。公開ページでは下図のように予約投稿日時になっています。

f:id:ausnichts:20161228115133j:plain

サンプルでは写真を一枚入れているだけですが、このページがトップページになります。ただ、このままでは日付やタイトルなど邪魔なものが表示されますのでそれを css で消していきます。


日付など不要なものを消す

次の CSS のうち、消したい要素にdisplay:none;を指定して、デザイン > カスタマイズ > デザインCSSに入れます。

/* ヘッダー全て、日付、タイトル、カテゴリ、編集リンク */
.entry-header {
  display: none;
}

/* 日付のみ
.entry-date {
  display: none;
} */

/* タイトルのみ
.entry-title {
  display: none;
} */

/* カテゴリのみ
.entry-categories {
  display: none;
} */

/* フッター全て、ユーザIDなど、ソーシャルボタン、コメント */
.entry-footer {
  display: none;
}

/* ユーザIDなど
.entry-footer-section {
  display: none;
} */

/* ソーシャルボタン
.social-buttons {
  display: none;
} */

/* コメント
.comment-box {
  display: none;
} */

/* ページャー */
.pager {
  display: none;
}

f:id:ausnichts:20161228120919j:plain

ヘッダー、フッター、ページャーをすべて消しますとこうなります。ただ、これでは次の画像のように他の記事ページの日付やタイトルも消えてしまいます。

f:id:ausnichts:20161228121117j:plain


トップページのみに CSS を反映させる

はてなブログでは、表示するページが、トップページか記事ページかカテゴリーページかなどをbodyにクラス名を付加することで指示しています。トップページの場合は、page-indexが付加されます。ですので、次のように css を変更すれば、トップページのヘッダーやフッターを消すことが出来ます。

.page-index .entry-header {
    display: none;
}

.page-index .entry-footer {
    display: none;
}

.page-index .pager {
    display: none;
}

f:id:ausnichts:20161228154811j:plain

記事ページにヘッダーやフッターが戻りました。画像は省略ですが、トップページには表示されていません。

ただ、上の画像を見ますと、最新記事や月間アーカイブにトップページ(HOME)が表示されてしまっています。


最新記事、アーカイブからトップページを消す

これは次の css で消えます。

/* 最新記事の一番目の要素を消す */
.recent-entries-item:first-child {
    display: none;
}

/* 月間アーカイブから一番目の要素を消す */
.archive-module-year:first-child {
    display: none;
}
/* またはこちら */
.archive-module-year[data-year="9999"] {
    display: none;
}

f:id:ausnichts:20161228160857j:plain

ただし、月間アーカイブをカレンダー表示にした場合は、これでは消えません。Javascript でと思ったのですが、ajax を使っていますので、今のところ消す方法が見つかりません。なにか方法が見つかれば、また記事にします。


ページャーのトップページへのリンクを消す

上の画像を見ますと、一つ目の記事のページャーにトップページへのリンク(HOME)が表示されています。トップページが常に最新の記事ということになりますから当然ですね。これを消すには Javascript を使うしか方法がなさそうです。

デザイン > カスタマイズ > フッタに次のスクリプトを入れます。ここでトップページのカスタムURLを使います。

<script>
window.onload = function(){
  Array.prototype.forEach.call(document.getElementsByTagName('a'), function(node) {
    if(node.href.indexOf('entry/home') !== -1) node.parentNode.removeChild(node);
  });
};
</script>

f:id:ausnichts:20161228161406j:plain

消えました。


トップページ固定化完成

f:id:ausnichts:20161228161725j:plain

後は、好きにトップページをデザインするだけです。

Dropbox の Public フォルダが 2017/3/15 で終了するようです

Web Tips

Dropbox からこんなメールが来ています。

平素より Dropbox をご利用いただき誠にありがとうございます。Dropbox では共有機能の改善に日々取り組んでおります。Public フォルダを共有方法として最初に導入して以来、Dropbox では安全な共有とチームとの共同作業を可能にする効率的な方法を開発してきました。

その結果、このたび Public フォルダのサポートを終了することとなりました。Dropbox Basic のユーザーの皆様は、2017 年 3 月 15 日まで Public フォルダをご利用いただけます。3 月 15 日を過ぎますと、Public フォルダ内のファイルは非公開となり、これらのファイルへのリンクが無効になります。サポート終了後もファイルは Dropbox に安全に保管されますのでご安心ください。

サポート終了後も Public フォルダ内のファイルを共有しておくには、新しい共有リンクを作成し、共同作業を行っているユーザーに新しい URL を送信してください。

共有リンク以外にも、スムーズな共同作業と信頼できる管理機能を備えたさまざまな共有方法をご利用いただけます。詳細については、Dropbox のヘルプセンターをご覧ください。

Dropbox スタッフ一同


しばらく前から新規アカウントには Public フォルダがないという話は耳にしていましたが、ついにサービス自体終了ですか!?

困った!

他に同様のサービスはないか探さなくては…。

はてなブログ/軽量・高速ソーシャルボタン・シェアボタン(LINE付き、選択可能版)

はてなブログ

はてなブログ用の軽量・高速自作ソーシャルボタンの LINE付き、各ソーシャルボタン選択可能版です。


概要

改訂版をいくつも公開していますので整理しますと次の通りです。

  1. はてなブックマーク、Facebook、Twitter、Google+ 記事下固定版
    【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化

  2. はてなブックマーク、Facebook、Twitter、Google+ 記事上下表示可能版
    はてなブログ/軽量・高速ソーシャルボタン・シェアボタン改訂版

  3. 上記2+LINE、各ボタン表示選択可能版
    この記事

  4. 作成過程の説明記事


ボタンの見た目

ボタンの見た目は、 CSSで自由に変更できます。デフォルトは次の通りです。

f:id:ausnichts:20161214151633p:plain

スマートフォンの場合

レスポンシブデザインのテーマを使用していない場合はスマートフォンでは表示されません。レスポンシブデザインのテーマを使用している場合は次のように表示されます。

f:id:ausnichts:20161214151934p:plain


利用方法

事前準備(Facebook、Twitter 使用の場合は必須)

Facebook と Twitter のシェアカウントを取得するために次の2つの登録が必要です。

  1. Facebook アプリID
    【はてなブログ高速化3】Facebookシェアダイアログでシェアする/Facebook SDK for JavaScript - IMUZA.com」を参考にアプリID を取得し、以下の挿入コードの42行目「Facebook のアプリID」を自分のアプリID に変更してください。
  2. count.jsoon への登録
    widgetoon.js & count.jsoon | digitiminimi」でサイトを登録してください。


カスタマイズ > フッタ への挿入コード

  • 不要なソーシャルボタンは、それぞれ<li></li>を削除してください
  • Facebook は、事前準備で取得したアプリIDを42行目「Facebook のアプリID」と差し替えてください
  • Facebook 不要の場合は、ひとつ目の<script></script>も不要です
<ul id="tmplShareButtons">
  <!-- 不必要な場合は各リストアイテムを削除 -->
  <!-- はてなブックマーク -->
  <li class="hatena">
    <a class="hatena-bookmark-button" data-hatena-bookmark-layout="simple">
      <span class="hatena-bookmark-count share-count"></span>
      <i class="blogicon-bookmark lg"></i><span class="share-label">ブックマーク</span></a>
  </li>
  
  <!-- Facebook -->
  <li class="facebook">
    <a href="javascript:void(0)" class="facebook-share-button"> 
      <span class="facebook-count share-count"></span>
      <i class="blogicon-facebook lg"></i><span class="share-label">シェア</span></a>
  </li>
  
  <!-- Twitter -->
  <li class="twitter">
    <a class="twitter-button">
      <span class="twitter-count share-count"></span>
      <i class="blogicon-twitter lg"></i><span class="share-label">ツイート</span></a>
  </li>
  
  <!-- Google+ -->
  <li class="googleplus">
    <a class="googleplus-button">
      <span class="googleplus-count share-count"></span>
      <i class="blogicon-plus lg"></i>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" width="36px" height="22px" viewBox="-14 -8 72 44" class="u7 uzlpSb"><path d="M32 8.2h-3v4h-4V15h4v4h3v-4h4v-2.9h-4V8.2zm6-2V8h3v15h3V4l-6 2.2z"></path><path d="M11.4 11.3v4.5h6c-.4 2.6-2.7 4.5-6 4.5-3.6 0-6.6-3.1-6.6-6.7s2.9-6.7 6.6-6.7c1.7 0 3.1.5 4.3 1.7l3.2-3.2c-2-1.8-4.5-2.9-7.5-2.9C5.3 2.5.3 7.5.3 13.6s5 11.1 11.1 11.1c6.5 0 10.7-4.6 10.7-10.9 0-.8-.1-1.7-.2-2.5H11.4z"></path></svg></a>
  </li>
  
  <!-- LINE -->
  <li class="line">
    <a class="line-button">
      <span class="share-count"><i class="blogicon-share lg"></i></span>
      <span class="line-label">LINE</span></a>
  </li>
</ul>
<script>
  // Facebook 削除の場合は、この<script></script>も削除可
  window.fbAsyncInit = function() {
    FB.init({appId:'Facebook のアプリID',xfbml:true,version:'v2.7'});
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/ja_JP/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<!-- 以下は削除不可 -->
<script>!function(){var e=function(e,t){var n="https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ",o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState&&200===o.status){var e=JSON.parse(o.responseText);t(e.result.metadata.globalCounts.count)}else t(0)},o.open("post",n,!0),o.setRequestHeader("Content-Type","application/json"),o.send(JSON.stringify(e))},t=function(e,t,n){var o=document.createElement("script");o.type="text/javascript";var a="ExternalCallback_"+t;window[a]=function(e){o.parentNode&&o.parentNode.removeChild(o);try{delete window[a]}catch(t){window[a]=null}n(e)},o.src=e+"&callback="+a,document.body.appendChild(o)},n=function(e,t){var n=new XMLHttpRequest;n.open("get",e,!0),n.onreadystatechange=function(){if(4===n.readyState&&200===n.status){var e=JSON.parse(n.responseText),o="share"in e?e.share:{},a="share_count"in o?o.share_count:0;t(a)}else t(0)},n.send(null)},o=0,a=document.getElementById("tmplShareButtons");a.removeAttribute("id"),Array.prototype.forEach.call(document.getElementsByClassName("hentry"),function(s){var r=s.getElementsByClassName("bookmark")[0],l=r.getAttribute("href"),i=r.textContent;Array.prototype.forEach.call(s.getElementsByClassName("social-buttons"),function(s){var r=a.cloneNode(!0);if(a.getElementsByClassName("hatena").length){var c=r.getElementsByClassName("hatena-bookmark-button")[0];c.setAttribute("href","http://b.hatena.ne.jp/entry/"+l),c.setAttribute("data-hatena-bookmark-title",i);var m="http://api.b.st-hatena.com/entry.count?url="+encodeURIComponent(l);t(m,o,function(e){c.getElementsByClassName("hatena-bookmark-count")[0].textContent=e}),o++}if(a.getElementsByClassName("facebook").length){var u=r.getElementsByClassName("facebook-share-button")[0];u.addEventListener("click",function(){FB.ui({method:"share",href:l},function(){})});var m="https://graph.facebook.com/?id="+encodeURIComponent(l);n(m,function(e){u.getElementsByClassName("facebook-count")[0].textContent=e})}if(a.getElementsByClassName("twitter").length){var p=r.getElementsByClassName("twitter-button")[0];p.setAttribute("href","http://twitter.com/intent/tweet?url="+encodeURIComponent(l)+"&text="+i);var m="http://jsoon.digitiminimi.com/twitter/count.json?url="+encodeURIComponent(l);t(m,o,function(e){p.getElementsByClassName("twitter-count")[0].textContent=e.count}),o++}if(a.getElementsByClassName("googleplus").length){var d=r.getElementsByClassName("googleplus-button")[0],h=500,g=500,f=(window.screen.width-h)/2,y=(window.screen.height-g)/2;d.setAttribute("href","javascript:void(window.open('https://plus.google.com/share?url="+encodeURIComponent(l)+"', '_blank', 'width="+h+",height="+g+",left="+f+",top="+y+"'))");var C={method:"pos.plusones.get",id:"p",params:{nolog:!0,id:l,source:"widget",userId:"@viewer",groupId:"@self"},jsonrpc:"2.0",key:"p",apiVersion:"v1"};e(C,function(e){d.getElementsByClassName("googleplus-count")[0].textContent=e})}if(a.getElementsByClassName("line").length){var m="http://line.me/R/msg/text/?"+i+"%0D%0A"+encodeURIComponent(l);r.getElementsByClassName("line-button")[0].setAttribute("href",m)}s.appendChild(r)})}),a.parentNode.removeChild(a)}();</script>


カスタマイズ > デザインCSS への挿入コード

.social-buttons ul {
  padding: 0;
  margin: 0;
}
.social-buttons ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 15%;
  border-radius: 3px;
  vertical-align: text-top;
}
.social-buttons ul li a {
  width: 100%;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  position: relative;
  text-align: center;
}
.social-buttons ul li a span.share-count {
  display: inline-block;
  width: 100%;
  color: #000;
  background: #fff;
  line-height: 2rem;
  border-radius: 3px 3px 0 0;
  opacity: 1;
  -webkit-transition: opacity 0.4s, transform 0.4s;
  transition: opacity 0.4s, transform 0.4s;
}
.social-buttons ul li a i {
  padding: 0 5px;
}
.social-buttons ul li a i.blogicon-plus {
  color: #dd5144;
}
.social-buttons ul li a svg {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.social-buttons ul li a svg path {
  fill: #fff;
}
.social-buttons ul li a span.share-label {
  font-size: .7rem;
}
.social-buttons ul li a span.line-label {
  font-size: .7rem;
  line-height: 1.2rem;
}
.social-buttons ul li a:hover span.share-count {
  opacity: 0.8;
}
.social-buttons ul li.hatena {
  background: #00a4de;
  border: solid 1px #00a4de;
}
.social-buttons ul li.facebook {
  background: #3e59a5;
  border: solid 1px #3e59a5;
}
.social-buttons ul li.twitter {
  background: #1b95e0;
  border: solid 1px #1b95e0;
}
.social-buttons ul li.googleplus {
  background: #dd5144;
  border: solid 1px #dd5144;
}
.social-buttons ul li.line {
  background: #00b900;
  border: solid 1px #00b900;
}
.social-buttons ul li.line span.share-count i {
  color: #00b900;
}
@media (max-width: 767px) {
  .social-buttons ul li a span.share-label {
    display: none;
  }
}

以上です。


免責等

  • 本ツール使用によって発生した問題について責任は負い兼ねますので自己責任でご使用ください
  • ただし、対応可能な問題については可能な限りお答えしますのでコメント欄にお願いします
  • また、バグや各ソーシャルボタンの仕様変更等による問題はお知らせいただければ助かります