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

はてなブログテーマをBlankにしてみた

以前、はてなブログはRougeのテーマを使っていたんだけどさ。タブレットからブログの微調整的な更新をしようとした時に、あやまって別のテーマを選択するを押してしまったみたいでね。

今までカスタマイズしていたものが消えてしまったんだよ。急いでまたRougeのテーマをダウンロードしたんだけど、カスタマイズ前の初期値に戻ってしまったんだ。

もうね、2度とタブレットから更新しないと決めたし、カスタマイズしたテーマをバックアップしておくべきだったなと反省したんだ。

www.ishikawayulio.net

自分はこういう失敗を無理矢理プラスにとらえることにしたんだよ。こうなったら心機一転、新しいテーマでブログをカスタマイズしてみるかとなったんだ。

今回、自分が選んだテーマは「Blank - テーマ ストア 」なんだけどね。コピーペーストのみでいい感じにカスタマイズできる方法をゆきひー (id:ftmaccho) さんが記事にしていてさ。

自分はその記事を参考にしながら作成したんだ。どんな感じになったかは言葉よりも画像を見てもらった方が早いからね。写真で説明しますね。

パソコンの表示

f:id:ishikawayulio:20160329120149j:plain

こんな感じに表示される。例えば、ユーリオニッキのブログ名の下部にあるコラムにカーソルと合わせると、

f:id:ishikawayulio:20160329120258j:plain

びろーんと伸びる。

はてなブログデザインカスタマイズ | タイトル・画像のセンタリング・サイドバーや見出しなど 

はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2) 

コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ

CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】

はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ 

Milliard関連記事プラグインのCSSをいじり2列にしてブログになじむようにしてみました

上記を利用してカスタマイズしたんだ。自分はできれば高齢者の方にもブログを読んで欲しいと思っているからさ。記事の文字は大きめに設定したんだよ。

タブレットの表示

f:id:ishikawayulio:20160329122658j:plain

こんな感じで表示される。MENUにカーソルと合わせると、

f:id:ishikawayulio:20160329122814j:plain

びろーんと伸びる。テーマはレスポンジのBlankなのでタブレットでも記事の文字はやや大きめにしている。

スマホの表示

f:id:ishikawayulio:20160329125954j:plain

こんな感じで表示される。例えば、下部にあるカテゴリをタップすると、

f:id:ishikawayulio:20160329130134j:plain

下からびろーんと伸びる。

はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム 

コピペ一発ではてなブログスマホ画面のヘッダーをおしゃれにする方法

上記を利用してカスタマイズしたんだ。スマホからの場合、モバイル用のはてなが表示される設定をしている。

ユーリオ的まとめ

以前、高齢者がブログを読むことも意識してる? でも書いたんだけどさ。高齢者限定なんだけどiPadが無料でもらえる時代がくる。

また格安SIMが登場し、最初のインターネット設定さえしてしまえば気楽にタブレットからインターネットライフができてしまう。

そう考えると通常(デフォルト)の状態で文字がやや大きめがいいかなと判断したんだ。高齢者の方って字が小さいと読む気がしなくなると思うので。

読みやすい文字の大きさで読んでもらった方がいい。そんなことを思いながらカスタマイズしました。このテーマでカスタマイズしたいと思ったら、やってみるのもありですよ。

追記:Blankのパンくずリストについて

Toma_G (id:tomag)さんから下記コメントをもらいました。

はてなブログテーマをBlankにしてみた - ユーリオニッキ

Blankだとパンくずリストの「>」の位置がおかしくなるので http://moonnote.hateblo.jp/entry/2016/01/09/224600 を参考にしてくだされ♪

2016/03/30 16:54

Blankでパンくずリストを設置する時は、Innocent および Blank でパンくずリストの ”>” を正しい位置に表示する方法を設置した方がいいそうです。さっそく参考にして設置しました。教えていただきありがとうございました。

格安SIMフリーはじめてガイド (アスキー書籍)

格安SIMフリーはじめてガイド (アスキー書籍)

 
できるゼロからはじめるAndroidスマートフォン超入門 できるシリーズ

できるゼロからはじめるAndroidスマートフォン超入門 できるシリーズ