写真をオサレに表示 - おっちゃんあんちゃんの覚書

本日は、記事に貼りつけた写真についてのお話です。

貼りつけ方法は２つ
- インスタグラム
- はてなフォトライフ
参考にさせていただいたのは
ちょっとだけ工夫したところ
設定場所は
まとめ

貼りつけ方法は２つ

私が記事に写真を貼る場合、次の２つの方法を使用しています。

インスタグラム

インスタグラムには、おもに近所で見かけた草花や水槽を写した動画を掲載しています。

ブログに貼り付けるときは、インスタグラムで取得した埋め込みコードを使用しています。

春の訪れを感じます。 #ハクモクレン #Magnoliaheptapeta #白木蓮 #花 #flowers

おっちゃんあんちゃんさん(@tk4501)がシェアした投稿 - 2017 3月 11 7:41午後 PST

はてなフォトライフ

ブログのカスタマイズや、インスタグラムに載せられないコケだらけの水槽などを掲載するときに使用しています。

インスタグラムとは異なり、写真がそのまま貼り付けられます。これはこれで良いのですが、ちょっとだけ賑やかにしてみました。

f:id:tk450:20170109200412j:plain

参考にさせていただいたのは

グーグル先生にお尋ねしたところ、テープで貼ったポラロイド写真のように見える素敵な方法を教えていただきました。

miha5.com

ちょっとだけ工夫したところ

はてなブログで写真を貼りつける（写真を投稿する）ときのHTMLはこれです。

<p><img class="hatena-fotolife" title="タイトルだよ～" src="https://xxx.xx/xxx.jpg" alt="xxx" /></p>

一方、紹介していただいた方法のHTMLは、次のようなものでした。

<div class="box">
    <span class="tape"></span>
    <p><img src="http://xxx.xx/xxx.jpg"/></p>
    <p>〇〇〇〇</p>
</div>

はてなブログのHTMLでは、青色文字のタグが足りません。

(・～・：)

記事を書くときにHTMLとして足すこともできたのですが少々めんどうです。そこでJavascriptを使って自動で足すことにしました。

また。写真下の文章には、画像を貼りつけるときに入力しておいたtitleの内容を使うことにしました。titleを指定していなかったり、はてなブログがデフォルトでつけた内容のままだったりしたときには、"・・・"としています。

この方法だと、過去の記事に貼りつけた写真でもＯＫです。

さらに、せっかくなので写真下の文章のフォントをグーグル先生のwebフォントにしてみました。できるだけユニークなフォントが使いたくて”ニコモジ”にしています。

googlefonts.github.io

こんなイメージになります。

f:id:tk450:20170109200412j:plain

設定場所は

次の３ヶ所です。

ダッシュボート → 設定 → 詳細設定 → headに要素を追加

<link href="//fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />

ダッシュボード → デザイン → カストマイズ → フッタ

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
var $fttr = $.noConflict(true);
(function($) {
  $(function() {
    // xx.写真フレーム↓
    $('.hatena-fotolife').parent().wrap('<div class="img-frame"></div>');
    $('.img-frame').append('<span class="tape"></span>');
    $(".img-frame").each(function(i) {
      var strTitle = $(this).find('img').attr('title');
      if (typeof strTitle == 'undefined' || strTitle.indexOf('f:id:') != -1) {
        strTitle = '・・・'
      }
      $(this).append('<p>' + strTitle + '</p>');
    });
    // xx.写真フレーム↑
 　})
})($fttr);
//-->
</script>

ダッシュボード → デザイン → カストマイズ → デザインCSS

/* xx.写真フレーム↓ */
.img-frame {
  background: #fff;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3), 0 0 50px rgba(0, 0, 0, 0.1) inset;
  position: relative;
  margin: 30px auto;
  padding: 25px 8px 12px;
}

.tape {
  background: rgba(255, 255, 255, 0.4);
  border-left: 2px dotted rgba(0, 0, 0, 0.1);
  border-right: 2px dotted rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  width: 85px;
  height: 28px;
  position: absolute;
  top: -13px;
  left: 36%;
  -webkit-transform: rotate(-3deg);
}

.img-frame>.hatena-fotolife {
  margin-bottom: 8px;
}

.img-frame>p {
  font-size: 0.8 em;
  font-family: "Nico Moji";
  margin-bottom: 0px;
}
/* xx.写真フレーム↑ */