行雲流水

禅僧(禅宗のお坊さん)が綴る発想の種。旅は、私に大きな影響与えてくれました。 旅は、今の私を形作る糧となりました。 旅は、仏教徒として、禅僧として今を生きる私の大事な一部となりました。

MENU

はてなブログをカスタマイズ!cssやhtmlの知識のないブログ初心者が参考にしたサイト①

何だかんだ言って、色々手を付けくわえて行ってしまう私。ブログも初めてでしたが、少しでも見やすいようにしたい。ってことで、備忘録の意味を含め、カスタマイズする際に、参考にさせて頂いたサイトを紹介します。

参考になったサイト

ブログ初心者、そしてcssやhtmlの知識の無かった私でも、コピペなどで簡単にできるものばかりです。

①最初のステップ

チェックしながらカスタマイズしたい点など絞っていきました。ここにも乗って無くて変えたいデザインはグーグルで検索しました。

blog.hatena.ne.jp

 

②メニューバー

メニューバーを作りたいということで参考にさせて頂きました。htmlとcss、コピペするだけで簡単にできました。

感謝

maroom.hateblo.jp

※別の方法でまたカスタマイズしました。

 

③トップページを記事一覧形式へ変更

トップページに記事が全部表示されるとなんだか見にくいなぁ……ということで、proじゃなくても変更できるやり方発見。コピペするだけで簡単にできました。

感謝

iitaikotoha.hatenablog.com

※最終的にこの変更は元へ戻しました。

 

④カテゴリーのタグの色を変更

背景を変えることで見えにくくなったしまったカテゴリー。カテゴリータグの色を変更するCSS。コピペで簡単にできました。

感謝

nohack-nolife.hatenablog.com

 

⑤ブログ内のリンクを新しいタグ(別窓)で開く

ブログ内のリンクは通常、同ウィンドウで開いてしまいます。ブログ内で自動で生成されるはてなキーワードへのリンクも同じくです。注釈や外部リンクは別窓の方が便利だと思う私。やはり同じ状況で困っている人はたくさんいるんですね。今回もコピペで簡単。ヘッダにコピペします。

感謝

maroom.hateblo.jp

 

⑥画像の自動リサイズの画質を調整

読者が読むにはページは軽い方がいい。そこで画像を調べてみたいら、500kを超えているものがある。しかも、わざわざリサイズしたものまで500k程になっているものも。

なんで……? ってことで調べてみました。

どうやらはてなブログの編集画面から画像をアップロードする。すると、自動で1024ピクセルにリサイズされるようです。場合によってはわざわざリサイズしていても重くなることもあるようです。

解決方法は以下のサイトに載っています。感謝。 

blog-css.hatenablog.com

 

 ⑦記事下のシェアボタンをカスタマイズ

はてなブログのシェアボタンがうまく表示されない……。ってことで、もういっそカスタマイズすることにしました。その際参考になったサイトがこちら。コピペで簡単にできます。

感謝

www.ituore.com

 ……が、一つ問題が。このサイトの通りしても、facebookのシェアの数が何度どうためしても0のまま。いっそ非表示にしたい。てことで探しました。私はcssやhtmlの知識はそれほどないのですが……。

上記のサイトで、デザイン>記事>記事下に入力したシェアボタンのhtmlコード。それを書き換えました。コピペがそのままなら<!--Facebook-->の所が。

<span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>

それを以下の通りに書き換え。

<span class="small-text">Facebook</span>

※Yuma's LOGさんより引用

 解決のつながったのはこちらサイトのおかげです。感謝

yumasty.hatenablog.com