アップデートと問題の修正

Plainはまだ公開したばかりで、インストールしてくださった方のブログを拝見して問題がないかチェックをしています。想定できていなかった部分やうっかりミスなど気付き次第修正をしますが、もし問題に気付かれた場合、もしくは改善の要望がありましたらこのページにコメントでお報せいただけると助かります。

(6/6)カラーの指定を微妙に変えました

このテーマはカスタマイズの下地のつもりで作ったのでカラーリングなんかはわりといいかげんなのですが、#blog-titleや.hatena-moduleの背景をそのまま使っていただいている方も多いので、より汎用的なrgba()指定に変更しました。

今回のアップデート（修正したCSS）：

/*以前*/
#aaa
#ddd
#eee

/*修正後*/
rgba(0,0,0,.33)
rgba(0,0,0,.13)
rgba(0,0,0,.07)

(01/17)#containerのmargin-bottomをpadding-bottomに変更しました

bodyのbackgroundを指定していてかつはてなフッタ（#footer）を非表示にしていると、ページ下部に白い隙間ができてしまっていました。スペーシングをmarginからpaddingに変更することでこれを改善しました。

今回のアップデート（修正したCSS）：

/*以前*/
#container
{margin-bottom: 30px;}

/*修正後*/
#container
{padding-bottom: 30px;}

(01/11)entry-footer内のcustomized-footerの順番も簡単に変えられるようにしました

entry-footer内の順番を簡単に変えられるようにしていたのに、customized-footer内（記事下関連記事や記事下HTMLが入る場所）についてはなぜかノータッチでした。順番の変え方は前回と同様です。

順番の変更例：

.entry-footer-modules
{order:2;}

.entry-footer-html
{order:1;}

今回のアップデート（追加したCSS）：

.customized-footer
{display: flex;
 flex-direction: column;}

.customized-footer > *
{order:0;}

(2018/01/08)サイドバーのプロフィールモジュールの説明欄のaタグに下線をつけました

サイドバー内の「プロフィール」はてなモジュール（.hatena-module-profile）内のaタグに下線がつくようにしました。

本来これは装飾的なスタイルなのでこのテーマの趣旨と若干ずれるのですが、使用場面を考えればここは下線が邪魔になることはないかな〜と思ったので。

今回のアップデート（追加したCSS）：

.profile-description a
{text-decoration: underline;}

(12/26)bodyのpositionをrelativeにしました

これによってfooterなどをスタイルする際にposition:absoluteを楽に使えるようになりました。

今回のアップデート（追加したCSS）：

body
{position:relative;}

(12/17)entry-footer内の順番を簡単に変えられるようにしました

.entry-footerをflexboxにしました。これによって、.entry-footer内の各要素の順番を自由に設定できます。

順番を変更する方法は、.entry-footer内の要素それぞれにプロパティ「order」を振ってあげるだけです。
デフォルトでは.entry-footer直下の要素全てをorder:0にしてあるので、たとえば最後に持っていきたい要素にはorder:1、最初にもってきたい要素にはorder:-1を振ればOKです。
もちろんひとつひとつ順番を指定することもできます。

順番の変更例：

.entry-footer-section
{order:5;}

.hatena-star-container
{order:2;}

.social-buttons
{order:1;}

.customized-footer
{order:4;}

.comment-box
{order:3;}

今回のアップデート（追加したCSS）：

.entry-footer
{display: flex;
 flex-direction: column;}

.entry-footer > *
{order:0;}

(12/14)page-archiveのmainのbackgroundの仕様を変更

記事一覧方式のトップページは.page-indexと.page-archiveの２つのクラスを持つため、アーカイブページ（カテゴリ別ページや検索結果など）にのみスタイルを施したい（記事一覧方式のトップページに影響しないようにする）場合は工夫が要ります。

アーカイブページのbackgroundについて、以前はこのようにしていました。
変更前：

.page-archive:not(.page-index)
{background:#eee;}

これだと上のコードの優先度が高くなってしまうため、カスタマイズの際に普通に.page-archive{background:yellow;}のように書いても反映されません。

よってこのように変更しました。
変更後：

.page-archive
{background:#eee;}

.page-index
{background:none;}

(12/13)ヘッダーメニュー用のクラスを追加

Plainの難点に「ヘッダーメニューが作りにくい」というのがあったと思います。
なかば無理やりサイドバーを上に持ち上げているのがその原因ですが、この点を解消するクラスを用意しました。

ヘッダーメニューを作る際にontitle-menuというクラスをつければ、メニューの位置を#blog-titleに自動で合わせられます。レイアウトを変更していても問題ありません。

ただ申し訳ないのですが、このクラスを利用いただくには旧バージョンのレイアウトのCSSを貼り直してもらう必要があります。
以前貼っていただいたのと同じ内容のものを貼り直していただくだけで大丈夫です。

またこれにあわせてヘッダーメニューをリニューアルしたのでよかったら覗いてみてください。

ontitle-menuクラスの使用例：

<nav class="my-header-menu ontitle-menu">
    <ul>
        <li>〜〜〜〜</li>
        <li>〜〜〜〜</li>
        <li>〜〜〜〜</li>
    </ul>
</nav>

(12/8)#blog-title部分のbox-sizingとfont-sizeを変更

Plainをインストールしてくださっている方のブログを拝見すると、#blog-titleとサイドバー(#box2)の高さがあっていないケースをよく見かけます。原因はブログタイトルが長いため#blog-titleのheightが200pxより高くなってしまっていることです。
本来は#box2のmargin-top(ネガティブマージン)を合わせて設定してもらえばいいのですが、なるべくそういう手間の出ないようにすこし仕様を変更しました。

修正箇所（以下のコードを追加しました）

#blog-title
{box-sizing:border-box;}

#blog-title-inner
{box-sizing:border-box;}

#title a
{font-size:100% /*以前の110%から変更*/;}

(11/10)モバイル表示時にはてなモジュールが膨張してしまう問題を修正しました。

以前は問題なかったように思うのですが、モバイル表示時にうまく画面幅にサイトが収まっていませんでした（はてなブログの仕様変更でしょうか？）
既に修正してあります。

修正箇所（以下のコードを追加しました）

.hatena-module {
  box-sizing:border-box;
}

(8/16)#mainへのbackgroundの指定がうまくいかない問題を修正しました。

無駄に.page-index #main という指定をしてしまっている箇所がありました。ご迷惑をおかけし申し訳ありません。

CSSの仕様として、たとえば
.page-index #main{background:red}という指定があると、#main{background:blue}というような指定を後からしても効きません。CSSが効かないぞというときは、そのページのクラス(.page-indexなど)や親要素のクラス(.categories{~~}で効かなければ.archive-entries .categories{~~}としてみるなど)をセレクタの前につけてみてください。

(8/7)モバイル表示時にパンくずリストに長い記事タイトルを表示した際にパンくずリストの文字が下にはみ出てしまう問題を修正しました。

個人的にはパンくずリストに記事タイトルは表示しない派なので、パンくずリストが２段になることは想定していませんでした。しかしテーマである以上表示する場合にも対応しないといけませんね。申し訳ないです。
修正前

@media (max-width: 767px) {
    #top-box
     {padding-left:1em;
      margin-top:-2em;}
}

修正後

@media (max-width: 767px) {
    #top-box
     {padding-left:1em;
      margin-top:-3.4em;
      height:3em;
      display: table;}
    .breadcrumb
     {display:table-cell;
      vertical-align:bottom;
      margin:0;}
}

なお、あわせてレイアウトの変更用CSSにも修正があります。もしパンくずリストに長い記事タイトルを表示するようなら、修正してあるのでこちらから貼り直しをお願いします。お手数おかけし申し訳ありません。
theme-plain.hatenablog.com

(8/6)記事タイトル部分のカテゴリのマウスオーバー時に色が変わらない問題を修正しました。

:hoverを書き忘れていました...
修正前

.categories a, .urllist-categories a:hover{
    color:#333;
}

修正後

.categories a:hover, .urllist-categories a:hover{
    color:#333;
}