いまいちど

子育てパパの雑記ブログ。主にガジェット、熱帯魚、ライフスタイル、ブログについて語ります。

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


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

いっしーさんのブログのスクロールメニューってどうやってるのですか?

それは、コピペです!

どうやって検索しましたか?

はにゃにゃ!?

これは意外でした。

カスタマイズは当然の如く検索してコピペ1発で済ませてきましたが、本当にわからない人はまずそこに辿り着くことも難しいのかな?と。

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

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

カスタマイズの必要性

f:id:hometaka5657:20171104235808j:plain


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

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

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

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

 

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


ちなみにMinimalism
レスポンシブにて使用中です。

ヘッダー画像

www.imaichido.com

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

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

メニューバー

www.yukihy.com

ゆきひーさんのブログを参考にしてます。カテゴリーが増えてくるとメニューは重要になります。読者から見て簡単にわかるものがいいかなと思います。

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

ソーシャルボタン

www.yukihy.com

こちらもゆきひーさんのブログを参考に。

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

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

リスト

www.north-geek.com

すいませんリストはカスタマイズしたのち、現在消しました。これを使用するとどうしても目次とアフィリンクに影響が出ます。

結構時間かけていじりましたが・・・「なくても良い。」そんな答えに達しました。詳しい人ならCSSをいじることで出来そうです。 

見出し

saruwakakun.com

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

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

・このサイトはこんなデザインです↓

h4に設定したのがこちら

左にちょっとしたアクセントを入れてみました。

ダッシュボード>カスタマイズ>デザインCSS。このデザインCSSにタグを入れることになります。

これがh4の実際のCSS。

.entry-content h4 {
padding: 0.3em 0.30em;/*上下 左右の余白*/
color: #000;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 6px #5DA797;/*左線*/
font-size:17px;
}

コピペして貼ると全く同じものになります。

h5に設定したのがこちら

さらに下に下線を入れてみました。色々試してみると面白いですよ!

囲い枠

saruwakakun.com

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

文章の強調などに使ってます。

アクセントになりお洒落にも

ポイント 使うごとに慣れますね!

下線マーカー

saitoumasami.com

良くある蛍光ペンです。

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

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

吹き出し会話

www.notitle-weblog.com

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

これは凄い!

難易度高そうだけど驚くほど使い易い!

カエレバ・ヨメレバ

www.yukihy.com

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

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

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

www.imaichido.com

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

文字の大きさ変更

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

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

画像リンク無効化

貼り付けた画像をクリックした時の動作を無効化します。

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

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

カスタマイズは自己責任

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

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

でも自己責任です

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

やばー!もう修復できねー!


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

www.foxism.jp

まとめ

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

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

おしまい