執筆の息抜きにと思いテーマを作成していたのですが、コツコツと作り進めやっと完成をしました。本当は執筆後にと思っていたのですが、ブログを書かずにテーマの作成を進めてしまいました。実際に今このブログにもテーマを適用しています。見え方としては今見ているページのようになります。ちなみに現在はPCのみに対応しているので、スマホ等から見ている方ははてなページのままだと思います。
２０１６年５月２９日にレスポンシブデザインに対応しました。
※スマホ用のCSSは後の記事で一覧をまとめて書きます。
今回作ったテーマのコンセプトは、「主役はコンテンツ」と言うことで、よりコンテンツ作りに集中してもらえるようなテーマを作ろうという所から出発し、見てくれるユーザーからも見やすくするために全体的に余白や文字の間隔等にも余裕をもたせいます。そして楽しまれるような実用的なテーマを目指して来ました。その想いが現れるように、CONTENTSのテーマの中に実用的な仕掛けを取り入れました。
まだまだ使える機能は追々マイナーチェンジを繰り返しながら増やしていこうかと思っています。まずはテーマ「CONTENTS」について説明をしていきます。
コンテンツ制作に役立つ仕掛け
蛍光マーカー
これは目立たせたい言葉や文章に蛍光マーカーを付けたように見せる機能になります。はてなブログの記事作成画面で「B（太文字）」を適用すると、赤の蛍光マーカーになります。
HTMLにクラス名「markb」を付ける事により青の蛍光マーカーになります。
column欄
コンテンツの中に執筆者のコメントや想い等を書く時に利用してもらえるようにコラム欄を用意をしました。今の所種類としては三種類になります。基本的に使い方としては自由ですが例として、各枠に説明を付けておきました。
使い方は上のソースのようにクラス名を指定してもらえれば使う事が出来ます。基本的にspanではなくdivで囲んで下さい。
対話形式
対話形式を利用したコンテンツをよくみかけますが、それも簡単に利用出来るようにCONTENTSのテーマの中にはCSSを適用済です。まずは表示は以下のようになります。HTMLを使用していただく事と画像は各自CSSで指定をもらう必要があります。アイコン画像は縦横１００PXで表示されています。画像が大きくても縮小されるようになっていますが（デモで使用しているのは縦横３００px）、読み込みの時に画像が重くなってしまいますので、大きすぎない方が良いと思います。比率異なる画像も使用出来ますが、使用されるのは画像の中心部分となります。
※上の表示は画像形式にしてあります。
まずはHTMLの部分です。名前と文章を指定の場所に入れます。これで会話形式で表示する事が出来ます。改行はShift＋Enterでして下さい。HTMLなら<br>です。Enterのみの<p>タグを使う場合は<p></p>を最初からいれておくと使う事が出来ます。
画像を指定するには下記のCSSの画像のURL（fotolifeを使う時はhttp://から）を記入して、自分のはてなブログのデザインCSSに貼り付けます。特に個人的にCSSでアイコンを指定しない場合は上の画像のような表示になります。私が簡単に作ったものなのでご自由のお使い下さい。
※他のCSSも適用しているので、他のテーマにこのHTMLとCSSだけ入れても使用する事は出来ません。カスタマイズ用はこれから記事で書く予定です。
※２０１６年６月２日追記
自分用と相手用のCSSが反対になっていました。現在は修正しています。
カエレバ・カエレバデザインCSS適用済
カエレバとヨメレバのCSSを適用しています。カスタマイズCSSを適用済です。カエレバ、ヨメレバでamazlet風-2(cssカスタマイズ用)を選択してパーツを作ってcontentsのテーマにソースを貼り付けると下のように表示されます。
CSS適用済カエレバ対応店
- Amazon
- 楽天市場
- ヤフーショッピング
CSS適用済ヨメレバ対応店
- Amazon
- Kindle
- 楽天ブックス
- ７Net
- 図書館（New ７月１５日追加）
※上の表示は画像形式にしてあります。
ブログ全体の表示部分
コンテンツ以外には、手作業で入れる事になりますが、グローバルメニューやその下のエリアのリコメンド枠と題して、見てほしい記事の紹介を出来るエリアを設けました。またフッターエリアにも３カラムのエリアを用意しています。続きを読むやページャーのカスタムも実装済です。
グローバルメニュー
グローバルメニューには標準で４つのメニューを入れる事が出来ます。元々、グローバルメニューにはあまり多くのメニューを入れるのではなく、全体の共通メニューや特集を入れる場所という意味合いがあります。あまり多く入れすぎてもユーザーにはわかりにくいので、適度な量に押さえています。最後の枠にはサーチフォームを入れています。
基本的にリンク先のURLとブログ上に表示される表記名を入力すれば使う事が出来ます。サーチフォームにはURLの後に/searchを入れる必要があるので消さずにURLを入力またはコピペして下さい。独自ドメインの場合は独自ドメインを記入する。
現在、グローバルメニュー内のサーチフォームは表示させないようにしています。
リコメンド枠
ここの枠には注目してほしい記事や人気の記事等を表示させる枠になります。特集やカテゴリー等にリンクさせても良いと思います。表示させるのは手動ですが、HTMLは簡単なので、是非使ってみて下さい。今後の予定としては自動化とトップページのみ、表示させるようにしていきたいと考えています。
フッター枠
フッターにも表示枠を用意しました。今回は３カラムで表示をしていますが、後で他のカラムにも対応出来るように使用を変更していくと思います。SNSのタイムラインやリンクを貼るも良し、サイトマップやカテゴリーを貼るも良し、サイドバーモジュールを利用して注目の記事や人気記事を貼る事も出来ます。最後にCopyrightを表示させています。コピーライトのみ利用したい場合はコードのコピーライト部分のブロックのみコピペしてください。
使用方法は自由なのですが自由すぎるので、フッターに関してはまた別の記事で紹介をしていこうと思っています。
続きを読む、ページャ
ページャーは下の図のように表示されます。タイトルは一行でも二行になっても枠の高さに変更はありません。矢印の部分をクリックしてもリンクされるようになっています。
続きを読むはシンプルな表示になっています。マウスオーバーで背景色がグレーに変更になります。
AdSense
AdSenseの表示はサイドバーが300×250、記事下は336×280が横に2つ並べて表示する事が可能です。もちろん300×250を2つ表示しても構いません。
レスポンシブデザインを適用する場合は縦に並んでしまうので、この表示方法では問題があります。分からない場合は記事上や記事下、サイドバーなどに分けてAdSense広告を貼ると良いでしょう。
レスポンシブデザインでAdSense広告が縦にならんでしまう時の対処方は以下の記事にも詳しく書いています。
レスポンシブでレクタングルのみを表示させ横並びにする方法とスマホで縦並びになる時の解消法 - DREAMARK
最後に
簡単な説明になりましたが、これがテーマCONTENTSの概要になります。また箇所に合わせて説明等記事で書いていこうと思っています。皆様よろしければ、お使いいただければ嬉しいです。
テーマのインストールは下記よりしていただく事が出来ます。テーマをインストールする際には各自が現在デザインCSSに指定しているCSSや背景画像が破棄されてしまうので、インストールする際はバックアップを忘れないようにして下さい。
