たこさんちゃんねる(別枠)

WEBとかそんな感じとかでどうでしょうか。

はてなブログテーマ「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/https://www.tako3.xyz/feed】" target="_blank">
		<i class="blogicon-rss lg"></i>
		<span class="inner-text">Feedly</span>
		</a>
	</div>
</div>

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

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


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