Plain

テーマ「Plain」の見本ブログです。

はてなブログのHTML構造(idとクラス)一覧図

はてなブログのHTML構造をPlainの画面で一覧図にしました。カスタマイズに使ってください。






使い方

ここに書いてあるh1.entry-titleとかheader#blog-titleとかいうのは、その箇所の名前です。
例えばheader#blog-titleの背景を赤色にしたければ、

header#blog-title { background: red; }

とします。(#.の前の文字は省略できます。)

複数の名前が縦に並べて書いてあるときは、どの名前で指定してもOKです。ただし、そういう場合は同じ名前をもつ部分が他にある可能性が高いので、意図しない箇所にまで効果が及んでしまうことがあります(というか複数個所を一括で設定できるように同じ名前が付いているのです)。1箇所だけ指定したい場合は、だいたいは一番上の名前で指定すればOKです。

CSSの書き方については、詳しくはこちらの記事をご覧ください。
www.simonsnote.com



ページの種類ごとにスタイルを設定する

ページ名を表すクラスを使えば、ページ種類ごとにスタイルを適用できます。


トップページ(全文形式):.page-index
トップページ(一覧形式):.page-indexかつ.page-archive
記事ページ:.page-entry
カテゴリページ・月別アーカイブページ・検索結果ページ:.page-archive
プロフィールページ:.page-about


たとえばトップページだけ#blog-titleの背景を赤くしたい、のようなときは、

.page-index #blog-title { background: red; }

とします。(半角スペースを忘れずに)



全ページ共通部分

全体

f:id:simonsnote:20170802183912p:plain

ブログタイトル部分

f:id:simonsnote:20170802184623p:plain

パンくずリスト

f:id:simonsnote:20170802184639p:plain

サイドバー

オレンジ色の部分は全て.hatena-moduleというクラスで、追加でそれぞれのクラス名が付いています。赤とピンクの部分(div.hatena-module-titlediv.hatena-module-body)は省略していますが、すべてのはてなモジュールにあります。

f:id:simonsnote:20170802184701p:plain



トップページ(全文形式)と記事ページ(.page-index, .page-entry)

トップページ(全文形式)と記事ページの構造は同じです。(トップページを一覧形式にしている場合はこちら




カテゴリページ・月別アーカイブページ・検索結果ページ(.page-archive)

f:id:simonsnote:20170802184402p:plain

検索結果ページ

f:id:simonsnote:20170802184442p:plain



トップページ(一覧形式)(.page-archive .page-index)

トップページを一覧形式にしている場合、トップページは.page-index.page-archiveの2つのクラスを持ちます。なので.page-indexのスタイルの後に.page-archiveのスタイルを書くと、トップページまで上書きされてしまいます。
これを避けるにはトップページのCSSはアーカイブページの後に置くか、アーカイブページのスタイルの際に

.page-archive:not(.page-index) #blog-title { background: red; }

というようにしてください。

f:id:simonsnote:20170802184533p:plain



フッターを追加する

フッター(はてなデフォルトのフッター#footerではない)はそもそも完全にユーザーがゼロから作るものなので、Plainではなにも用意していません。

が、このサンプルブログ用にフッターを作ったので、せっかくなので提供します(笑)

HTML

「フッタ」に貼ってください(貼る場所

<footer id="plainfooter">
    <nav id="pfnav">
        <div class="pfnav-left">
            <div>
                <div class="title">見出し1</div>
                <p>なにか文章</p>
            </div>
            <div>
                <address>
                    <div class="title">お問い合わせ・プロフィール</div>
                    <p><a href="/about">id:なまえ</a></p>
                    <p>自己紹介とか</p>
                    <p>お問い合わせは<a href="お問い合わせURL">こちら</a>へお願いします。</p>
                </address>
            </div>
        </div>
        <div class="pfnav-right">
            <div>
                <div class="title">見出し2</div>
                <p>長い文章段落1</p>
                <p>長い文章段落2</p>
            </div>
        </div>
    </nav>
    <div>
        <div class="title">プライバシーポリシーとか</div>
        <div>
            <p>プライバシーポリシーとかの内容</p>
        </div>
    </div>
</footer>


CSS
/*Plainフッター*/
#plainfooter
 {margin:4rem auto;box-sizing:border-box;width:96vw;max-width:calc(730px + 2rem + 360px + 2rem);background:#aaa;padding:2em 1rem;}
#plainfooter > nav > div, #plainfooter > div
 {padding:0 2rem;}
#plainfooter *
 {color:#fff;}
#plainfooter a
 {text-decoration:underline;}
#plainfooter a:hover
 {text-decoration:none;color:#eee;}
#plainfooter nav
 {display:flex;}
#plainfooter nav > div
 {width:100%;box-sizing:border-box;}
#plainfooter nav p
 {font-size:90%;}
#plainfooter address
 {font-style:normal;}
#plainfooter nav > div > div
 {padding-bottom:2em;}
#plainfooter .title
 {border-bottom:solid 1px #fff;}
#plainfooter > div p
 {font-size:70%;margin-top:2em;}

@media (max-width: 767px) {
    #plainfooter
     {width:100vw;margin-bottom:0;}
    #plainfooter nav
     {flex-direction:column;}
    #plainfooter > nav > div, #plainfooter > div
     {padding:0;}
}



はてなフッター(#footer)のスタイルを合わせる場合は以下も追加で貼ってください。

/*Plainフッターのスタイルにはてなフッターを合わせる*/
#footer
 {font-size:80%;box-sizing:border-box;padding:0 1em;}
#footer-inner
 {display:-webkit-flex;display:flex;
  -webkit-justify-content:space-between;justify-content:space-between;
  -webkit-align-items:center;align-items:center;}
#footer *{color:#fff;} /*文字色*/
#container
 {margin-bottom:0;}
#footer
 {margin:0 auto 2em auto;}
#footer
 {width:96vw;max-width:calc(730px + 2rem + 360px + 2rem);background:#aaa;}
#plainfooter
 {margin:4rem auto 0 auto;}
@media (max-width: 767px) {#footer{margin-bottom:0;width:100vw;}}

はじめにお読みください

テーマPlainをインストールしていただきありがとうございます。

Plainはカスタマイズのためのテーマです。どんどんカスタマイズしていきましょう。このサンプルブログでもサポートしていけたらと思っています。質問などあればお気軽にコメントをください。


さて、このページではテーマをインストールしてから使い始めるまでをガイドしていきます。インストールがまだの方はテーマストアよりインストールしてください。

未スタイル部分を補完する

Plainをインストールしただけではこのサンプルブログと同じようにはなっていないはずです。Plainでは、のちのカスタマイズに影響するようなスタイリングは施してありません。そのためいくつか全く手をつけていない部分があります。すぐにカスタマイズするならいいのですが、そうでなければこのまま使うのはすこししんどいです。


そこで未スタイル部分を補う追加のCSSを用意してあります(コピペでOKです)。これを貼ればこのサンプルブログと同じような見た目になります。

カスタマイズの際はこの追加のCSSは削除してください。CSSが理解できるならこれをベースにカスタマイズしてもいいです。

レイアウトを決める

Plainはflexboxによる自由度の高いレイアウトが特長です。デフォルトでは2カラムになっていますが、1カラムにすることもできます。


レイアウトについての詳しい説明はこちらです。(いま見なくても大丈夫)


カスタマイズする

 あとはカスタマイズするのみです。ガイドを用意したので参考にしてください。

未スタイル部分について

このテーマはカスタマイズの際に障害となるようなスタイリングをしないというコンセプトのため、いくつかスタイルをしていない箇所があります。

しかしそのままでは使用に不便なので、その部分のスタイルは追加でデザインCSSに貼るコードを用意しています

カスタマイズまでのつなぎ、もしくはカスタマイズのベースとしてお使いいただけます。
(コピペでカスタマイズをするような際には、基本的にはここで用意したコードのうちその箇所にあたるコードは削除してから行ってください)


なお、未スタイル(もしくはそれに準ずる)部分は

  ・記事中の見出し
  ・目次
  ・検索ボックス
  ・ページャー
  ・フッター(はてなデフォルト)

です。追加のフッターやヘッダーメニューなどはもともと追加の構造物なので、カスタマイズのページに用意しています。

前提

デザインCSSを追加で貼ってもらうことになりますが、貼り方がわからない方はこちらを参照してください。これから載せるコードをそこにコピペするだけです。

一括設定

説明はいいからとりあえずはやくセットアップを終えたい方はこちらを貼ってもらえれば完了です。
(一括設定に検索ボックスは含まれません)

/*見出し*/
.page-entry .entry-content h3
 {border-left:solid 0.4em #505050/*好きな色にしてください*/;padding-left:0.5em;line-height:2em;}


/*目次*/
ul.table-of-contents
 {background:#eee;padding:1em;}
ul.table-of-contents::before
 {content:"目次";font-weight:bolder;}
ul.table-of-contents a
 {text-decoration:none;color:#505050;}
ul.table-of-contents a:hover
 {color:#111;}
ul.table-of-contents li
 {display:block;line-height:3em;margin-left:2em;font-size:80%;}
ul.table-of-contents li li
 {line-height:2em;}
ul.table-of-contents li li::before
 {content:"・";}
ul.table-of-contents > li > a
 {display:inline-block;border-left:solid 0.3em #505050;line-height:1.4em;padding-left:0.4em;margin-left:0.3em;}
ul.table-of-contents li li a
 {border:none;padding-left:0;margin-left:0;}


/*ページャー(2段)*/
.pager
 {display:block;
  font-size:90%;margin-bottom:1em;}
.pager > span
 {max-width:100%;}
.pager-prev
 {float:left;}
.pager-next
 {float:right;}
.pager::after
 {display:block;clear:both;content: " ";visibility: hidden;}
@media (max-width: 767px) {.page-index .pager{padding:0 1em;}}
/*ページャーの矢印の見た目を変える*/
.pager-next, .pager-next a
 {text-align:right;}
.pager a
 {display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:95%;
  -webkit-white-space: nowrap;
  -moz-white-space: nowrap;
  -ms-white-space: nowrap;
  -o-white-space: nowrap;
  white-space: nowrap;} 
.pager .pager-arrow
 {display:none;}
.pager-prev::before, .pager-next::after
 {content:"\f713";font-family:blogicon;position:relative;vertical-align:text-bottom;display:inline-block;}
.pager-next::after
 {transform:rotateY(180deg);}


/*はてなフッター*/
#footer
 {font-size:80%;box-sizing:border-box;width:100%;padding:0 1em;}
#footer-inner
 {display:-webkit-flex;display:flex;
  -webkit-justify-content:space-between;justify-content:space-between;
  -webkit-align-items:center;align-items:center;}


記事中の見出し

見出しのスタイルはこちらです。2種類あります。


目次

目次についてはこちらに用意しています。見出しに合わせてこれも2種類。


検索ボックス

検索ボックスは未スタイルではないですが、虫めがねアイコンを出したければどうぞ。


ページャー

これも2種類用意しています。


フッター(はてなデフォルト)



その他用意してあるカスタマイズ

未スタイル部分というわけではないですが、追加のカスタマイズを用意しています。ヘッダーメニューやフッターもあります。

テーマ「Plain」について

f:id:simonsnote:20170804185056p:plain

概要

テーマ「Plain」は、カスタマイズを前提とした、スタイリングを最小限に留めたレスポンシブテーマです。

以下のような特長があります。

・カスタマイズの際にCSSがぶつかりにくい(カスタマイズが楽、エラーが出にくい)
・レイアウトにflexboxを利用しているため、構造的なカスタマイズが非常に容易
・余計なスタイルシートの読み込みと書き換えがない分、軽量


基本的に自分でCSSを書ける人が対象ですが、コピペ可のカスタマイズもご紹介しています。

カスタマイズ例

Plainのカスタマイズ例です。実現するデザインCSSも掲載しています。


レイアウト

Plainはデフォルトでは2カラムですが簡単に1カラムにしたり、サイドバーの位置も変えられます。

また#main(記事本体部分)と#box2(サイドバー)のwidthを自由に設定でき、広告モジュールなどを柔軟に設置できます。

レイアウトを変える

基本的な構造

レイアウトにはflexboxを利用しています。
こちらのページで詳しく説明しています。


カスタマイズガイド、id・クラス図

カスタマイズガイドやid・クラスの図解を用意しています。



コンテンツのレスポンシブ表示

Plainには自動でレスポンシブにコンテンツの表示/非表示を切り替えるユーザー記述用divクラスを用意しています。
これを利用して、PC向け、タブレット向け、モバイル向けにユーザーが指定したコンテンツを表示することが可能です。

これに関してはこちらのページで詳しく説明しています。


ライセンス

Plainのライセンスは

です。

テーマ利用者は以下の条件に従う限り、次の行為が自由に行えます:
 ・テーマを複製、頒布、展示、実演することを許可します
 ・二次的著作物を作成することを許可します
 ・営利目的で利用することを許可します

従うべき条件
 ・作者のクレジットを表示することを求めます


つまり、自由に使って好きに改変、頒布してOKです。

Plainを元に別のテーマを作成・公開する

Plainを改変してテーマストアに公開してもらってもOKです。その際はこのページにコメントをください。



利用方法

まずテーマストアでインストールして頂き、最初にはじめにを読んでください。

なお、インストールしただけではこのサンプルブログと同じにはならないので、はじめににしたがってセットアップをしてください。(時間はかかりません)

ページャーのスタイル

このテーマはなるべくプレーン(余計なスタイリングをしていない)というコンセプトのため、デフォルトではページャーもスタイルしていません。

ページャーはなかなかプレーンにきれいなものを作るのは難しく、好みやブログの傾向(記事タイトルが長いなど)に応じてカスタマイズした方がいいです。


しかし全くスタイルしていないのも使いにくいので、こちらに2種類のページャーを用意しました。
どちらも見た目はプレーンなので、カスタマイズのベースとして使ってください。






1行に収める

f:id:simonsnote:20170731205022p:plain:w600

/*ページャー(1行)*/
.pager
 {display:block;
  font-size:90%;margin-bottom:1em;}
.pager > span
 {width:50%;}
.pager-prev
 {float:left;}
.pager-next
 {float:right;}
.pager::after
 {display:block;clear:both;content: " ";visibility: hidden;}
.pager-next, .pager-next a
 {text-align:right;}
.pager a
 {display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:95%;
  -webkit-white-space: nowrap;
  -moz-white-space: nowrap;
  -ms-white-space: nowrap;
  -o-white-space: nowrap;
  white-space: nowrap;} 
.pager .pager-arrow
 {display:none;}
.pager-prev::before, .pager-next::after
 {content:"\f713";font-family:blogicon;position:relative;vertical-align:text-bottom;display:inline-block;}
.pager-next::after
 {transform:rotateY(180deg);}
@media (max-width: 767px) {.page-index .pager{padding:0 1em;}}




モバイル表示のときなどぶつかったら2段にする

f:id:simonsnote:20170731205041p:plain:w600

/*ページャー(2段)*/
.pager
 {display:block;
  font-size:90%;margin-bottom:1em;}
.pager > span
 {max-width:100%;}
.pager-prev
 {float:left;}
.pager-next
 {float:right;}
.pager::after
 {display:block;clear:both;content: " ";visibility: hidden;}
@media (max-width: 767px) {.page-index .pager{padding:0 1em;}}

矢印の見た目を « » →   に変えたければ、追加でこれも貼ってください。

/*ページャーの矢印の見た目を変える*/
.pager-next, .pager-next a
 {text-align:right;}
.pager a
 {display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:95%;
  -webkit-white-space: nowrap;
  -moz-white-space: nowrap;
  -ms-white-space: nowrap;
  -o-white-space: nowrap;
  white-space: nowrap;} 
.pager .pager-arrow
 {display:none;}
.pager-prev::before, .pager-next::after
 {content:"\f713";font-family:blogicon;position:relative;vertical-align:text-bottom;display:inline-block;}
.pager-next::after
 {transform:rotateY(180deg);}





ページャーはレイアウトが難しい箇所です。ここで用意したレイアウトはfloatを使っていますが、positiontext-alignmarginなど工夫すればflexでつくることもできると思います。
ちなみに記事タイトルをもっと長く表示したい場合もあると思いますが、これははてなブログの仕様で最初から省略されたhtmlとなっているので、無理です。

検索ボックスのスタイル

<8/9追記:はてなデフォルト風の検索ボックスを用意しました。>

このテーマはなるべくプレーン(余計なスタイリングをしていない)というコンセプトのため、デフォルトでは検索ボックスは最小限のスタイルに留めています。

そのためにこんな見た目になっていますね↓

f:id:simonsnote:20170731105036p:plain

「検索」という文字が表示されていますが、ここはどっちかというと虫めがねアイコンの方がいいですよね。こんなかんじ↓

f:id:simonsnote:20170731105629p:plain


なんでこうなるかというと、元々はてなブログで用意されている検索モジュールのボタンにはvalue="検索"と入ってしまっているのです。CSSで虫めがねアイコンに置き換えることもできるし、実際はてな公式のテーマではわりと力技でここを虫めがねアイコンに置き換えている(なんとbackground-imageとして表示している)のですが、これはスマートじゃない。プレーンじゃありません。


ということで、別のソリューションを用意しました。
サイドバーの元々の検索モジュールは消してしまって、新しく
モジュールを追加    →     HTML
にこのコードを貼ってください。

<form class="search-form" role="search" action="/search" method="get">
      <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required="">
      <input type="submit" value="&#xf01a" class="search-module-button" style="font-family:blogicon;width:1em;">
</form>

こういうかんじで↓
f:id:simonsnote:20170801204904p:plain:w400

これで上の写真のような検索ボックスになったと思います。
うまくいかなければこのページにコメントでお知らせください。

8/9追記:はてなデフォルト風の検索ボックスを用意しました。

f:id:simonsnote:20170809132639p:plain
こちらをサイドバーのHTMLに貼ってください。

<form class="search-form" role="search" action="/search" method="get" style="padding:0 0.3em;border-radius:3px;">
      <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required="">
      <input type="submit" value="&#xf01a" class="search-module-button" style="font-family:blogicon;transform:rotateY(180deg);font-size: 120%;width: 1em;">
</form>
<style>
form.search-form input.search-module-button{color:#888}
form.search-form input.search-module-button:hover {color:#505050};
</style>