【7/31まで】AmazonMusicを聴くだけでギフト券10,000円が当たる【1000名様】
はてなブログ

はてなブログでカスタマイズしてきたこと【まとめ】

以前こんな質問がありまして

質問
  1. いっしーさんのスクロールメニューどうやってるんですか?
  2. どうやって検索したんですか?
  1. カスタマイズはほとんどコピペ!
  2. 「はてなブログ カスタマイズ」等

これは意外!

自分にとって当たり前のことが実は当たり前ではないのかなぁと。「はてなブログ カスタマイズ」で調べてみたらあっさりよ!と言うのは簡単ですが、もしかしたら「ブログをカスタマイズするってどういうこと?」と思っている人もいるかもしれない。

ある程度のカスタマイズは先人様の知恵をお借りしてコピペで済ませてます。カスタマイズ職人になりたいわけでもないんで(;’∀’)

そんなことを少し考えまして、当ブログで行ってきたカスタマイズをさらっと紹介することにしました。

カスタマイズの必要性

f:id:hometaka5657:20171104235808j:plain

僕がブログにカスタマイズを施す理由は見た目!見た目に関しては個人差があるからぶっちゃけ自己満できても他から見るとダサい可能性はある。

しかしそれはセンスの問題だw

だけどせめて自分で納得できる見た目に近づけられれば、モチベをあげることにも繋がると思います。

『見た目が良い>見た目が悪い』これは否定できません。頑張って書いた記事も見た目が悪いだけで閉じられる。これだけは回避したいですよね。

それでは当ブログで行ってきたカスタマイズをご紹介しますので、参考になれば嬉しく思います。

ちなみにはてなブログではMinimalismを使用してましたが、現在はワードプレスにお引越ししてるのでご了承下さい。

あわせて読みたい
はてなブログからWordPressへ移行!無料サービスを活用した手順と感想先日、約7ヶ月お世話になったはてなブログからワードプレスへ移行しました。 移行した理由としては、はてなブログに慣れたら最終的にはワ...

ヘッダー画像

あわせて読みたい
簡単にヘッダー画像を作成してはてなブログに設定する方法!「訪問者に少しでも印象を残せたら」 「自分のブログやサイトに愛着を持ちたい」 目的は様々だと思いますが、サイトのイメージを左右す...

プロに頼もうかと思いましたが自分で作成してます。画像を組み合わせただけの簡単なヘッダー画像はあっという間に完成。どんな感じにしようかなぁと悩みはしたものの、実際に作業した時間は5分ほど。

ヘッダー画像を作成する無料ツールの紹介と作り方、最後にはてなブログに最適に貼る方法を記載しています。

メニューバー

www.yukihy.com

ゆきひーさんのブログを参考にしてます。カテゴリーが増えてくるとメニューは重要になります。読者から見てひと目でわかるデザインが良いですよ。

変更したのはカテゴリ数と色の変更。

ソーシャルボタン

www.yukihy.com

8割見た目重視!コピペのみで簡単に設置は可能ですが僕はLINEを使っていないので「LINE」のみ削除してました。

必要なものと必要ないものの取り捨て!

リスト

www.north-geek.com

リストはカスタマイズすると他の装飾に影響する可能性があります。テーマによって変わると思いますが、Minimalismは目次とアフィリンクに影響が出ました。

ここはご自身で確認を。

結構時間かけていじりましたが・・・「なくても良い。」そんな答えに達してます。

見出し

saruwakakun.com

数々の見本はありますが見出しのデザインは全てここにあると言って良いくらい素晴らしいものが沢山ありますよ。お好みで色や形の変更はしてますがそのままでも素敵です。

はてなブログの記事で使う見出しは「h3(大見出し)、h4(中見出し)、h5(小見出し)」です。変更するのであればこの3種類になります。

囲い枠

saruwakakun.com

同じくサルワカさんのサイトです。ほしいデザインを選んでコピペ!

囲み枠は適度に入れることで文章が見やすく飽きにくくさせてくれますよ。

下線マーカー

saitoumasami.com

良くある蛍光ペンです。

存在を忘れていることに気付きました。この機会にマーカーデビューしちゃいます!

ここでは強調したい太字の蛍光ペン太字にしたくない蛍光ペンの設定も解説してくれています。

吹き出し会話

www.notitle-weblog.com

シロマさんのブログでお世話になりました。

いっしー
いっしー
はてなブログで吹き出しを使う時の1番簡単な方法です。

妻
おすすめ♪

いつかワードプレスに移行する可能性あります?移行したら吹き出しは消えます…

カエレバ・ヨメレバ

www.yukihy.com

アマゾンと楽天のアフィリエイトリンクを貼る時にカエレバを使用すると便利です。そのカエレバをおしゃれに表示させるカスタマイズがこちら。やっぱり見た目は大事です。

こんな感じになりますね!

「アフィリエイトに参戦したい!」という方がいましたらこちらも参考に♪

あわせて読みたい
ブログの収益化を目指してやったこと|アフィリエイトの始め方ブログを収益化する。つまりアフィリエイトに参加すること。アフィリエイトを始めるにはASP(アフィリエイト・サービス・プロバイダ)への登録...

ちょっとしたカスタマイズ

文字の大きさ変更

ブログ全体の文字の大きさと文字の間隔を一発で設定するCSSです。デザインCSSに貼り付けると適用されるので気に入ったサイズにしましょう!

/* 文字の大きさ*/
.entry-content {
font-size:15px; /*大きさ*/
line-height:1.7em; /*間隔*/
}

画像リンク無効化

貼り付けた画像をクリックしたら無駄に動作しません?このCSSで無効化できます。

/* 画像リンク無効化 */
.hatena-fotolife {
pointer-events: none;
}

こちらもデザインCSSに貼るだけですね!

カスタマイズは自己責任

勢いに乗ってコピペでカスタマイズしていたら時に痛い目にあいますよね!1文字抜けただけでデザインが大幅に崩れてしまうことも…。

もしかすると拾ってきたブログの方が間違ってる可能性もありますし自分でやらかしたのかもしれません。

でも自己責任です

カスタマイズする時はバックアップをとる。もしくはテストブログで実験してからを推奨します。

いっしー
いっしー
やべー!もう修復できねー!

こんな状況に陥る方をたまに見かけます。明日は我が身です(笑)

www.foxism.jp

まとめ

以上で当ブログの紹介を終わります!これまで参考にさせて頂いたブログ運営者の方々、本当にありがとうございます。

また、このカスタマイズまとめもいつか誰かの参考になればと思い作成しました。そうなることを願いまして、さようなら!

 

あ、1つアドバイスしますと。

先程も述べましたが僕ははてなで7ヶ月運営して現在はWordPressに移行してます。

あわせて読みたい
ブログ7ヶ月目の運営報告とワードプレス(JIN)に移行した理由ども、残業リーマンブロガーのいっしーです。 繁忙期では月80時間ほどの残業になるんでブログ書く時間は吸い取られます。そんな中でも変...

この時に1つ大変と感じたのは、CSSで装飾したものは移行したら消えちゃいます。例えば囲い枠とか会話なども。文章中に多用しすぎるといつか修正が大変になることも。。

絶対移行する!って決めてる人は準備しといた方が後で楽ですよ♪

余計なお世話かもしれませんが、はてなからワードプレスに移行する人が増えてるようなので参考までに。

おしまい!

合わせて読みたい