注目のはてなカスタムテーマ「Naked」を全面的に採用してしまった話。ーフッターのカスタマイズ方法も解説

当ブログのデザインの大部分を頼らせてもらっているゆきひーさん（id:ftmaccho）がついにはてなブログテーマ『Naked』をリリースしたということで早速飛びついてしまいました！

デザインを変えるのは手間がかかるので最初は様子見と思ったんですけど、フッターカスタマイズが可能という他のテーマにはない魔力に魅せられて全面的に採用することに…

現在、３つのブログを運営しようとしているのですけどそういった個人的な事情も踏まえて簡単にご紹介したいと思います。

フッターカスタマイズを必要とした理由：複数サイト持ち

ども！テスト勉強に追われていたかと思えば、読書やらブログカスタマイズやら記事執筆やらをむさぼるようにしていたとしちる（@ture_tiru）です。

テスト勉強が嫌で書いたこの記事。

社会に対抗する哲学、文明に対抗する哲学―悪魔的な「正しさ」への希求について

テスト勉強は毎回毎回、嫌でたまりませんが自分で好き勝手にする勉強は大好きです！

というわけで、そんな「自分で勉強していきたい・いくことが好きだ」という人のために（そう、僕のためだ！）作っているブログというかメディアをちょうど考えていました。

それが『Share Study』です。

このブログでは何度かこんなの作りたいって言ってたんですけど、

「いやー、こんな理想論だけで学生ごときが作ってしまうのもどうかなー。せめて院生になってからかなー。いや、博士に入った場合？それともアカデミックなポストに就いてから？はたまた学会でそこそこえらくなっちゃったりしちゃったりしてから？？いつだよ！」

「今でしょッ！！」

ってなったので留学終了直前に猛ダッシュで作っておりました。

まだまだ途中なんでまた改めて紹介していこうと思います。

フッターカスタマイズ可能の魔力

本当はWordpressで作りたかったんですけど、軌道に乗るまでの維持費とかカスタマイズの手間を考えるとなかなか取り掛かるのに億劫でした。

そんな折に、知ってしまったこのカスタマイズテーマ『Naked』はなんとフッターをいじれると！

「乗るしかない。このビッグウェーブに。」

そう、あいつが僕にささやきました。

そして気づいた時には、『Share Study β』だけではなく、同時制作中の『Discourse Guides』に果てにはこの『TIRU LABO』まで手が伸びていたという…

はてなブログテーマ『Naked』

ゆきひーさんが今回制作された新テーマ『Naked』は、

ということで、「デフォルトでも」と「フッター」以外を満たしているテーマはすでに多くあるように思います。

僕も以前は『Innocent』というすんばらしいおしゃれでカスタマイズ重視の機能的なテーマを使わせてもらいました。正直、複数のブログを持っていなかったらそのままだったと思います。

簡単にフッターをどのように作り込んだか紹介しましょう！

『TIRU LABO』のフッター

まず、こちらがゆきひーさんによる「フッター部分を作り込む方法」の記事です。

３つのブログですべて共通しているのですが、左に「Author」、中央に「Twitter」、右に「Link」となっています。

なぜこれらをフッターにしたかと言えば、それぞれそのブログでは直接関係ないものだからです。サイドバーには閲覧性をよくするために極力そのサイトに関連するもののみを入れたいと思っていました。そこでフッターに間接的に関連する要素を集めました。

「Author」のHTML構造はこんな感じです。

<div class=”hatena-module-title”>Author</div>
<div class=footer_space><img src=”画像のURL” alt=”画像の名前” width=”300″ height=”200″><div class=footer_word>説明</div></div>

順番にすると、

です。

ポイントは「footer_space」「footer_word」というdivを入れて、画像の下に書く文章をCSSでいじれるようにしたことです。あと、画像のサイズを縦に300、横に200で指定し、フッターのサイズと合わせています。divの名前は適当に付けました（笑）

「space」を「spase」とスペルミスしてたのであとで直そう…ここでは修正してあります。

「footer_space」と「footer_word」に適用しているCSSは以下のコードになっています。

.footer_space{
background-color:#fff;
}
.footer_word{
font-size:13px;
padding:13px;
color:#444;
}

CSSが<pre><code></code></pre>で囲むと黒くなるようになってる！埋め込まれてるのか、書き込んだのか忘れたけど、たぶん埋め込まれているはず… 

順に背景色、字のサイズ、文字周辺の幅、文字の色です。

ちなみに背景色は『つれちる』では「白」ですが、『Discourse Guides』ではフッターの背景色を焦茶色にしているので、記事周りの薄いグレー（#F6F6F6）に変更しています。色の濃度はなるべく合わせるのが色選びのコツです。

この設定は右の「Link」でも同様に行っています。

画像は自作です。今は「Microsoft Expression Design 4」というソフトを使ってよく加工しています。マイクロソフトが今は無料で配布しているもので、イラレほどではないにしてもそこそこいじれるので維持費をかけたくない人にはおすすめです。

もっといいのあれば教えてくださると嬉しいです(ﾎﾞｿｯ

ダウンロードはこちらで出来るのですが、そのまま赤い「Download」ボタンを押すと英語版のままになってしまうので、「Detail」を押して下にスクロールし、「Japanese」を選んでからダウンロードするように注意してください。

「Twitter」のTLは公式サイトのものから作ってそのままHTMLを埋め込みました。

「設定」→「ウィジェット」→「新規作成」から簡単に作れます。全サイトで高さは400pxにしました。あんまり長いのも見栄えが悪いなと思ったので。

※ 追記

調整し直して結局、デフォルトの600pxに戻しました。

微妙にコピーライトの上に線を入れてあるのですが、これはまたの機会に書きたいと思います。

一日いじってもうさすがに疲れてきたし長いので（笑）

一日カスタマイズした感想と「ゆきひーさん」のブログ

というわけでこんな感じでフッターを活用させてもらいました

まだ導入して１日目なので、いろいろカスタマイズしていくと思います。

とりあえず、『Naked』だとサブカテゴリーもすべて表示する標準の仕様のようなので、そろそろカテゴリーの見直しと整理をしなくちゃなと…

正直、「続きを読む」ボタンとか「見出し」とかほとんどいじれていないので不満です（笑）

普通に書いたら上手く上書きできなかったので、消したりしなきゃいけないようですがちょっとめんどくさかったので放置！

ゆきひーさんのカスタマイズで使わせてもらっていたものも一部このテーマだと上手くいかないところもありました。サイドバーのフォローボタンのリンクの色が変わってしまったりトグルメニューだったり。

たぶん、どこか邪魔しちゃっていたり合わない仕様のとこもあるのでしょう！

こちらのブログにて専用のカスタマイズ方法を公開していくとのことなので、気長に待ちながら自分でもまたいじってみたいと思います。

こちらが本家『Yukihy Life』！

マ・クベならぬマ・チル的には最高です。

「これは…いいテーマだ…」

では～