はてなブログの人気テーマ「Innocent」を導入してデザインをちょこちょこいじってみた

はてなブログに移転して約半年。常々スマホ版のデフォルトの表示が物足りないなと思ってたんだけど、無料版ではそちらのデザインはいじれないらしい*1。唯一の例外は、PCでもスマホでも、単一のCSSから？閲覧に最適な状態に変化させる「レスポンシブデザイン」にすること。で、そのためにブログ全体のデザインをはてなブログテーマ「Innocent」に変更した。これまで使っていた「timeline-minimal」も見栄えという点では不満なかったんだけど……。

テーマを選んだ際の基準は、タイトル下にメニューバーなどを並べられる「グローバルナビゲーション」が容易に導入できるということ。

その後、「Innocent」をベースとして、自分好みのサイトを作るために、こことは別のCSS練習用非公開ブログで色々試行錯誤してきて、この度無事に~~色々諦めた~~公開と相成った。閲覧している方にとってこの変更で一番大きな要素は、

トップページに一度に表示される記事数を増やすため、全記事に「続きを読む」をつけるようにした。何百字以上の記事は自動で挿入されるようになる機能とかあれば便利なんだけど、そういうのはないらしい。
SEO対策のためにカスタムURLを導入した。今後は記事ごとの個別リンクが"https://sube4.hatenadiary.jp/entry/2016/05/28/194248”から"https://sube4.hatenadiary.jp/entry/innocent-design-custom”のようになる。過去記事はURLを変えるとかえってよろしくないそうなので、今のところいじってない

の２点だろうか。作ってる時に心がけたのは「昔のホームページ」感*2。人気記事モジュールとかは、［このブログはこんなに読まれています」的なことをアピールするのにいまだに気恥ずかしさが残っているので、使わない。

以下は、他所様から持ってきたり自分でいじったりしたものがごっちゃになってて公開するようなものではないんだけど、悪戦苦闘した結果をメモとして残しておく。

編集のために
- CSS編集はDropbox経由でエディターソフトから
- 記事の編集画面をユーザースタイルシートでカスタマイズ
全体のレイアウト
ページごとのカスタマイズ
デザイン
あれば便利そうな奴
その他

編集のために

CSS編集はDropbox経由でエディターソフトから

http://moonnote.hateblo.jp/entry/2015/12/31/103000

記事の編集画面をユーザースタイルシートでカスタマイズ

https://neetwork.hatenablog.jp/entry/20150312/1426093940

残念ながら上記二つは自分では何故かうまく動かせなかった。

全体のレイアウト

何かと参考になる、はてなブログ全体の階層構造

https://kyabana.hatenablog.jp/entry/2013/04/04/133728

それと、「Innocent」のCSSは下記。

https://hatenablog.com/theme/6653586347149180725.css

1カラム→2カラム、トグルメニュー→横並びメニューに変わる基準の横幅を変える

https://moonnote.hateblo.jp/entry/innocent-hatenablog-theme

リンク先の通りレスポンシブデザインは横幅によってデザインが自動で切り替わっていくけど、1カラム→2カラム、ナビゲーションバーがトグルメニュー→横並びになるタイミングがちょっと早いかなと感じたので、CSS中の「Layout」というところの

@media screen and (min-width: 540px) {

#blog-title-inner,
#content-inner,
#footer-inner,
.breadcrumb-inner {
padding-left: 36px;
padding-right: 36px;
}

#top-box,
#content {
padding-top: 36px;
}

}

この、幾つかある「@media screen and～」から始まる行の数字をいじくって色々変えてみた。多分デフォルトのデザインが最適解だとは思うけど、一番閲覧するのが自分だと考えると自分が気に入ったものにするのが一番だとは思うので……。

サイドバーの幅を変更

https://moonnote.hateblo.jp/entry/customize-blank-layout

製作者が同じテーマ「Blank」のこの解説が参考になった。

ページごとのカスタマイズ

トップページ

<https://moonnote.hateblo.jp/entry/2016/01/18/100000

一番最初の画像を設定してやらないといけない、というのが面倒だったのでやってない。

プロフィール

https://sube4.hatenadiary.jp/entry/1000/01/01/000000

公式のプロフィールページは書けることが少ないので、通常の記事として書いた詳細なものにリンクを貼る。あるURLのみ任意のHTMLを差し込むというスクリプトを組んでみました - Yukihy Lifeで、元のプロフィールページから詳細なページヘの導線も用意した。

404ページ

https://wepli-dot2.hatenablog.com/entry/404-customize-hatena

記事一覧ページ

[d] はてなブログ : アーカイブページをテーブルレイアウトの一覧表示にする - detourist.net

はてなブログの記事一覧ページ（archiveページ）のサムネイル画… - 人力検索はてな

一覧といいつつ一覧性の低さが気になっていたので、上の2つを参考にサムネ画像と記事説明文を消して行間を詰めた。はてなダイアリーはデフォですっきりしてたのに！

デザイン

Webアイコンフォント「Awesome」を導入する

https://wedges.hatenablog.com/entry/2015/03/05/142400

https://h2ham.net/font-awasome

https://qiita.com/ttskch/items/741a272794cff9e72e27

見栄えを考えてナビゲーションバーは英字で統一してみたけどこれだけだと分かりづらいかなあと思ったので。日付や本文の方のカテゴリなどにも。

googleフォントを導入する

https://on-ze.com/archives/2629

あんまり使い過ぎるとページが重くなるそうなので、とりあえずタイトルだけ。

検索ボックスなどの角を丸める

https://www.bad-company.jp/box-shadow/

直角だと目立ちすぎるので。

日付などに続き文章を書く時、２行目以降を字下げして見やすくする奴

https://worpre-lab.com/customize/text_indent/

このブログでは、サイドバーの「予定」欄で使ってるやつです。

youtube等、iframeの中央寄せ

https://webfood.info/how-to-center-affiliate-link/

うちのブログの場合は上記の記事を参考に、中央寄せじゃなくて左右に３%ずつ余白を作りました。

横幅が狭くなってサイドバーが本文下に回りこんだ時、２分割表示する

https://www.yukihy.com/entry/blog-custom-others

多分プロフィールやおすすめリストなどをhtmlで自分で書いてるせいだと思うんだけど、表示がガタガタになってしまった。ので、うちでは「display:inline-block」と「vertical-align: top」を使い、どうしても要素が重なるのを修正できなかったところは「display:none」で非表示にした。

あれば便利そうな奴

はてなキーワードの下線を消す

https://akiueo.hatenablog.com/entry/underline-customize-hatenablog

はてなダイアリー時代からの定番。

記事下のソーシャルボタン

https://bulldra.hatenablog.com/entry/viral-share-button

https://bulldra.hatenablog.com/entry/tweet-share

【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - Backflowから選んで、上記のやつを。このブログではひとつのボタン当たりのサイズを33%にすることで一列表示にしてます。

https://bulldra.hatenablog.com/entry/read-together-g

元々２番めのやつを使ってたんだけど、デザインをうまくなじませることができなかったので１番目のやつを。サイドバーのモジュールをそのまま記事下に持ってくるやつとどっちにしようか迷ったけど。

「TOPへ戻る」ボタンを表示する

https://nohack-nolife.hatenablog.com/entry/2014/11/28/150712

https://azanaerunawano5to4.hatenablog.com/entry/2015/08/04/110947

上記の例ではページの右下に来るように配置されてるんだけど、これだとサイドバーアリの時に目に入りにくいかなあと思ったので、その時は記事本文とサイドバーの境界線近辺に表示されるようにしてみた。

/* サイドバーあり */
@media screen and (min-width: 900px) {

#page-top{
margin-right: 28%;

}

記事の一部を隠す

https://www.yukihy.com/entry/slide-down-up

行ごとの指定になっちゃうのが難点だけど、ネタバレ防止などに。背景色と文字色を同じにして見えなくさせる反転文字っていう昔ながらのアナログな手法だと、スマホでは範囲選択しても表示されないんですね……。この作業中に気がつきました。

公式目次機能に色々足す

https://www.yukihy.com/entry/hatenablog-table-of-contents-custom

日付の横に六曜を表示させる

https://psn.hatenablog.jp/entry/2014/03/30/225710

文字数カウンター

https://takiji13.hatenablog.com/entry/2016/04/07/185840

http://q.hatena.ne.jp/1449306414

これは自分用。リンク先にある通りhtmlタグなども含んでいるらしく「文字数」を計るのには難があるので、設置はしてあるものの非表示にしてます。管理画面の記事一覧ページに設置さえできれば……

youtubeの動画ははてな独自のものではなく埋め込みコードを取得して使う

https://pelicanmemo.hatenablog.com/entry/2015/01/18/100000

はてなが指定しているwidthが420なのに対してyoutube公式のそれは560pxなのでやや大きなサイズのものを貼れる。

カエレバ・ヨメレバの導入

https://www.yukihy.com/entry/kaereba-yomereba-custom

楽天はあんまし使う気なかったんだけど、kindleのラインナップが充実してきて、実書籍と電子書籍への導線両方欲しいなあと思ってたので。768px以上で、立て続けに商品リンクを貼る場合は、cssでwidhtを40%ぐらい、display:inline-blockに指定して、記事編集画面では<div class="inline"></div>みたいに商品リンクをくくってやることで横並びにリンクが並ぶようにしました。漫画の１巻目と最新刊を両方貼りたい場合とか、結構多いんですよね。

マウスオーバーでリンク先のタイトルをツールチップ表示する

https://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_tooltip>

ツールチップ表示の方法は分かったんだけど……

その他

カテゴリーの分け方

https://sube4.hatenadiary.jp/entry/1000/01/01/000001

これはまあブログやってる人にとっては永遠の課題だとは思うけど。パンくずリストのために親カテゴリ子カテゴリ……といった概念を採用しはしたけど、どっちかというとタグに近い使い方をこのブログではしてます。カテゴリが増えてきたらはてなブログで階層化した親子カテゴリーをCSSカスタムで擬似的に表示する方法 - はぴらき合理化幻想を採用するかも。

サイドバーの予定／おすすめ欄の管理

その都度書き換える手間を省きたいなあと思うもののなかなか気に入るツールがなかった。発売前の作品だと商品画像がなくて、個別にurl生成するやつだと画像が出た段階でいちいち書き換えなくちゃならなかったり。

検索ボックスをナビゲーションバーにつける

サイドバーに置くとスマホなどで目に見えるところに表示されない。ヘッダに置くとなんだかキマらない、というジレンマ。

重い重い重い

https://tsundoku-diary.scriptlife.jp/entry/2016/05/02/214404

な、なんとかします……

*1:トップページから記事一覧ページに飛ばせば擬似的に可能

*2:主に背景色だけ