惜しげもない

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

たこさんちゃんねるは、WordPressに移転いたします。

f:id:tako3ch:20180607233305p:plain

はてなブログを飛び出し、ついにWordPressに移転しました。 今後はこちらで更新していきます。

tako3.photo

はてなブログの方は残しますが、そのうち独自ドメインをやめて初期ドメインに変えて、まあもう雑記とかそういう駄文用にしたい気もします。現在はリダイレクト用で各記事を飛ばしているので各記事は残していますが、そのうち随時消していきます。

 

WordPressに移行するまでの経緯、移行してから、テーマ選定、プラグインなどもまとめていこうと思います。そのうち。

というわけで、

Feedlyの登録し直しと、

feedly.com

ブックマークし直しと、

tako3.photo

なんとなくはじめたLINE@を

LINE Add Friend

Twitterも!

twitter.com

 

よろしくおねがいします〜〜〜!

MacのFTPクライアントソフトはYummy FTP Proがいいと思う

本記事は移転しました。

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

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

noteでフィルムカメラで撮った写真をまとめはじめました。

本記事は移転しました。

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

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

最近の近況(5月末)

本記事は移転しました。

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

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

コンパクトフィルムカメラのCONTAX T2はやっぱりいいぞ!

本記事は移転しました。

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

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

静岡でお茶畑と藤まつりを楽しんできた。

本記事は移転しました。

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

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

奥山由之さんの写真集「POCARI SWEAT」を購入しました

本記事は移転しました。

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

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

FUJIFLIM X-T2と島根県立美術館

本記事は移転しました。

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

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

今週のお題が「自己紹介」なので。

たまには今週のお題に乗って書きます。別に記事数を稼ぎたいわけではないですよ。最近いろいろ雑記はあんまり書いていないなーとかも考えていないです。

概要

aboutに書いてあるから、今更感あるけど、、、一応本名出していますね。カタカナで名前書いておけばサブカルっぽくなるってどこぞのはなみずぷしゃーも言ってた気がする。アラサー。

(これ、結構序盤で思ったんだけど、この記事必要あるかなぁ…自己紹介必要かなぁ…)

名古屋に住んでいます。尾張地方出身です。いまは大須に住んでいます。歩いてコメ兵に行ける距離がいかに危ないのかを身をもって体験しています。

フロー

普通科→私立文系法学部→広告代理店→Webメディア運営とかPR系→Web制作会社

だいたいこんな感じです。

企画営業職→メディア運営・編集職→フロントエンドエンジニア

人生迷走してる。

オプション

カメラ・写真は言わずもがな。あとは読書(小説とか漫画とか雑誌とか)。

ドライフラワーを作ったり(花買ってきて乾かすだけ)

部屋の掃除と片付けをしたり、ふらりと旅行に行くのが好きです。

あと、動物アレルギーだけど、動物が好きです。

レッサーパンダとか、アヒルとか、なんかそういう系。

あとは、コーヒーを飲んだり。

アルコール類は一切だめです。ウイスキーボ○ボンとか、そういうのもだめです。でも紫煙は漂わせます。せめてもの反抗です。

使ってるカメラ

DSC03861

SONY α7RⅡ

(そのうちレンズはまとめよう)

 

あとなんかあったっけ…?

 

 

今週のお題「自己紹介」

はてなブログで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>


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

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

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

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

本記事は移転しました。

約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やコメントなどでお気軽にどうぞ!