はじめに
前回は､主に､コードやキーワードなどを綺麗に見せる方法を紹介したと思いますが､今回は､トップ画面の編集を中心に紹介していきたいと思います｡
バックナンバー
ブログのカスタマイズまとめ for Blogger vol.1
ブログのカスタマイズまとめ for Blogger vol.2
使用するテンプレートは､Blogger SimpleTemplateというもので､最初から入っています｡ただし､管理画面から テンプレート > カスタマイズ > テンプレートで当該テンプレートを選択する必要があるかもしれません｡
ちなみに､分からなくなったら､サイトをブラウザで表示し､Chromeの場合は､Cmd+Alt+iでも押してください(要素の検証)｡Windowsの場合は､F12だったような気がします｡Escを押して対話と切り替えながら使えます｡
私は､Shift+Cmd+cのほうをよく使います｡
CSS3 dropdown menu
CSS3 dropdown menuを使用します｡しかし､デフォルトでは､丸すぎるので､そのまま使用するわけではなく､変更箇所があります｡
<div class='header-cap-bottom cap-bottom'>を検索して､その上に以下を追記します｡
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
"続きを読む"をアイコンにする
.button01 a {
background: #EEE;
padding: 3px 12px;
border: 2px solid #CCC;
text-decoration: none;
color: #000!important;
border-radius: 3px;
-webkit-transition: all 0.3s ease;
}
.button01 a:hover {
border: 2px solid #06c;
background: #06c;
color: #fff!important;
}
data:post.urlとでも検索し､以下の様な箇所を見つけます｡
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class="button01"><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div></div>
</b:if>
"ホーム"と"古い投稿"と"新しい投稿"をアイコンに変更する
画面下に表示される"ホーム"と"古い投稿"と"新しい投稿"をアイコンに変更する方法を紹介します｡先ほど"続きを読む"のために書いたCSSを流用しましょう｡
backup(バックアップ)の部分を検索でもして下のように書き換えてください｡
<!--"###新しい投稿###"-->
<span id='blog-pager-newer-link'>
<div class='button01'><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Next</a></div>
</span>
<!--###"新しい投稿"backup
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
### -->
</b:if>
<b:if cond='data:olderPageUrl'>
<!--###"古い投稿"###-->
<span id='blog-pager-older-link'>
<div class='button01'><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Prev</a></div>
</span>
<!--###"古い投稿"backup
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
### -->
</b:if>
<!--###"ホーム"###-->
<div class='button01'><a class='home-link' expr:href='data:blog.homepageUrl'>HOME</a></div>
<!--####"ホーム"backup
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
### -->
ページャーをカスタマイズする
画面下に表示されるページを移動するための領域をページャーということがあります｡ボディが小さすぎたため､上で紹介したアイコンが全部表示できないため､カスタマイズしてみます｡
.blog-pager {
padding: 20px;
border: solid 2px #ffffff;
border-top-color: #F2F2F2;
}
ラベルのスタイルをカスタマイズする
Label Design #3を使います｡
後は､管理画面の レイアウト > ウィジェットの追加からラベルを選択すればいいと思います｡
記事タイトル下にラベルを表示する
上で紹介したラベルはそのままカラムにでも表示しておけばいいともいますが､それではもったいないので､ついでにタイトル下にも表示してみましょう｡
<div class='post-header-line-1'/>を検索して､その下に以下を追記します｡2箇所くらい存在していた場合は､<div class='post-header'>の在る場所です｡
<div class='label-size'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
</b:loop></b:if></span></div>
</div>
パンくずリストを表示する
パンくずリストとは､ブログの構造を分かりやすく表示してくれるものだと考えてもらえればいいと思います｡現在地がはっきりと分かるので､結構便利です｡
パンくずリストの見栄えを変更する
パンくずリストをBreadcrumb Designs #3を使って表示してみます｡
記事タイトル下に日付を表示する
記事を投稿した時の日付を表示する
今回のカスタマイズでこれが一番ハマりました｡通常は､以下のタグを使用すると､日付を表示することができます｡
<data:post.dateHeader/>
かし､なぜか表示されないと思ったら､管理画面 > レイアウト > ブログの投稿より日付にチェックを入れなければならないのです｡
同じ日付でも繰り返し表示する
デフォルトでは､上で使用するタグは､同日日付を繰り返し保存しないため､同日日付で投稿した記事には､いくつか日付を表示できないものが存在してしまいます｡
<div class='datebox'>
<script type='text/javascript'>
var timestamp = "<data:post.dateHeader/>";
</script>
<span class='date'><script type='text/javascript'>document.write(timestamp);</script></span>
</div>
Web Fonts
Web Fontsを使用することで､様々な表現が可能となります｡もちろん､フォント自体の美しさもあるかと思いますが､Icon Fontsなるものも存在します｡
これは､アイコンを画像ではなく､フォントとして扱おうというものです｡
以下､関連サービスなどを紹介してきたいと思います｡
Google Web Fonts
Google Web Fontsというものがあります｡これを使うことで､Bloggerでもカスタムフォントを使えるようになるらしいです｡
Bloggerでカスタムフォントを使うには､ こちらの記事が参考になります｡
We Love Icon Fonts
We Love Icon Fontsというものがあります｡これは､アイコンをフォントのように利用するものです｡CSSの記述から使用できるので､非常に便利そうです｡使えるフォントの種類は､8種類あるようです｡記述は使用するものだけでOKです｡
@import url(http://weloveiconfonts.com/api/?family=brandico|entypo|fontawesome|fontelico|maki|openwebicons|typicons|zocial);
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* fontelico */
[class*="fontelico-"]:before {
font-family: 'fontelico', sans-serif;
}
/* maki */
[class*="maki-"]:before {
font-family: 'maki', sans-serif;
}
/* openwebicons */
[class*="openwebicons-"]:before {
font-family: 'OpenWeb Icons', sans-serif;
}
/* typicons */
[class*="typicons-"]:before {
font-family: 'Typicons', sans-serif;
}
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
ここで､例えば､ entypoの entypo-homeを使ってみるとします｡
<span class="entypo-home"></span>
または､
<ul>
<li class="entypo-home"></li>
</ul>
または､
<div class="entypo-home"></div>
…etc
以下を追記すると､BloggerでもWe Love Icon Fontsのカスタムフォントを使用できるようになります｡ 追記する場所は､<head>の下です｡
<link href='http://weloveiconfonts.com/api/?family=brandico|entypo|fontawesome|fontelico|maki|openwebicons|typicons|zocial' rel='stylesheet' type='text/css'/>
具体的な使用例
/* Menubar に表示してみる */
<li><a href='http://mba-hack.blogspot.jp/'><span class='entypo-home'/> HOME</a></li>
/* Pager に表示してみる */
<span id='blog-pager-newer-link'>
<div class='button01'><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><span class='fontawesome-backward'/> Next</a></div>
</span>
/* Breadcrumb Navigation に表示してみる
<b:includable id='breadcrumb' var='posts'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'><div class='entypo-home'/></a>
…
Demo
5 Use Cases for Icon Fontsという記事に注目のデモ動画が公開されています｡すごいですね｡
はてなブログパーツ
はてなブログパーツを設定し､コードを取得します｡ここで､このコードをそのまま貼り付けるのではなく､一部変更することで､ 1usersの記事でも表示することができます｡
<script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url = "http://mba-hack.blogspot.com/";
Hatena.BookmarkWidget.title = "人気エントリー";
Hatena.BookmarkWidget.sort = "count";
Hatena.BookmarkWidget.width = 250;
Hatena.BookmarkWidget.num = 7;
Hatena.BookmarkWidget.theme = "default";
Hatena.BookmarkWidget.load();
</script>
なお､Bloggerでこのブログパーツを使用する場合は､URLを .jp/ではなく､ .com/のようにする必要があります｡
ZenBack
ZenBackに登録することで､SNSや関連記事などをブログに表示してくれるコードを取得できます｡メールアドレスとパスワードの設定､ブログの登録という手順を踏めば､すぐにでもコードを発行してくれます｡簡単で便利です｡
Bloggerの場合は､発行されたコードに// <![CDATA[と// ]]>の記述を加える必要があります｡ちなみに､コードを貼り付ける場所は､<b:include data='post' name='comments'/>の上です｡
<!-- X:S ZenBackWidget --> <script type='text/javascript'>
// <![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//mba-hack.blogspot.jp/&nsid=7953757295748925489324532426&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script> <!-- X:E ZenBackWidget -->
Qiita Widget
APIの公開にともなって､Qiita Widgetが公開されています｡とてもいいですね｡
Searchbox in Menubar
メニューバーの中に検索フォームを埋め込む方法です｡
<span class='entypo-search'/> <form action='http://mba-hack.blogspot.jp/search' id='searchthis' method='get' style='display:inline;'><input id='b-query' maxlength='280' name='q' size='15' type='text'/>
</form>
上のタグをメニューバーの <li>タグ中に入れます｡ちなみに､ sizeはフォームの長さで maxlengthは､最大入力文字数です｡
DISQUS
コメントフォームにDISQUSのウィジェットを使用するといい感じです｡
まず､DISQUSにてアカウント登録した後､Blogger専用ページに移動し､add site "xxxx" to Bloggerをクリックします｡
SNSアイコン
スクロールしても画面上に固定されるSNSアイコンは､同じくstylifyyourblogで紹介されているSmall Buttons Left Alignedを使います｡
しかし､これをそのまま使うと Safariや Firefoxでブログを開いた場合､以下の様な表示が出てきます｡
したがって､以下の記述を削除します｡
<script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>
フォントの変更
個人的には､デフォルトで設定できるフォントで十分かと思いますが､変更してみるのも面白いかもしれません｡
<!--###最強フォント
http://wada811.blogspot.com/2012/12/best-css-font-family.html
### -->
body {
font-family: Verdana, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-size: 14px;
line-height: 18px;
font-weight: normal;
}
見出しタグを吹き出し型にする
見出しタグを吹き出し形式にしてみます｡
.post h2{
position:relative;
margin-bottom:20px;
padding:10px 10px 10px 20px;
background-color:#ECECEC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
}
.post h2:before{
content:"";
position:absolute;
width:0px;
height:0px;
top:100%;
left:30px;
border-style:solid;
border-width:20px 20px 0px 3px;
border-color:#ECECEC rgba(192,192,192,0);
}
最後に
次は､モバイルテンプレートをカスタマイズする方法でも書こうかなと考えています｡よろしくお願いします｡