テーマ”Sengyo”のカスタマイズ例

テーマ"Sengyo"のカスタマイズ例

シンプルだけどオシャレなレスポンシブテーマ「Sengyo」を作成しました。

Sengyoの作成者がオススメカスタマイズをご紹介したいと思います。

【参考リンク】

Sengyo – テーマ ストア – はてなブログ

 

メインビジュアルの追加

テーマ"Sengyo"のカスタマイズ例

メインビジュアルについては、すでにCSSは埋め込み済みですので、ヘッダーのタイトル下に以下を追記します。

<div id="main-visual"></div>

この1行を追加するだけでメインビジュアルを追加できます。
ちなみに、

の中は何も設定していないので、中央に文字を設定するなりオススメ記事を表示するなり自由にカスタムしてください。
また、main-visualのbackground-imgのCSSをカスタムすることで好きな背景を設定する事ができるので自由に変更して下さい。

メインメニューの追加

テーマ"Sengyo"のカスタマイズ例

メインメニューについては、html,CSS,Javascriptの追加が必要となります。

 

htmlの追加

デザイン → タイトル下に以下のhtmlを追加します。

<nav id="menu-box">
<div id="toggle"><a href="#">MENU</a></div>
	<ul id="menu" class="">
		<li><a href="#">Home</a></li>
		<li><a href="#">Chigyo</a></li>
		<li><a href="#">Kingyo</a></li>
		<li><a href="#">Tobiuo</a></li>
		<li><a href="#">Raigyo</a></li>
		<li><a href="#">Kougyo</a></li>
		<li><a href="#">Yougyo</a></li>
		<li><a href="#">Tougyo</a></li>
	</ul>
</nav>

 

 

CSSの追加

/*-----------------------------------------------------------
 ■nav-menu用CSS
------------------------------------------------------------*/

#menu {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

#menu li {
	display: block;
	float: left;
	width: 12.5%;
	margin: 0;
	padding: 0;
}

#menu li a:before {
	font-family: 'FontAwesome';
	font-size: 90%;
	padding: 0px 4px 0px 0px;
}

#menu li:first-child a:before {
	content: '\f13d';
}

#menu li:nth-child(2) a:before {
	content: '\f285';
}

#menu li:nth-child(3) a:before {
	content: '\f001';
}

#menu li:nth-child(4) a:before {
	content: '\f110';
}

#menu li:nth-child(5) a:before {
	content: '\f123';
}

#menu li:nth-child(6) a:before {
	content: '\f1bb';
}

#menu li:nth-child(7) a:before {
	content: '\f072';
}

#menu li:nth-child(8) a:before {
	content: '\f1ab';
}

#menu li a {
	display: block;
	padding: 10px 0 10px;
	background-color: #FEFEFE;
	color: #333;
	text-align: center;
	text-decoration: none;
	border-right: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
}

#menu li:last-child a {
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #BBB;
	border-left: none;
}

#menu li a:hover {
	transition: 0.4s;
	background: #A2CEFE;
}

#toggle {
	display: none;
}


/* 画面サイズが768px以下の場合に適用 */

@media only screen and (max-width: 768px) {
	#menu {
		display: none;
	}
	#menu li {
		width: 100%;
		float: none;
	}
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background: #FEFEFE;
	}
	#toggle a {
		display: block;
		position: relative;
		padding: 10px 0 10px;
		border-bottom: 1px solid #DDD;
		color: #333;
		text-align: center;
		text-decoration: none;
	}
	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		background: #2a83a2;
	}
	#toggle a:before,
	#toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 6px;
		background: #FFF;
	}
	#toggle a:before {
		margin-top: -9px;
	}
	#toggle a:after {
		margin-top: 3px;
	}
}

 

Javascriptの追加

デザイン → フッタに下記のJavaScriptを追加してください。

<!-- menu-nav -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#toggle").click(function(){
    $("#menu").slideToggle();
    return false;
  });
  $(window).resize(function(){
    var win = $(window).width();
    var p = 768;
    if(win > p){
      $("#menu").show();
    } else {
      $("#menu").hide();
    }
  });
});
/* 追記部分(メニューリンクをクリックでメニューを一旦閉じる) */
$(function() {
	var win = $(window).width();
    var p = 768;
    if(win < p)$(function(){
		$("#menu li a").click(function(){
			$("#menu").hide();
		});
	});
});
</script>

 

 

シェアボタンの追加

テーマ"Sengyo"のカスタマイズ例

有名なシェアボタンですね。
Sengyo用にCSSを加工してあるため、CSSとJavaScriptを埋め込んでください。

 

CSSの追加

/*-----------------------------------------------------------
 Socialボタンリンク
------------------------------------------------------------*/


/*share-botton*/

.share-buttons {
	margin-bottom: 10px;
	text-align: left;
}

.share-buttons .inner a {
	position: relative;
	display: inline-block;
	width: 15%;
	height: 45px;
	line-height: 25px;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	padding: 5px;
}

.share-buttons .inner .share-text {
	font-size: 13px;
}

.share-buttons .inner .hatena-bookmark-button {
	color: #008fde;
	border: 1px solid #008fde;
	background: #fff;
}

.share-buttons .inner .hatena-bookmark-button:hover {
	color: #fff;
	background: #008fde;
}

.share-buttons .inner .hatena-bookmark-button:active {
	background: #5478A5;
}

.share-buttons .inner .facebook-button {
	color: #305097;
	border: 1px solid #305097;
	background: #fff;
}

.share-buttons .inner .facebook-button:hover {
	color: #fff;
	background: #305097;
}

.share-buttons .inner .facebook-button:active {
	background: #213254;
}

.share-buttons .inner .twitter-button {
	color: #55acee;
	border: 1px solid #55acee;
	background: #fff;
}

.share-buttons .inner .twitter-button:hover {
	color: #fff;
	background: #55acee;
}

.share-buttons .inner .twitter-button:active {
	background: #0285b7;
}

.share-buttons .inner .googleplus-button {
	color: #db4a39;
	border: 1px solid #db4a39;
	background: #fff;
}

.share-buttons .inner .googleplus-button:hover {
	color: #fff;
	background: #db4a39;
}

.share-buttons .inner .googleplus-button:active {
	background: #a23629;
}

.share-buttons .inner .pocket-button {
	color: #d3505a;
	border: 1px solid #d3505a;
	background: #fff;
}

.share-buttons .inner .pocket-button:hover {
	color: #fff;
	background: #d3505a;
}

.share-buttons .inner .pocket-button:active {
	background: #b5392c;
}


/*-----------------------------------------------------------
 ■Socialリンクボタンおわり
------------------------------------------------------------*/

 

JavaScriptの追加

デザイン → フッタに追加してください。

<!--JQueryを使用-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の取得-->
<script>
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
  entryUrl = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp',
  }).then(
    function(result){ $(selcter).text(result || 0); },
    function(){ $(selcter).text('0'); }
  );
}
//Facebookのシェア数
function getFacebookCount(entryUrl, selcter) {
  entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp'
  }).then(
    function(result){ $(selcter).text(result.shares || 0); },
    function(){ $(selcter).text('0'); }
  );
}
$(function(){
  getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
  getFacebookCount('{Permalink}', '.facebook-count');
});
</script>

 

スマホ用のhtml追加

スマホ → 記事 → 記事上に下記を追加します。

 

記事上への追加

<!--SNSシェアボタン-->


<div class="share-buttons">
<span style="font-size: 8px">シェアする</span>


<div class="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>

<div class="share-count-box"><span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div>


 <span class="share-text">Bookmark!</span></a>
<!--Facebook-->
<a href="http://www.facebook.com/share.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FBwindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i>

<div class="share-count-box"><span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div>


<span class="share-text">Facebook</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TWwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i>
<span class="share-text">Twitter</span></a>
<!--Google+-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i>
<span class="share-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i>
<span class="share-text">Pocket</span></a>
</div>


</div>


 

記事下への追加

<!--SNSシェアボタン-->

<div class="share-buttons">
<span style="font-size: 8px">シェアする</span>

<div class="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>
<div class="share-count-box"><span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div>

 <span class="share-text">Bookmark!</span></a>
<!--Facebook-->
<a href="http://www.facebook.com/share.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FBwindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i>
<div class="share-count-box"><span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div>

<span class="share-text">Facebook</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TWwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i>
<span class="share-text">Twitter</span></a>
<!--Google+-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i>
<span class="share-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i>
<span class="share-text">Pocket</span></a>
</div>

</div>

<!--JQueryを使用-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の取得-->
<script>
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
  entryUrl = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp',
  }).then(
    function(result){ $(selcter).text(result || 0); },
    function(){ $(selcter).text('0'); }
  );
}
//Facebookのシェア数
function getFacebookCount(entryUrl, selcter) {
  entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp'
  }).then(
    function(result){ $(selcter).text(result.shares || 0); },
    function(){ $(selcter).text('0'); }
  );
}
$(function(){
  getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
  getFacebookCount('{Permalink}', '.facebook-count');
});
</script>

 

さいごに

追ってそのほかにもカスタマイズを追加していきます。
また、皆さんがカスタマイズした際はぜひともお知らせください。今後の参考にさせて頂きます。

ダウンロードしていただきありがとうございました。

 

らいか
カスタマイズしやすい作りにしているので、どんどん自由にカスタマイズしてみてくださいね!
テーマ"Sengyo"のカスタマイズ例

SNSへのシェアはこちらから!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて”Webのものづくりの楽しさ”に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。