WEB配色からCSSクラスタのまとめ方まで。困った時に知りたい時のあれやそれ。Q&Aページを作りました。多数のCSSカスタム適用済のコンテンツ制作に最適なテーマCONTENTSを発表2016-05-25多数のCSSカスタム適用済のコンテンツ制作に最適なテーマCONTENTSを発表テーマ執筆の息抜きにと思いテーマを作成していたのですが、コツコツと作り進めやっと完成をしました。本当は執筆後にと思っていたのですが、ブログを書かずにテーマの作成を進めてしまいました。実際に今このブログにもテーマを適用しています。見え方としては今見ているページのようになります。ちなみに現在はPCのみに対応しているので、スマホ等から見ている方ははてなページのままだと思います。2016年5月29日にレスポンシブデザインに対応しました。※スマホ用のCSSは後の記事で一覧をまとめて書きます。今回作ったテーマのコンセプトは、「主役はコンテンツ」と言うことで、よりコンテンツ作りに集中してもらえるようなテーマを作ろうという所から出発し、見てくれるユーザーからも見やすくするために全体的に余白や文字の間隔等にも余裕をもたせいます。楽しまれるような実用的なテーマを目指して来ました。その想いが現れるように、CONTENTSのテーマの中に実用的な仕掛けを取り入れました。使える機能は追々マイナーチェンジを繰り返しながら増やしていこうかと思っています。テーマ「CONTENTS」について説明をしていきます。レスポンスデザイン解説ページコンテンツ制作に役立つ仕掛け蛍光マーカーこれは目立たせたい言葉や文章に蛍光マーカーを付けたように見せる機能になります。はてなブログの記事作成画面で「B(太文字)」を適用すると、赤の蛍光マーカーになります。HTMLにクラス名「markb」を付ける事により青の蛍光マーカーになります。column欄コンテンツの中に執筆者のコメントや想い等を書く時に利用してもらえるようにコラム欄を用意をしました。今の所種類としては三種類になります。基本的に使い方としては自由ですが例として、各枠に説明を付けておきました。※文章の中のある特定のキーワード等に対して更に詳しい情報等を書く時に利用します。専門用語を解説する時等に利用しても良いでしょう。※記事中等に少しコラム等を書きたい時に利用します。コーヒーブレイクや回顧録等を書く事でユーザーとの距離感を縮めたりする効果もあり。※注意点等がある時に使用します。枠に書くことで特に注意を強くする意味合いがあります。注意をひくために記事中に書いている事をあえてもう一度ここに書いても良いでしょう。使い方は上のソースのようにクラス名を指定してもらえれば使う事が出来ます。利用したコンテンツをよくみかけますが、それも簡単に利用出来るようにCONTENTSのテーマの中にはCSSを適用済です。表示は以下のようになります。HTMLを使用していただく事と画像は各自CSSで指定をもらう必要があります。アイコン画像は縦横100PXで表示されています。画像が大きくても縮小されるようになっていますが(デモで使用しているのは縦横300px)、読み込みの時に画像が重くなってしまいますので、大きすぎない方が良いと思います。比率異なる画像も使用出来ますが、使用されるのは画像の中心部分となります。※上の表示は画像形式にしてあります。名前と文章を指定の場所に入れます。これで会話形式で表示する事が出来ます。改行は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のテーマにソースを貼り付けると下のように表示されます。7月15日追加)※上の表示は画像形式にしてあります。ブログ全体の表示部分コンテンツ以外には、手作業で入れる事になりますが、グローバルメニューやその下のエリアのリコメンド枠と題して、見てほしい記事の紹介を出来るエリアを設けました。フッターエリアにも3カラムのエリアを用意しています。続きを読むやページャーのカスタムも実装済です。グローバルメニューグローバルメニューには標準で4つのメニューを入れる事が出来ます。グローバルメニューにはあまり多くのメニューを入れるのではなく、全体の共通メニューや特集を入れる場所という意味合いがあります。多く入れすぎてもユーザーにはわかりにくいので、適度な量に押さえています。最後の枠にはサーチフォームを入れています。基本的にリンク先のURLとブログ上に表示される表記名を入力すれば使う事が出来ます。サーチフォームにはURLの後に/searchを入れる必要があるので消さずにURLを入力またはコピペして下さい。独自ドメインの場合は独自ドメインを記入する。現在、グローバルメニュー内のサーチフォームは表示させないようにしています。リコメンド枠ここの枠には注目してほしい記事や人気の記事等を表示させる枠になります。特集やカテゴリー等にリンクさせても良いと思います。表示させるのは手動ですが、HTMLは簡単なので、是非使ってみて下さい。今後の予定としては自動化とトップページのみ、表示させるようにしていきたいと考えています。フッター枠フッターにも表示枠を用意しました。今回は3カラムで表示をしていますが、後で他のカラムにも対応出来るように使用を変更していくと思います。SNSのタイムラインやリンクを貼るも良し、サイトマップやカテゴリーを貼るも良し、サイドバーモジュールを利用して注目の記事や人気記事を貼る事も出来ます。最後にCopyrightを表示させています。コピーライトのみ利用したい場合はコードのコピーライト部分のブロックのみコピペしてください。使用方法は自由なのですが自由すぎるので、フッターに関してはまた別の記事で紹介をしていこうと思っています。続きを読む、ページャページャーは下の図のように表示されます。タイトルは一行でも二行になっても枠の高さに変更はありません。矢印の部分をクリックしてもリンクされるようになっています。続きを読むはシンプルな表示になっています。マウスオーバーで背景色がグレーに変更になります。AdSenseAdSenseの表示はサイドバーが300×250、記事下は336×280が横に2つ並べて表示する事が可能です。300×250を2つ表示しても構いません。レスポンシブデザインを適用する場合は縦に並んでしまうので、この表示方法では問題があります。分からない場合は記事上や記事下、サイドバーなどに分けてAdSense広告を貼ると良いでしょう。レスポンシブデザインでAdSense広告が縦にならんでしまう時の対処方は以下の記事にも詳しく書いています。DREAMARK最後に簡単な説明になりましたが、これがテーマCONTENTSの概要になります。箇所に合わせて説明等記事で書いていこうと思っています。皆様よろしければ、お使いいただければ嬉しいです。テーマのインストールは下記よりしていただく事が出来ます。テーマをインストールする際には各自が現在デザインCSSに指定しているCSSや背景画像が破棄されてしまうので、インストールする際はバックアップを忘れないようにして下さい。GuideBook...2016-07-12CONTENTS×日本の夏。新色のリクエストを募集します。今回から普通の記事に戻ります。題材的にはかなり一部の人向け...2016-07-09私のもう一つのブログがついにベールを脱ぐ!先にもう一つのブログで発表をしたので、ご存知の方もいるかも...2016-07-07私の執筆した本の発表と予約開始。読者目線や立場になって考えると言うこと。GuideBookを執筆しました。カスタマイズやデザイン、WEB系(SEOやWEBマーケティング)の事を書いていきます。GuideBookを執筆しました。はてなIDの取得からブログ解説。Proや独自ドメインへの変更の説明やSNSとの連携。カスタマイズに広告やアフィリエイトの設置まで。はてなブログの解説書。GuideBookThemeはてなブログでテーマをを公開しています。「主役はコンテンツ」をコンセプトに、おしゃれで機能的で、使いやすく見やすいテーマを作りました。グローバルメニューやフッターに加えリコメンド欄や対話式のCSSも適用済です。ヨメレバとカエレバも適用済。コンテンツ作りに集中していただけるようなテーマになっています。無料で使用出来るので、是非ご利用下さい。合わせて読みたいおすすめ記事2017-01-05現在制作中であるはてなブログの新テーマの概要を紹介します。おかげさまで、...2016-07-12CONTENTS×日本の夏。新色のリクエストを募集します。今回は私が公開しているはてなブログのテーマ「CONTE...2016-06-14困った時に知りたい時のあれやそれ。Q&Aページを作りました。WEB配色からCSSセレクタのまとめ方まで。私はテーマCONTENTSを一つの作品だとは思っていませ...2016-06-08はてなブログ独自のスマホページにもCSSを対応させるコードを紹介。reserved.TOPへ引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。