読者です 読者をやめる 読者になる 読者になる

周回遅れの諸々

90年代にオタクとしての青春を過ごした人のブログです

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

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

 

 

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

 

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

 

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

 

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

 

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

 

 

編集のために

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

moonnote.hateblo.jp

 

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

neetwork.hatenablog.jp

 

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

全体のレイアウト

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

kyabana.hatenablog.jp

 

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

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

 

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

moonnote.hateblo.jp

 

リンク先の通りレスポンシブデザインは横幅によってデザインが自動で切り替わっていくけど、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~」から始まる行の数字をいじくって色々変えてみた。多分デフォルトのデザインが最適解だとは思うけど、一番閲覧するのが自分だと考えると自分が気に入ったものにするのが一番だとは思うので……。

 

サイドバーの幅を変更

moonnote.hateblo.jp

 

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

 

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

トップページ

moonnote.hateblo.jp

 

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

 

プロフィール

sube4.hatenadiary.jp

 

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

 

404ページ

wepli-dot2.hatenablog.com

 

記事一覧ページ

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

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

 

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

f:id:megyumi:20160626234150p:plain

 

デザイン

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

wedges.hatenablog.com

h2ham.net

qiita.com

 

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

 

googleフォントを導入する

on-ze.com

 

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

 

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

www.bad-company.jp

 

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

 

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

worpre-lab.com

 

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

 

youtube等、iframeの中央寄せ

webfood.info

 

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

 

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

www.yukihy.com

 

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

 

タイトルなどの背景色にグラデーションで変化をつける

kenyo--c.com

 

マーカーっぽい下線を引く

mu2in.hatenablog.com

 

下線との間隔を空ける

www.koikikukan.com

 

あれば便利そうな奴

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

akiueo.hatenablog.com

 

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

 

最新記事一覧をページ上部に表示する(サイドバーが消えても)

michiko-70554148.hatenablog.com

recommend.shinobi.jp

 

忍者画像RSSを使ってみた。画像ありだと情報量が多くなり過ぎるし、こっちで指定したアイキャッチ画像を拾ってくれないので、タイトルのみに。二つ目の記事だと個別記事の上の方に表示されないので、

 

.page-entry #info{
display:block;

}

 

を付け足し。でもどうかなー邪魔かな―。あとちゃんと表示してくれないことが結構あります。Innocentの作者さん謹製のおすすめ記事リストもあります

 

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

bulldra.hatenablog.com

bulldra.hatenablog.com

 

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

 

記事下の関連記事一覧

psn.hatenablog.jp

bulldra.hatenablog.com

 

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

  

 

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

nohack-nolife.hatenablog.com

azanaerunawano5to4.hatenablog.com

 

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

 

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

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

}

 

記事の一部を隠す

www.yukihy.com

 

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

 

公式目次機能に色々足す

www.yukihy.com

 

最新記事一覧の下からその場で過去記事を辿れる「もっと読む」をつける

bulldra.hatenablog.com

 

サイドバーの最新記事一覧については、【修正済】コピペで簡単! はてなブログの人気記事を画像付きで表示させる方法。 - #ChiroruLabみたいなシュッとしたタイプもあるにはるんだけど、ちょっとこのブログにはなじまないかなと……。他のやつもサムネイルにアイキャッチ画像じゃなくてその記事で一番最初に貼った画像を持ってくるタイプだったり、「人気記事一覧」であって「最新記事」じゃなかったり。

 

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

psn.hatenablog.jp

 

文字数カウンター

takiji13.hatenablog.com

q.hatena.ne.jp


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

 

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

pelicanmemo.hatenablog.com

 

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

 

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

www.yukihy.com

 

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

 

f:id:megyumi:20160621215133p:plain

 

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

ツールチップ|jQuery plugin|Ajax|PHP & JavaScript Room

 

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

 

その他 

カテゴリーの分け方

sube4.hatenadiary.jp

 

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

 

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

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

 

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

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

 

重い重い重い

tsundoku-diary.scriptlife.jp

 

な、なんとかします……

 

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

*2:主に背景色だけ

広告を非表示にする