.log(ぽちろぐ)

退屈しているおっさんの日記

はてなブログに、googleフォト貼り付け 2020春

はてなブログに物申す

  • 2020年03月末に機能停止。以来アナウンスなし。障害が1ヶ月間放置されてる。
  • 機能再開するつもりがあるのか否かぐらいアナウンスしたらどうだ。
  • googleフォト側の変更に追随する作業をしてるのかしてないのかぐらいアナウンスしたらどうだ。
  • スマホで撮った画像を、PCでアップロードして日記を編集する、ってのが面倒なのじゃよ。だからgooglePhotoとの連携ができるはてなブログに課金してるのじゃよ。
  • 課金勢に対してアナウンスしないのが、はてなの誠意なわけ?

 開発マネジャに届け!!!!

待っててもしゃーないので代替手段

 手順は以下。

  1. googleフォトで、共有リンクURLを取得
  2. 共有リンクURLを、imgタグ. src のURLに変換
  3. 変換した画像URLを、はてなブログ編集画面に貼り付け
  4. はてなブログの機能が、はてなブログ記法に変換してくれる
  5. imgタグとして表示される。

 URL変換のツールは以下にあり。

izm51.com

 アルバムにしてるならこれが良さそう。

CTRQ.org

ctrlq.org

 アルバムにしてなくて、フォトのままならこれが。

セルティスラボ. フォトエンベッドメーカー

celtislab.net

  • 上述サービスとはちょっと違って、このサービスは、画像URLではなく、そのまま貼り付けできるソースコードが生成される。
  • このサービスよりも、上で述べたwebサービスを使用して、画像URLをはてなブログ編集画面に貼り付けて、はてなブログ機能でimgタグ生成する方が手数が少ない。と思う。
  • ページが大きくて使い勝手が微妙。
  • 生成されるソースコードも微妙。はてなブログ側のCSSをちょっとイジると、貼り付けがちょっと楽になる。
/* フォトに影 */
div.pswp-gallery figure.wp-caption a img.photoembed-maker{
    background-color:#ffffff;
    border:1px solid #aaaaaa;
    padding:8 8 8 8;
    -webkit-box-shadow: 3px 3px 3px #777;
    -moz-box-shadow: 3px 3px 3px #777;
    box-shadow: 3px 3px 3px #777;
    margin-bottom:8px;
    float : none;
}

/* キャプションは隠す */
div.pswp-gallery  figure.wp-caption figcaption.wp-caption-text{
  display:none; 
}

imgタグについて

 画像URLをはてなブログ編集画面に貼り付けすると、画像として貼り付けを選択できる。

 Markdownモードで生成されるimgタグに対するCSSは以下。他にもセレクタの書き方はあろうけど。中身は適宜変更のこと。

/* ドロップシャドウ付きの写真 */
div.entry-content p a img{
    background-color:#ffffff;
    border:1px solid #aaaaaa;
    padding:8 8 8 8;
    -webkit-box-shadow: 3px 3px 3px #777;
    -moz-box-shadow: 3px 3px 3px #777;
    box-shadow: 3px 3px 3px #777;
    margin-bottom:8px;
    float : none;
}

URL貼り付けて、画像として解釈されないことがある

  • そんなときは、imgタグを手打ち。
<!-- こんなタグ。class、widthは適宜改変どうぞ -->
<img class="photo" width="450px" src="生成されたURL">
  • とかいろいろやってたら、記事中のimgタグへのcssはこんなになってた。セレクタが……
/* ドロップシャドウ付きの写真 */
div.pswp-gallery figure.wp-caption a img.photoembed-maker,
img.photo,
img.magnifiable,
div.entry-content p a img{
    background-color:#ffffff;
    border:1px solid #aaaaaa;
    padding:8 8 8 8;
    -webkit-box-shadow: 3px 3px 3px #777;
    -moz-box-shadow: 3px 3px 3px #777;
    box-shadow: 3px 3px 3px #777;
    margin-bottom:8px;
    float : none;
}

nobuchiru.hatenablog.com