ブログのテーマを変えてみました(※2019年5月13日追記&更新)

※2019年5月6日投稿15時頃投稿(正確な投稿時間を忘れる)

以前使っていた「Report」「Epic」に変更。いいですねコレ・・・

 

Report

http://blog.hatena.ne.jp/-/store/theme/12921228815712830663

blog.hatena.ne.jp

●Epic

http://blog.hatena.ne.jp/-/store/theme/12921228815712830648

blog.hatena.ne.jp


※2019年5月6日16時56分追記

PCとスマホでほとんど変わらない状態で閲覧したいとき

さらに「Fresh green」に変更。これはもっといい!実に良いです。

 

Fresh green

http://blog.hatena.ne.jp/-/store/theme/12921228815711202753

blog.hatena.ne.jp

まずPCとスマホでもほとんど変わらない状態で閲覧できること。

スマホのレスポンシブデザインに対応しているものでも、PCで見る時と同じように記事とカテゴリーが横に並んで表示されるデザインはさらに限られます。

 

その中でこの「Fresh green」は記事とカテゴリーが横に並び、オマケにPCとスマホの文字列改行の誤差が少ない。

例えば大きさ:標準(100%、16px)なら誤差1文字で表示されます。私が求めていたデザインに最も近い存在と言えます。


※2019年5月7日追記

PCと同じ表示にこだわった理由

 それは一行の文字数がPCとスマホでは違うからです。

スマホは一行に並べられる文字数が少なく(アプリによってはさらに文字数が制限されるでしょうし)、そのまま何の対応もしないとPCで意図しなかった部分が変な改行をされてしまいます

 

・PC

題名●●●●● 作者名●●●●●

 

スマホ

題名●●●●● 作

者名●●●●●

 

オマケに本記事の部分だけ優先されて表示されるので、カテゴリーが下になりわざわざ一番下までスクロールしなければなりません。凄く面倒くさい

しかし!PCと同じ配置で見れるなら本記事から横のカテゴリー覧へすぐに飛べます!スマホでそれを見た時の印象は文字が小さく思えるでしょう。でも指で拡大すればそんなの関係な・・・

 

え?スマホを片手で見る人にとってはもう片方の指を動かすことこそ面倒

(゚Д゚)

・・・え?え?

みんな片手で操作してんですか?・・・片手だけだと落としたりしちゃわないか不安になりません・・・なりません?

 

で、でもそんなこと検索に関係ないじゃ・・・

スマホ非対応のサイトは検索が「見づらい」と判断して優先的に取り上げてもらえないですって!!?

orz....再検討しようと思います・・・


※2019年5月7日21時39分追記

実験のため「Brooklyn」等で試行錯誤中。文字サイズが最初から16px以上の設定で使いやすいです。

 

Brooklyn

http://blog.hatena.ne.jp/-/store/theme/6653586347155924442

blog.hatena.ne.jp


 ※2019年5月11日追記&更新

色々カスタマイズした結果

スマホでもメニューバーを常に表示する方法は↓の3サイト様が非常に役立ちました。本当に、本当にありがとうございます!!感謝の極みです!!

 

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

http://www.yukihy.com/entry/mobile-menu-custom

www.yukihy.com

 

はてなブログスマホ画面に複合メニューバーをつけるカスタマイズを拡張してみた」

https://nuruta2.hatenablog.com/entry/2018/06/03/003200

nuruta2.hatenablog.com

 

「無料版のはてなブログスマホの表示をカスタマイズする方法」

http://nasust.hatenablog.com/entry/2016/12/22/193126

nasust.hatenablog.com

 

はてなブログ/カスタマイズ】カテゴリ-のURLはどこ?」

https://www.j-and-do.com/entry/hatena-customize-the_url-of-the-category-where-is-it

www.j-and-do.com

今までの苦労が嘘のようです・・・スマホでも片手で本文記事とメニューを自由かつ快適に移動できるなんて・・・!あなたが神か・・・それほど素晴らしい発明です!!救世主です!!

 

目次の折りたたみ方については

はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム」

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

www.yukihy.com

 

目次のカスタマイズについては、

「「永久保存版!」はてなブログの目次デザインを自分好みにカスタマイズする方法」

https://www.oyomiyo.com/entry/2018/09/13/170534_1#%E7%9B%AE%E6%AC%A1%E5%86%85%E6%96%87%E5%AD%97%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA

www.oyomiyo.com

 

日付設定については

「【はてなブログをカスタマイズ】Brooklynの投稿年月日をシンプルにする」

 

https://www.hs-note.com/entry/blog-customize4

www.hs-note.com

 

検索バーについては、

「【はてなブログ】ブログ内検索ボックスをスマホ用ページの上部に表示させる方法」さん、

http://chipspd.hatenadiary.jp/entry/2014/11/03/231620

chipspd.hatenadiary.jp

 

「【はてなブログ】サイドバー以外に検索ボックスを作る」

https://diy-kagu.hatenablog.com/entry/original-searchbox-hateblo

diy-kagu.hatenablog.com

 さんの記事が、

 

 

●ブログタイトルの大きさについては、

はてなブログのタイトルの大きさを変更するには」

 

http://affiliate-hatekun.hatenablog.com/entry/2016/01/24/234316

affiliate-hatekun.hatenablog.com

さんの記事が、

 

ヘッダー周りの余白については

「【はてなカスタマイズ】ヘッダー余白を小さくしてスマホ表示をよりコンパクトにしよう」

https://www.mypace-family.com/entry/header-yohaku

www.mypace-family.com

 

ッダーの消し方については

 

はてなブログのヘッダーをHTMLごと自由にカスタマイズする唯一の方法」

https://www.okuni.me/entry/hatena-header-html-customize#%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%82%92%E6%B6%88%E3%81%99%E3%81%AA%E3%82%93%E3%81%A6%E3%81%91%E3%81%97%E3%81%8B%E3%82%89%E3%82%93%E5%95%8F%E9%A1%8C

www.okuni.me

 

「【決定版】はてなブログスマホデザイン最強カスタマイズ集」

https://hitsuzi.hatenablog.com/entry/2017/05/05/204703

hitsuzi.hatenablog.com

 

●タイトル下にあるカテゴリタグの消し方(パンくずリストにカテゴリが表示されるのでカテゴリタグが重複していると感じる・タグがあることで生まれる空白・余白を埋めたい人向け)については

はてなブログのカテゴリーを非表示にするのでR」

https://naruhesogoma.net/archives/1277

naruhesogoma.net

さんの記事が、

 

aboutページ(プロフィール)の編集については

「【コピペ歓迎】はてなブログのダサいaboutページを見やすくオシャレにカスタマイズ!」
https://www.okuni.me/entry/2018/01/26/191500
とても参考になりました。ありがとう・・・ありがとうございます・・・!

 

ちなみにCSSの設定は「headに要素を追加」「ヘッダ」の項目を一度リセットしてから貼った方が上手くいくようです。

 

それの参考については↓の

 

はてなブログCSSがうまく反映されない時の対処法」

https://www.pso2-makapo.com/entry/css-backgroundcolor-error

www.pso2-makapo.com

「見出しのデザインをカスタマイズしても反映されない原因と対策」

https://www.nishi2002.com/24295.html#CSS-2

www.nishi2002.com

さんたちの記事が、

 

トップページの固定とカスタマイズについては

はてなブログのトップページを固定して企業サイト風にする方法」

https://www.imuza.com/entry/2016/12/28/164015

www.imuza.com

 

デザインは「Haruniでしばらくやってみようと思います。

 

Haruni

http://blog.hatena.ne.jp/-/store/theme/17391345971624603155

blog.hatena.ne.jp

 

色のカスタマイズについては

「背景色変更でフラットデザイン風の単色カラーに」

https://yumekawa.hatenadiary.com/entry/2018/03/15/191030

yumekawa.hatenadiary.com

 

色のコード一覧

「Webセーフカラーのカラーコードが一目でわかるWEB色見本」

https://www.colordic.org/s/

 
…と思ったんですが「Haruniで重大な欠陥が発覚。なんと情報を検索した際に記事一覧のタイトルだけが表示されるのです!
 
※2019年5月13日追記:上記の無神経極まりない書き込みについて、テーマごとの設定を「欠点」呼ばわりして難癖をつけてしまい多大な御迷惑をおかけしてしまいました。
テーマごとの設定についてよく調べもせず、私個人の確認不足が上記の身勝手な発言と態度に繋がってしまいました。
今後はこのような誤りを二度と繰り返さないよう、細心の注意を払って取り組んでいく所存です。

minimalgreenさん、matomoni-ikiru123 さん、及び他のユーザーの皆様、改めて深くお詫び申し上げたいと思います。

 
・「Haruni

f:id:jgjhgjf:20190511235020j:plain

 

・「Brooklyn」

f:id:jgjhgjf:20190511235127j:plain

他のテーマだと大概タイトル下に検出された情報がどう含まれているか内容の一部が表示されるのですが、「Haruniはタイトルだけでその下は空白になってしまいます。

記事一つ一つをイチイチ確認しないと詳細の把握ができないため、ピンポイントにどの記事を開けばいいのか分からないのは痛い。それさえクリアできれば最高なんですが・・・残念です。

 

※2019年5月13日追記:

テーマごとに記事一覧で内容の一部を抜粋するかしないかにはテーマによって違いがあり、それをよく調べもせず「欠点」と決めつけてしまったのは大変軽率でした。

 
というわけで「Brooklyn」に戻しました。当分はコレをカスタマイズして頑張っていこうと思います。
 

見出しのリセットについては

はてなブログカスタマイズ 人気テーマBrooklynの吹き出しを削除」

https://affiliate-couple.hatenablog.com/entry/customize_heading

affiliate-couple.hatenablog.com

さんの記事と、

 

「コピペで簡単!CSSはてなブログの見出しをカスタマイズ!」

https://www.notitle-weblog.com/entry/2016/02/17/144908

www.notitle-weblog.com

さんの記事を参考にしました。重ね重ね、皆様のアイデアに深い感謝を述べたいです。本当にありがとうございます!


※2019年5月12日追記

「Haruniの作者さんからコメントをいただきました
「Haruniの作者であるminimalgreenさんによると、「Haruniは記事一覧の抜粋が非表示に設定されているそうです。そうか・・・そうだったのか・・・
カード型の抜粋表示がある「UnderShirt」あたりがオススメだそうです。コチラはカード型表記で記事一覧でも内容を一部抜粋表示できます。
 
UnderShirt
minimalgreenさん、ブックマークでのコメントのほど誠にありがとうございました。
コチラこそわたくしめの勝手なワガママでケチをつけてしまい本当に申し訳ありません。それなのに丁寧な説明と他のオススメデザインまで紹介して下さるとは・・・大変ありがたいです・・・。