人生の物語を楽しむブログ!ネガティブ・ライト

人生の物語を楽しむブログ!ネガティブ・ライト

25万PV達成!人生の悩みや理不尽な出来事にツッコミを入れたりしてます。あと将来的に本とかだしたい。出版社の人たちカモン!依頼も受け付けております。

初心者の僕がはてなブログカスタマイズ!ブログデザインの先輩を紹介

スポンサーリンク

スポンサーリンク

ブログ

どーもーiwakoです。 

はてなブログに慣れるまでは、宣伝の意味もかねてできるだけ毎日更新しようと心がけている今日この頃。でもなかなかそうはできないんだよなあ。

会社終わりに歯医者行ってるしね。週に2、3日だけだけど、歯医者行ってるからしょうがないよね!昨日は30分くらい歯茎から血が止まらなくて院長さんがずっと止血してた。

 

はてなブログにしてから1週間が経過したのでこのブログを作るうえでお世話になったサイト様を紹介します。

実はね、毎日毎日カスタマイズはしてるんですよ。ここ3日、4日はブログの見た目的にはそんなに変化はないので気づいてない人のほうが多いと思いますけど、実は会社帰って記事書いて、記事書く合間に少しカスタマイズして・・・見やすさ、デザイン面ともにしっくりくるブログなりました。

 

ほとんどHTMLコピペですけどね!!

 

その代わりCSSをめっちゃいじりました。いじり倒してやりました。

そしてこうなりました。

僕のブログ

 

ではまずはテンプレートから紹介です。

 

 

 

 僕のブログのすべての基礎となるテーマ!その名は「Naked」!

こちらです。

www.yukihy.com

ブログ:Yukihy Life 作者:ゆきひーさん 

 

すばらしい!使いやすい!カスタマイズがある程度自由にできる!僕の作ったヘッダー画像がピッタリ収まる(これ大事)

はてなブログでは珍しいフッター部分を作り込むことができるみたいです。人気記事置いたりとか。

僕はやらないですけどね!フッター画像しか置いてないですけどね。

 

あとスマホをパソコンから見たときと同じデザインにできるレスポンシブ対応なのも嬉しいですよね。

はてなブログだとスマホのブログデザインはみんな一緒になってしまうので。最初スマホ開いたときなんだこれ、見出しなんか太字になっただけやないかーい!って突っ込みましたもん。

 

まあ僕はやらないんですけどね!

 レスポンシブだとせっかく作ったヘッダー画像が半分くらいに切れてしまうんですよね。タイトルも切れるのでこりゃーいかんとレスポンシブはしないことに決めました。

 

というわけでほんとに素晴らしいテーマをありがとうございます。これからも使わせていただきます。

 

メニューバーカスタマイズ

続きましてはメニューバーのカスタマイズです。

 

theme-naked.hatenablog.jp

ブログ:Theme Naked Blig(ゆきひーさんのNakedカスタマイズ専用ブログ)  作者:ゆきひーさん 

 

おおっとぉ!!またゆきひーさんキター!!

お世話になりましたああ!!

 

僕がしたかったメニューはマウスカーソルが上に乗ると子カテゴリーがふわぁって感じででてくるやつのので、子カテゴリがでるメニューバーを作ってる人はたくさんいるんですけど、このゆきひーさんのレスポンシブにも対応しているメニューバーが一番良さそうだと思って決めました。

 

レスポンシブ・・・使わないんですけどね!

 

 

続いてはスマホのデザインですよ!気づいてました?パソコンとスマホじゃデザイン違うんですよねー。一つのブログで二度おいしい!こりゃあお得だぜ(?)

 

僕のスマホブログ

 

スマホのデザインカスタマイズ

www.ituore.com

ブログ:いつから俺ができないと錯覚していた 作者:shun さん 

 

こちらはスマホ用デザインですね。僕はレスポンシブ使いたくないので、どうにかしてレスポンシブなしでスマホのデザイン変えられないかなーと思ったときにこちらの記事を見つけました。

トップページのデザインから見出しの色のつけ方まで懇切丁寧に書かれています。すごくわかりやすかったです。

 

ただしはてなブログProにならないとスマホのデザインいじれないので注意です。

ありがとうございましたー。

 

スマホのメニューバーデザイン

www.ituore.com

ブログ:いつから俺ができないと錯覚していた 作者:shun さん 

 

shunさあああん!!またお世話になりましたー!!

おおうゆきひーさんと同じくらいお世話になってるなあもう。

このメニューは・・・なんて言うんでしょう、何かカテゴリー一覧がくるくる回ります。何か!指でスライドさせながらくるくる回ります、見れば分かりますけど。かっこいい。

ありがとぅわーああございまあすうぃたーあああ!!

 

 トップページを一覧表示に

powerbombkun.hatenablog.jp

ブログ:ボム君.com 作者:名無し?(id:powerbombkun )さん

 

はてなブログのトップページってデフォルトだと長ーい記事が一つずつずらーって並ぶんですよね。何かね・・・嫌です。

記事書くときに『続きを読む』を挿入すると短くなりますけど、記事によって挿入場所が変わってくるので、短くなった記事の高さにばらつきがでて見た目が悪くなります。

 

そこで一覧表示ですよ!結果すっきり見えるようになりました。ありがとうございます。

 

 プロフィール画像の大きさ変更

chiroru.hatenablog.com

ブログ:#ChiroruLab-趣味と日々の雑記録- 作者:chiroruさん

 

最初見たときから変えたかったです。だってデフォルトはすごく小さいんだもん。すごい違和感。

ほんとに簡単でした。ありがとうございました。

 

パンくずリスト表示

bulldra.hatenablog.com

 ブログ:太陽がまぶしかったから 作者:池田仮名さん

 

パンくずリストって皆さん分かりますか?

 

例えばこの記事だと記事タイトルの下に小さく書いている

無気力日誌>いろんな記録

 

こういうやつです。これはカテゴリーに階層を作っていて今この記事はどの階層にいるのかを表しています。この記事は『無気力日誌』の中の『いろんな記録』にいるという具合に・・・。

これは作らないともちろん階層が作られないわけで『無気力日誌』と『いろんな記録』、それぞれ別個のカテゴリーとして扱われます。

 

いや、いいんですけどね。運営には支障はありません。

ただSEOに効果あるよ!ってのを小耳に挟んだので作っちゃいました。カテゴリー分けめんどくさかったです。

 

池田仮名さん!どうもありがとうございました!

 

フッターに画像を貼る

www.iwako-light.com

ブログ:人生の物語を楽しむブログ!ネガティブ・ライト 作者:iwako

 

It's Me

 

意味もなく自分のブログ貼りましたけどそう、僕が自分でやりました。あんまフッターにオリジナル画像入れてる人っていないんですよねえ。

意味ないですもんね!だって!あんま人目に触れると子じゃないし。でも入れたかったんですよお。

 

 管理画面からデザイン→カスタマイズ→フッタに飛んで

 

<div class="fot"><img src="ここに自分のはてなフォトライフでアップロードした画像を入れてね♡" ></a></div>

 

これだけです。ね?簡単でしょ?

ちなみにdivタグで閉じたクラスを設定しておけばCSSで、配置した画像に対して位置を変えたり大きさ変えたりといろんな変更も可能になりますよ。

 

僕の場合は配置した画像が小さかったため画像が右半分しかなくて左はなんもない状態でした。

そういう場合は

 

.fot{background-repeat:repeat }

 

これは指定した画像を繰り返して表示しますよ。と言う意味です。貼り付けた画像をそのまま繰り返してますね。

 

そんだけー!以上!

 

まとめのような何か

 どうでしたか?僕のブログは皆さんのお力添えがあったからこそ今のこのブログができております。

もう感謝です!ただただ感謝です!

おそらくはてなブログをやってる人はお世話になってる人も多いと思いますけどね。

 

もう少し試したいこともやりたいこともあるので気が向いたらまたこういう紹介記事も書くかもです。

 

でわでわ。