心に火を、指先にペンを

愛と平和のラビリンス

はてなブログで2年以上更新してきたので生き残っているカスタマイズを大体晒すよ

この記事をシェアする

 

f:id:defender_21:20170805002331j:plain

かれこれ2年以上はてなブログを利用しているわけですが、当ブログもこの2年でこつこつのプチ整形とメイクをしつづけ2年前の面影はほぼなくなっております。

今でこそはてなブログはオシャレなテーマや多くのカスタマイズ記事が出てきておりますが、私がはじめたころなんて全然ありませんでした。スマホなんてひどかったもんですよ、本当に。カスタマイズ記事を書いてくれる人には頭が上がりませんね。

 

ただそれらの記事を精査せずに使い続けると「あれ?このコードなんだっけ」とか「なんかデザインが干渉しとる…」とか色々ありましてこの半年ぐらいいろんな人の手を借りながら断捨離したり、新しいカスタマイズをしたりしていたのでその辺をまとめてみようかなと。

はてなブログで2年以上更新しているアフィカスクソブロガーのカスタマイズ事情を晒します…というのがこの記事の趣旨でございます。

基本デザイン 

まずは今のこのブログの基本デザインについてです。

PC

 
カスタマイズが超簡単なデザインテーマ「SOHO」を公開しました
カスタマイズが超簡単なデザインテーマ「SOHO」を公開しました

PCは人気カスタマイズ毒舌ブロガータックミーの「SOHO」を使用しており、見出し以外デザインはほぼ触っていません。グローバルメニューやシェアボタン、フォローボタンをjQuery不要でカスタマイズっていう凄いテーマです。ここまで速度にこだわったテーマってないんじゃないか?って思ってます。

ただ私のブログにはオシャレすぎるのでちょっとデザインを崩して使いたいなあって思ってます。 

スマートフォン 

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

彗星のようにあらわれたこどみす氏のこれを基本的には使っています。現時点のスマホカスタマイズではこれ以上の物はないんじゃないかなー。 

ただしオシャンティすぎて被りまくるのが唯一の欠点ですかね。 

 

無料公開されているカスタマイズで使っているもの

まずは先人たちがサービス精神爆発で無料公開してくれてるものから私が使っているものを紹介します。

① シェアボタン

 
【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2
【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2

シェアボタンはずーっとこれ使ってるなあ。 カラフルでスマホでは一番好きなやつ。

② 見出し

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

この記事をベースにアレンジしています。少し前まではカラフルな見出しを好んでいたんですが今はシンプルに。というのもこのブログのように雑多ブログだと記事ごとにテイストが違いすぎてカラフルな見出しだと合わない記事とか出てくるんですよね。とは言え太字だけだと厳しいので最低限のデザインを入れるようにしております。

③ カエレバ・ヨメレバ 

 
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ!
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ!

カエレバ・ヨメレバもずっとこれを使ってる。縦長にならないようにデザインされてるのがよい。

④ 目次 

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

私のように長文を書く場合は開閉式の目次機能必須ゆえかなり重宝。

⑤ 上へ戻る

 
コピペでどうぞ。はてなブログで「ページのトップへ戻る」ボタンをつけるカスタマイズ
コピペでどうぞ。はてなブログで「ページのトップへ戻る」ボタンをつけるカスタマイズ

私のように長文を書く場合は上へ戻らせてあげないと不親切故重宝しております。

⑥ 関連記事 

関連記事はいろいろためしてはてなブログの純正の物を使うのが記事の関連性、デザインとっても一番良さそうだと判断。サルワカのおかげでデザインも申し分なし。

f:id:defender_21:20170805011056p:plain

関連記事より上にアドセンスを出したい場合はこれを使えば問題ない。

 
はてなブログでアドセンスを見出し前やシェアボタン前の記事直下に自動で挿入する方法
はてなブログでアドセンスを見出し前やシェアボタン前の記事直下に自動で挿入する方法

⑦ 吹き出し

 
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】

会話形式で使われる吹き出しのカスタマイズ。タックミーのcrome拡張機能とあわせるとかなり使いやすい。ていうかこの拡張機能神なので使っていない人は絶対使った方がいいよ。 

 
はてなブログ編集用のChrome拡張機能を作りました(使い方の説明)
はてなブログ編集用のChrome拡張機能を作りました(使い方の説明)

私の場合はイラストやの偉人と組み合わせて使っています。こんな感じで…

坂本龍馬です

牛若丸です

ナポレオンです

エジソンです

▼ これらの記事で使ってます 

 
電力自由化とは?電力事業社徹底比較 | おすすめ電力会社詳細と選び方
電力自由化とは?電力事業社徹底比較 | おすすめ電力会社詳細と選び方

とにかく吹き出し記事が便利なのは説明くさい文章のテンポもよくなること。すごい使い勝手が良い。 

 

有料でお願いしてきたカスタマイズ 

無料で公開されているカスタマイズだけではちょっと対応できないもの、もう少しこうしたい…みたいな要望はできる人にお金を払って対応してきてもらいました。自分で調べるより確実に良いものができるので。

ゆきひー (id:ftmaccho)にお願いしてきたもの 

最近は就職して忙しいようではてなブログの更新はほぼありませんが僕と同時期にブログを始めたYukihyには多くのカスタマイズを手伝ってきてもらいました。無料公開してるものは大体試してきています。上記の物とは別に個別でお願いしたのがこれ。

記事の説明をわかりやすくするカスタマイズ
補足情報わかりやすくカスタマイズ
諸注意を見やすくするカスタマイズ
目立たせたいものを説明するカスタマイズ

公式サイトへ誘導するボタンも作成してもらいました。

リンクのボタン(緑)です。

リンクのボタン(青)です。

リンクのボタン(赤)

リンクのボタン(オレンジ)

これらのものはWordPressのオシャレなテンプレートとかにはよくあるやつです。 商品説明ときによく使ってます。

つばさ (id:tsubasa123)氏にお願いしてきたもの

じつは最近はつばさ氏にめちゃくちゃいろいろお願いしております。今諸事情で公開できていないものもありますが汗。つばさ氏は複数のパターンを出してくれたり問題があるページを調べてくれたり本当にサービス精神がすごい。

記事装飾系

オーソドックスな引用やリスト、蛍光ペンもお願いしております。無料で公開されてるやつを使うとはてなの純正のデザインと干渉してしまったため、その解決+デザインという形でお願いしました。

引用のサンプルサンプルサンプル

  • リスト

蛍光ペン

引用は特に気に入っていて記事の内容を邪魔しないシンプルなものにしてもらってます。 

関連記事ジェネレーター

さっきから記事の紹介に使っている関連記事。これ普通のデザインと違うと思いませんか?

▼ はてなカード

www.kokoro-fire.com

▼ オリジナルカード 

 
ブログで稼ぐ方法 | 30万PV・10万円稼ぐまでにやってきたアクセスアップとマネタイズの方法を全部書く
ブログで稼ぐ方法 | 30万PV・10万円稼ぐまでにやってきたアクセスアップとマネタイズの方法を全部書く

これもつばささんに相談したらなんとジェネレーターを作ってくれたんですよね。すごくないですか?

f:id:defender_21:20170805014958p:plain

純正のはてなカードより縦幅を狭くして余計な情報を削っています。これはスマホで見る場合の縦スクロールを少しでも減らしたいなと思って相談したものです。オリジナルのアイコンも透かしてくれています。

wordpress用でつかっているサーバーをつかって作ってくれた当ブログ専用の関連記事ジェネレーターです。

 

まとめ 

こんな感じでドヤまとめしてますけどまだまだできていないことだらけです。カスタマイズブロガーの皆様、引き続きよろしくお願いします。

 

Copyright© 心に火を、指先にペンを All Rights Reserved.