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

おっちゃんあんちゃんの覚書

熱帯魚飼育を中心にブログを書いています。失敗談の方が多くて・・・。

写真をオサレに表示

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

貼りつけ方法は2つ

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

インスタグラム

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

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

 

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

おっちゃんあんちゃんさん(@tk4501)がシェアした投稿 -

はてなフォトライフ

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

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

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を指定していなかったり、はてなブログがデフォルトでつけた内容のままだったりしたときには、"・・・"としています。

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

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

googlefonts.github.io

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

f:id:tk450:20170109200412j:plain

設定場所は

次の3ヶ所です。

ダッシュボート → 設定 → 詳細設定 → 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.写真フレーム↑ */

まとめ

本日は、このブログに貼りつけた写真をオサレにする方法をご紹介しました。一度設定すれば記事を書くたびにHTMLを修正する必要がないため、ものぐさな私向きとなっています。

そして早速、過去の記事を見たところ・・・

タイトルを記載し忘れたり、手抜きタイトルがとても多いことに気づきました。

(TーT*)

おしまい

※最新の設定は、こちらの記事でご確認ください。

follow us in feedly rss