惜しげもない

WEBであったり、写真であったり、カメラであったり、旅行とか、なんかそんな感じとかでどうでしょうか。

市橋織江さんの写真集「TOWN」を買いました。

本記事は移転しました。

約3秒後にリダイレクトします。

リダイレクトしない場合はここをクリックしてください。

フォクトレンダー「NOKTON classic 35mm F1.4」Eマウント版レビュー

本記事は移転しました。

約3秒後にリダイレクトします。

リダイレクトしない場合はここをクリックしてください。

Sony α7ⅡからSony α7RⅡへ乗り換え。

本記事は移転しました。

約3秒後にリダイレクトします。

リダイレクトしない場合はここをクリックしてください。

Super-Takumar 135mm F3.5に手を出した。

本記事は移転しました。

約3秒後にリダイレクトします。

リダイレクトしない場合はここをクリックしてください。

はてなブログでFlickr貼り付けをした際のレスポンシブ対応

f:id:tako3ch:20180224190315j:plain

はてなブログでFlickrを利用して写真を貼り付けると、大きくなったりレスポンシブしてくれない、というかiframe読み込みだから融通きかないし、縦写真と横写真のときもあるし、、、とかとか問題点がモリモリです。

とはいえFlickrを利用した写真管理は楽だし、アップロードも楽だしということでやめられないです。

この「たこさんちゃんねる」でも、だいたいの写真をFlickrで貼ってます。

やりたいこと

  • Flickrで写真を貼りたい
  • HTMLはいちいちいじりたくない
  • PCの時、SPのときできちんとサイズ調整したい
  • 縦写真と横写真でclassを分けたい

やったこと

吐き出される前のFlickrのHTMLは、これ

<a data-flickr-embed="true" href="https://www.flickr.com/photos/tako3/25579868607/" title="DSC03629 by tako3ch_jp, on Flickr"><img src="https://farm5.staticflickr.com/4675/25579868607_29e84fe5c6_b.jpg" alt="DSC03629" width="683" /></a>

せっかくdata要素(data-flickr-embed="true")を持っているので、これを本文以下のpタグ内から洗う。

横写真なのか縦写真なのかを判断したいので、img要素のwidthを取ってきて、縦の時はclass="flickr-wrp-portrait"で横の時はclass="flickr-wrp-landscape"をiframeを括るように実装。
つまり

// 縦写真
<div class="flickr-wrp-portrait">
  <iframe ~~~~~~~></iframe>
</div>
// 縦写真
<div class="flickr-wrp-landscape">
  <iframe ~~~~~~~></iframe>
</div>

こんな感じになる。divで括れたらこっちのものなので、あとはCSSで調整。

CSSで調整する際には、
吐き出されるiframeのdata-natural-を見て、これをメモっておくか覚えておく。

<iframe ~~ data-natural-width="1024" data-natural-height="683" ~~></iframe>

というわけで次

ソースコード

JS

jQuetyを現在使ってないかたは、

管理画面 > 設定 > 詳細設定 > 検索エンジン最適化 > headに要素を追加

この欄にこれをコピペして保存しておいてください。

<script  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

jQueryのバージョンは3.3.1を使用しているけども、1.11とかそのへんでも問題ないです。

貼り付ける場所

管理画面 > デザイン > カスタマイズ > フッタ

貼り付けるもの
<script>
// flickrのサイズ調整するやつ
$(document).ready(function() {
	$('.entry-content [data-flickr-embed]').each(function() {
		var f_img_w = $(this).children('img').attr('width');
		if (f_img_w != 683) {
			$(this).parent().wrapInner( '<div class="flickr-wrp-landscape" />' );
		}else{
			$(this).parent().wrapInner( '<div class="flickr-wrp-portrait" />' );
		}
	  });
});
</script>

683のところは、記事投稿画面のHTML編集のFlickrのタグにwidth=***ってあると思うのでそれに合わせてください。
683じゃないときに、landscapeになり、683のときはportraitになります。

CSS

使用しているテーマ、自分で他に書いてるソースで多少変わるかも。
Coffee Breakを利用している方は下記のソースコードはすでに入ってますのでコピペの必要はないです。

貼り付ける場所

管理画面 > デザイン > カスタマイズ > デザインCSS

padding-top: 66.6992188%;とかの数字は、上で覚えておいた、

<iframe ~~ data-natural-width="1024" data-natural-height="683" ~~></iframe>

この数字を使います。

計算式は
高さ / 幅 * 100(%)
つまり
683 / 1024 * 100
で出します。

縦の時は100%では大きすぎるので、70%ぐらいにしたいので、
1024 / 683 * 70
で出します。

貼り付けるもの
/*============================ #flickrrrrrr ============================*/
iframe.flickr-embed-frame {
	margin: 0 auto !important;
	display: block;
}
[class*='flickr-wrp-']{
	position: relative;
	width: 100%;
	overflow: hidden;
}
/*横写真*/
.flickr-wrp-landscape {
    padding-top: 66.6992188%;
}
/*縦写真*/
.flickr-wrp-portrait {
	padding-top: 104.948755%;
	width: 70%;
	margin: auto;
}
[class*=flickr-wrp-] iframe.flickr-embed-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}
</script>


これで完了です〜〜〜。
これでもろもろすっきり〜〜。

あー説明難しい……。
こういうのをうまく説明できるようになりたい……。

なんか質問があれば、コメント欄とかそのへんでも〜〜。他にいい方法があるとかも…あと、説明の仕方が下手とかいうツッコミも……

「写ルンです」レンズをデジタルで楽しめる「GIZMON Wtulens」の実写レビュー

本記事は移転しました。

約3秒後にリダイレクトします。

リダイレクトしない場合はここをクリックしてください。

秋とか冬の思い出(写ルンです)

本記事は移転しました。

約3秒後にリダイレクトします。

リダイレクトしない場合はここをクリックしてください。

はじめてノハナでフォトブックを作ってみたよ

本記事は移転しました。

約3秒後にリダイレクトします。

リダイレクトしない場合はここをクリックしてください。

20180208_インフルエンザ

1月の中頃に後輩がインフルエンザになり、繁忙期前で良かったなぁとか言ってたら、おもいっきし繁忙期に自分がインフルエンザになりました。

しかも予防接種をうっていたA型。風邪かなー花粉症かな~とか言ってたときには多分もうインフルエンザだったのでしょう。

たとえインフルエンザだったとしても、仕事が減るわけでもなく、妖精さんがコーディングしてくれるわけでもないので、自宅ですすめる。元気だよー!全然仕事出来るよー!とか言うけど、やっぱり波がある。えらいときはとことんえらい。

それにしてもインフルエンザなんて十年以上かかってないんじゃないかなとか思うけど、特段思い出すこともできないので、遠い昔のことだと思う。

自宅での作業は体調以外は問題なくて、デザインデータを逐一もらわないといけないことが起こるぐらいで、あとは、時間の感覚がなくなること、コーヒーとかポカリをずっと飲み続けること、本数が増えること、お菓子ばっか食べるので不健康(実際そうなんだけど)なことぐらいですね。

インフルだよ!お休みだ!ひゃっはー!ってわけでもなく、暇だなぁとか思うこともなく、お仕事できてるのはいいことといえばいいことなのだけど、なんとも言えないですね。

ひとまず、あと2日で自宅待機が解除されるので、、、というか10日まで自宅で安静って、10日まで、、、?11日からかな、、、?解除されたら会社いかなきゃ。

20180207の雑記

DSC03494

相変わらず繁忙期。2月いっぱいはずっと忙しいでしょう。

寒いし、なんかちょくちょく雪は降るし、万年冷え性には辛い季節です。それに、座り仕事+PCのお仕事ってやっぱり肩こりと腰痛に悩まされるよね。整体か接骨院にいきたいです。話は変わるけど、仕事でRealForce使ってるからか、家のiMacのキーボードがタイピングしづらい。

最近職場仲間となんか面白そうなことをやりたいと話していて、陶芸とか化石発掘とかそういういつもやらないことをなにかしらやっていきたいねーって話してる。ちょっと前からドライフラワー作りもしてるけど、最近はお花屋さんに行けてないし、増えてない。キャンドル作りも地味に止まっていて、一個作って終わった。

新しい趣味ではないけど、なにか面白そうなことをどんどんやってみたいと思った。

ちょっと前にノハナでフォトブックを頼んでみたんだけど、3週間ぐらい届くのにかかるらしいから、楽しみに待っている。1ヶ月に1冊無料だから、せっかくだから作っていきたいなとも思う。

思うとか、やりたいとかで、実行されないのもあれなので、きっと繁忙期が終わったら発散したい。

猫になりたい。猫アレルギーだけど。

Vimを検討した際に参考にしたサイトたち

本記事は移転しました。

約3秒後にリダイレクトします。

リダイレクトしない場合はここをクリックしてください。

はてなブログテーマ「Coffee Break」を制作+カスタマイズ方法

今までは既存のテーマをいじいじとさせて貰ってましたが、この度はてなブログテーマを作ってみました。自分で使いながら改良をしていくので、ちょいとゆるめのリリースですけど、いつまでも温めておくよりはいいかなと思いまして。

はてなブログテーマ「Coffee Break」を作りました。

テーマページはこちら

Coffee Break - テーマ ストア

スクリーンショット

f:id:tako3ch:20180201235345j:plain

仕事中に一服しているときにテーマの名前を思いつきました。特に意味はないです。コーヒーおいしい。
このテーマ「Coffee Break」の特徴としては、

  • レスポンシブ対応
  • なるべく画像がきれいに見えるようなデザイン
  • 読みやすいように

などを心がけています。
基本的には「写真ブログ」向けに制作しています。というか自分のブログです。

TwitterやInstagramもスマートに表示します。

https://www.instagram.com/p/BeQUHt7hIdQ/
ぜんぜん写真撮りに行けてない〜雪景色とか撮りたい〜わさわさしたい〜写ルンです値上がりしちゃうし…業務用フィルム買っとくか…#portland #port #ship #seascape #sonya7ii #zeiss #planar #blue #snapshot

気をつける所

はてなProユーザー向けです。

トップページの部分を一覧形式のみで想定しているので、それ以外はイメージのカードレイアウトができないです。まあこれは好みなのであれですが。

管理画面 > 設定 > 詳細設定 > トップページの表示形式

にて変更をお願いします。

アイキャッチ画像がないとだめです。

レイアウトが崩れてしまうので、なんらかのアイキャッチ画像を設定してください。

レスポンシブデザインです。

PCでもスマートフォンでも同じ感じのデザインにしています。こちらは、

管理画面 > デザイン > スマートフォン > 詳細設定でレスポンシブデザインにチェック

写真はflickrを想定しています。

それ以外の画像は崩れるのかな…どうかな…あれだったら直します。

オプション関連

記事上部下部に記載するシェアボタン

下記コードを記事上または記事下のところに

<!--シェアボタン-->
<div class="sharebtn">
	<div class="sharebtn-inner">
		<!--はてブ-->
		<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i></a>
		<!--Facebook-->
		<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" ><i class="blogicon-facebook lg"></i></a>
		<!--Twitter-->
		<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i></a>
		<!--Pocket-->
		<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i></a>
	</div>
</div>

記事下とかに設置するフォローボタン

<!--  フォローボタン-->
<div class="followbtn">
	<div class="follow-title"><span>フォローする</span></div>
	<div class="content-inner-follow-buttons" >
		<a class="hatena" href="【http://blog.hatena.ne.jp/tako3ch/tako3ch.hatenablog.com/subscribe】" onclick="window.open('【http://blog.hatena.ne.jp/tako3ch/tako3ch.hatenablog.com/subscribe】', '', 'width=500,height=400'); return false;">
			<i class="blogicon-hatenablog lg"></i>
			<span class="inner-text">Hatena</span>
		</a>
		<a class="twitter" href="【https://twitter.com/intent/follow?screen_name=tako3】" target="_blank">
		<i class="blogicon-twitter lg"></i>
		<span class="inner-text">Twitter</span>
		</a>
		<a class="instagram" href="【https://www.instagram.com/tako3poi/】" target="_blank">
		<i class="blogicon-instagram lg"></i>
		<span class="inner-text">Instagram</span>
		</a>
		<a class="feedly" href="【http://feedly.com/i/subscription/feed/http://blog.tako3.xyz/feed】" target="_blank">
		<i class="blogicon-rss lg"></i>
		<span class="inner-text">Feedly</span>
		</a>
	</div>
</div>

そのうち実装しようと思っていること

  • Proユーザーじゃなくてもいい感じに表示できるようにしよう
  • ランキングとかおすすめ記事とかのスライダー
  • タイトルまわりなんかおしゃれにする


なにか質問などありましたらTwitterやコメントなどでお気軽にどうぞ!

20180128の雑記

雑記。

繁忙期です。Web制作をがんばっています。特にどこに出かけることもなく、写真を撮るわけでもなく、ただただコーディング作業をしています。

なんかそういうのもまとめよう今度。作業環境みたいなやつ。

最近エディターを変えようかと思ってVimに手を出したり、VSCodeに手を出したりしていて、1週間ぐらいでころころしていたのだけど、フロントエンドエンジニアという特性上と慣れの問題からか、結局Sublime Textに戻ってきています。

キーボードも、MacのApple Magic Keyboardを使っていたのだけど、RealForceに戻ったりしています。マウスはMX ERGO。もうWindows使えばいいのにって感じだけど、MacBook Pro。

作業環境でいうなら4K画面はまだ買ってない。ほしい。

あ、名古屋でもプルームテックが販売するみたい。ほしい。

2月といえば、三國無双のオープンワールドの新しいやつがでる。楽しみ。この繁忙期が終わったら、、、やるんだ、、、。

そして2月といえば、Voigtlanderの35mmのレンズがでるね。Eマウントのやつ。ほしいね。さぞかしいいんだろうなぁ。たぶん。

本屋にもなかなかいけないので、コンビニで&Premium買った。お部屋特集。いつか読もう。

制作案件のスケジュール把握、調整とかしていたのだけど、これ制作の仕事じゃないとおもうんだ…ディレクターの仕事だとおもうんだ。というかなんでスケジュール読みができないのに仕事持ってくるんだよ。把握してからもってこいよ…なんでこんなに詰まってるんだよ……。

というわで、最近はてなブログのテーマを作っているのだけど、なかなかできません。いつごろ完成するかなぁ…ちょっとずつは進んでいるのだけども…HTML側をいじれないから限界があるなぁほんと。

 

さーていろいろがんばろー。

フロントエンジニアがMacでおすすめのノート・メモアプリ4選

本記事は移転しました。

約3秒後にリダイレクトします。

リダイレクトしない場合はここをクリックしてください。

【熱川・熱海】伊豆旅行にいってきました。

本記事は移転しました。

約3秒後にリダイレクトします。

リダイレクトしない場合はここをクリックしてください。