※はてなブロガー向けの記事です。
僕は、
はてなブログのデザインを、
スマホ・ＰＣ共に2年以上、変えていません！ｗ
最後に変えた日が、
確か2年まえに派遣会社に再登録に行く日でしたｗ
で、その後、派遣登録し、働き始め、必死で働いている間はブログは記事制作だけで忙しく、、、
夏に退職してからもバタバタと忙しくて、、、
やっと少しだけ時間が出来てきました。
僕は、
「ブログはデザインより記事内容のほうが100倍大事！！」
という考え方ですが、、、
さすがに2年もいじってないと、なんとなく画面が古いですし、この2年でいろんなツールが世に出てきました。
なので、
今回、2年ぶりにデザインを変更するべく、方針を大体決めたので改めて記事にしました。
ぶっちゃけ、自分用のメモ記事ですが、ブログデザインに悩まれている方の参考になれば幸いです。
あと、僕のブログも、他の多くのブログも、
今、読まれているのは7～8割方、スマホからなので、スマホのデザインメインです！！
特に僕が持っていて、多くのミニマリストが持つ、
『iPhoneSE』からの閲覧画面がメインターゲットです！！
あと、
はてなブログカスタマイズ自体はこれらの記事が参考になります！
▼Yukihy先生様々です！
当ブログで行ってきたはてなブログデザインカスタマイズまとめ！ - Yukihy Life
もうこの記事でほぼ解決なくらいですｗ
僕もYukihy氏とはリアルで2回会ってますが、好青年です！
▼カスタマイズ別にまとまった記事！これもわかりやすいです！！
必見！はてなブログのカスタマイズを一気に紹介する - NO TITLE
それと、カスタマイズする方は、いきなり自分のメインブログでカスタマイズを試さずに、
サブブログで試して、メインブログにそのコードをコピペ！
が一番いいですねぇ。
①画面デザイン
ベースとなる基本デザインはいろいろ考えましたが、
今のシンプルなモノクロ画面を踏襲です！
はてなブログの良さは「画面がシンプル」というところだと僕は思ってるので、それをさらにシンプルにして、かつ、モノトーンな今の画面は気に入っています！
（タブレットから見ると微妙、とも言われましたが、試しに見てもそこまで微妙ではなかったです。上のバーは切れてしまってましたが、、、）
レスポンシブデザインについては個人的にはなんかちょっと微妙なので、今回は見送り、、、
というわけで、スマホとPCについて順に考えます！
【スマホ】
2年半前にデザインの参考にしたのは姫姉様の▼この記事。
ブログのスマホ版のデザインをカスタマイズしたよ！参考にした記事一覧！ - 時間セレブ
姫姉様の▼『初心者向きのブログ講座』カテゴリの記事は僕は本当に役に立ったので、ブログ初心者の方等は是非、参考にしてみてください！（情報が古い記事もあります）
初心者向きのブログ講座 カテゴリーの記事一覧 - 時間セレブ
で、上記の姫姉様の記事から2年半くらいたつと、記事内で言及されているいろんなブログ記事もリンクが消えていますねぇ。
特に僕が気に入っているカテゴリ選択バーの記事が消えているのがショック、、、
まぁ、これを機会に▼こういうタイル型選択にしてもいいかも知れませんが、、、少し考えます。
はてなブログのスマホ表示にグローバルナビゲーションを設置する - AIUEO Lab2
ちなみに、よく見る▼ハンバーガー型のメニューはほとんどクリックされないので、迷うならタイル型にしたほうがいいです。
実際、姫姉様もクリックされず、ハンバーガー型からタイル型に戻しています。
スマホのハンバーガーメニューが驚くほど使われていない現実 | MISLEAD
上記姫姉様記事の中の、
『アイコン、プロフィール欄の断捨離の記事』
ももうないので、これから断捨離したい人は▼こちらを参考にするといいと思いました。
はてなブログ、スマホサイトの不要な項目を徹底的に非表示にしてみた - KsMemo
あと、僕のスマホ画面上部の、
「ポジティブにつぶやき中＠A1理論」
が、今は普通にテキストなので、これをフォローボタンにも変えたいかな。
ポチってフォローできるように。
それと、シェアボタン、フォローボタンも▼Yukihyボタンに変えたいですねぇ。
【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life
コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life
はてなブログデフォルトのボタンは、僕の記事だとよく「はてブ」ボタンが表示されていないので。
僕は記事内の「はてブ」ボタンではなく、「はてなブックマークアプリ」をスマホに入れているのでページの下の□ボタンから「はてブ」するのですが、ミニマリストブロガー、特にミニマリスト女子ブロガーは驚くくらい「はてなブックマークアプリ」の利用率が低いので。
今のところ、スマホ・PCのどちらも3Dボタンに変更の予定かな？
【PC】
基本デザインは現在の▼らくからちゃ先生のデザインを踏襲。
Googleアドセンスの配置変更と、その他いろいろ本日ブログに施したブログ最適化と思われるいくつかのこと。 - Ａ１理論はミニマリスト
はてなブログでの収入が10万円を超えたので色々とまとめてみるよ - ゆとりずむ
理由はやっぱり、
横幅の広さ。
はてなブログのPC画面、どのテーマを選んでも横幅が狭いと思う。。。
しかも、僕の記事は長文が多く、ただでさえ文が長いのに、横幅が狭いと最悪なんですよねぇ。。。
らくからちゃ先生が昔使っていたこのモノクロのテーマはシンプルで、僕はスマホ版ともお揃いな感じでいいんですよねぇ。
らくからちゃ先生の本家ブログが写真入りになったので、
むしろ、このモノクロが僕のブログのテーマみたいになってますｗ
そして、それ以外のPCカスタマイズは、やっぱり▼姫姉様の記事参照に、、、ｗ
ブログのパソコン版のデザインをカスタマイズしたよ！参考にした記事一覧！ - 時間セレブ
・メニューバー
の導入ですな。
これはいろんな方の記事を参考に作ろうと思います。
ていうか、はてなブログのPC画面のデザイン・カスタマイズで迷ったら、
らくからちゃ先生と、ヒトデのPC画面を参考にすればいいと思ったｗ
2人ともやってることはmust
どちらかがやってることはmore better
みたいなｗ
というわけで、
PC版もシェアボタンとフォローボタンをYukihyカスタマイズですな。
あと、
サイドバーを固定するカスタマイズをしたい。
僕の記事は長文も多く、PC閲覧すると、右側がずーーっと余白のままなので、もったいない。
僕的には▼これかな？
レスポンシブに対応したサイドバー固定Ver.2（はてなブログ向け） - NO TITLE
サイドバー固定カスタマイズ記事一覧は▼この記事にいっぱい載っています！
【最強コピペのみ】はてなブログでサイドバーを下2つを固定する方法！！ - swankys
それと、トップページで最新の記事を一覧形式で見渡せる仕様にしたほうがいいかも。。。
と、思ったら、▼はてなブログは公式で今年6月から設定画面のボタンチェックするだけで一覧形式になる仕様になったらしく、この記事を書いている今、もう変えましたｗ
ブログのトップページを「一覧形式」で表示できるようにしました（はてなブログPro） - はてなブログ開発ブログ
＜はてなブログ＞トップページが一覧表示できるように！（Proのみ） - イロイロひとりごと。
って、▼俺、一番最初にブコメしてるじゃねーか！ｗ物忘れが早いなｗ
はてなブックマーク - ブログのトップページを「一覧形式」で表示できるようにしました（はてなブログPro） - はてなブログ開発ブログ
僕のブログは、一覧表示にすると、日時とブログタイトルの最初が被ってしまうんだけれども、気にしない。
（まぁ、いつも読みに来てくれる方は全部読むだろうし、逆にタイトルが気になってクリックしてくれるかも。）
これで、今までの記事の読まれこぼしや、アドセンス表示回数も増えていいことずくめですな。
僕の記事、時々、超重い記事もあるので、今まではトップページで強制表示だったのでよく考えたら最悪だったなｗ
▼さらにカスタマイズする方法もあるらしいのですが、これは保留かな～。
はてなブログProでトップページを一覧表示にして更にカード型にするカスタマイズ - FOXISM
②ヨメレバ導入
これ、ずっとやりたかったんだよなぁ。
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
というか、まず楽天に登録しないとｗ
俺って、本当にブログで金儲けが苦手だなｗ
③アドセンス位置変更
これはマネタイズの要なのですが、これもずっと放置していました。。。
ていうか、スマホにアドセンスのアプリ、入れてないｗ
この2年の大きな変化としては、
アドセンスの数が従来は3つだったのに対し、▼制限が撤廃されたこと。
【重要】Google Adsense、広告設置数の上限を撤廃！4枚以上配置可能に | gori.me（ゴリミー）
（このブログのアドセンス数、すごい。。。）
けど、貼り過ぎは怒られると思うので、、、
（コンテンツのほうが広告より多くなくてはダメらしいです）
まぁ、いろんな人のブログを見に行っても、
やっぱりトータル5つくらいにしておいたほうが良さそうですなぁ。
他の広告（アフィリエイト等）が多くてもダメらしいですし。
あと、この2年の変化は、
▼文中にアドセンスを張ることが簡単になったことがありますねぇ。
【改良版】コピペで簡単！はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ
【本当にコピペ一発！】はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ
それと、アドセンスの種類も増え、特に、
関連記事っぽいアドセンス広告が出てきたのはすごい革命的！！
それらを踏まえた今現在のアドセンス案はこちら！
この案は変更するかもしれません！
【スマホ】
・タイトル下
・記事中
・シェアボタン上
・関連記事広告型
・最後の最後
【PC】
・タイトル下①
・タイトル下②
・シェアボタン上①
・シェアボタン上②
・関連記事広告型
かな？
ま、これはカスタマイズしながら考えます！
④関連記事表示の断捨離
僕は現在、ブログの『関連記事』表示は▼これらで表示させていますが、、、
◆はてなブログ公式関連記事表示
◆Milliard
◆あわせてよみたいＧ
これらは、
全部、断捨離
しようかなと考えています。
まず、そもそも、
関連記事表示させる時点でブログが重くなります。
しかも、今後はアドセンスの関連記事型広告も載せる予定なので、このままだとさらに重くなります。
最近の僕はtwitterを貼り付けまくる記事も増えてきたので、ただでさえ記事が重いブロガーなのに、さらに重くなるのは微妙なので、軽量化作戦です！
「でも、3つともいっきに断捨離しなくてもいいんじゃあ、、、」
って思う人もいると思いますので、
以下に上記3つの関連記事表示のメリットとデメリットを上げていきます！
◆はてなブログ公式関連記事表示
これは今年の6月から▼はてなブログ公式で標準搭載されるようになった機能ですが、、、
記事下に「関連記事」を表示します - はてなブログ開発ブログ
【メリット】
・精度が高い
【デメリット】
・過去記事に表示されない、もしくは限定的
・表示場所を変更できない
で、今年6月時点で過去記事が1000記事ほどあった僕には、どう考えてもデメリットの方が大きいです。
◆Milliard
【メリット】
・綺麗でおしゃれ！
・精度が高い
【デメリット】
・表示されない時がよくある
この「Milliard表示されない」問題に関しては過去にかなり格闘しましたが、
もう戦うことに疲れました！ｗ
はてなブログPC画面記事下に『Milliard』＆『あわせてよみたいＧ』をダブル導入すればどちらも表示100％だけど制約があることを突き止めた！！ - Ａ１理論はミニマリスト
▲この格闘はあくまで一例にすぎませんｗ
パトラッシュ、もう疲れたよ、、、ｗ
◆あわせてよみたいＧ
【メリット】
・必ず表示される
・過去記事にも表示される
【デメリット】
・ブログカードがデカい
・精度が低い
これは最後まで悩みましたが、断捨離することに。
まず、ブログカードが大きすぎます。特にスマホだと隙間が広すぎます。
次に制度が低い気がします。あんまり関連のない記事がよく表示されている。
これをスマホのブログ記事の最後にずらずらと表示させるのが好きだったのですが、、、
今後は、スマホ画面の最後の最後に広告を置いておけばいいかな、と思いました。
はてなブログは2年前に比べたら、各記事の最後に「新しい記事」と「過去の記事」も表示されるようになりましたしね。
それとデフォルトの5つの記事表示とアドセンスの関連記事広告で十分かな、と。
⑤独自ドメインに移行
これはもうそろそろ移行したいと考えていますｗ
2年前に比べたらhatenaドメインもそこまで強くなくなってきたし。
独自ドメインにしてPV数が急落するブロガーは元々、ものすごいPV数の人だし。
⑥Amazonの欲しいモノリスト設置とサブブログ作成
これは改めて別記事で書こうかと思いますが、、、
最近、特に思うのは、
僕はPVは低いブロガーですが、、、
コアでニッチでマニアックなファンが多い
ということですｗ
▼MacBook Airくれたりｗ
読者のわらふくさんからMacBook Airを頂きました！！しかもOffice付き！！ - Ａ１理論はミニマリスト
そういうコアなファンが読む別ブログを作って、そこを僕とコアなファンとの交流のメインにしてもいいかな
とか考え始めました。
姫姉様やはちさんのサブブログみたいな感じで。ちきりんパーソナル的な。
キャッキャウフフ的なｗ
内容は記事にするでもないようなことや、ちょっとした日記的なブログ。
ま、これに関して詳しくは後日、別記事で書きます！！
というわけで、
以上が、僕がはてなブログを2年ぶりにカスタマイズしようとしている内容です！
12月は下諏訪のホシスメバ・リノベツアーの取材や、ハローワークへの離職票の提出等ありますが、
どうにか今年中に上記すべてやりとげたいと思っています！！
