ぐるふりらいふ

グルテンフリー同盟会本部

初心者はてなブロガーにおすすめ!ブログカスタマイズのまとめと注意点

カスタマイズのダンジョンに迷い込む

はてなブログを書き始めて二か月。

記事を書くのに手いっぱいで、デザインはほったらかしでしたが、記事が増えるほど後の修正が大変になってしまいます。

そんなわけで、一日かけてブログの模様替えをしました。

そして見事に迷いました。

しかも奥深くではなく、入口付近で。

欲しい宝箱の完全制覇は無理だったけれど、それでも少しのアイテムをゲットしてダンジョンから抜け出すことができました。

Before
f:id:yonekichism:20170306202211p:plain

After
f:id:yonekichism:20170306202221p:plain


下記、初心者ブロガーが迷路に迷ったところを救い出してくれた 先輩ブロガーさんたちの叡智のまとめ、及び自分用の備忘録になります。

f:id:yonekichism:20170306211310p:plain
画像引用元

グローバルナビゲーションの設置

これが一番てこずりました。

でも設置できたおかげでちゃんとしたブログに見えるようになった気がします。

ユキヒーさんはいろんなところで登場します。

相対性理論とかブログで書いていました。

敷居が高くて読めていませんが、天才さんです。

www.yukihy.com

見出しのカスタマイズ

おしゃれ感が増します。こちらもユキヒーさん。

www.yukihy.com

関連記事の設置

フッタに設置しました。これまたユキヒーさん。

www.yukihy.com

トップ画面を一覧表示にする

ブログトップに飛んだ時に 本文が延々と表示されるのを解消します。

「続きを読む」だと表示される文字数等に一貫性がないため、こちらのほうがすっきり見える気がします。

www.cocococococococococococo.com

タイトル周りの余白調整

ヘッダに表示されるタイトルロゴの下にある余白を調整できます。

地味に気になっていたので解消できてすっきり!

ちなみに、ロゴの上の余白が気になる場合はオリジナルのロゴファイルの大きさや形が原因かもしれないです。

元ファイルをクロップをしたら問題解決しました。

www.future-nova.com

スマホ画面のカスタマイズ

www.ituore.com

SNSのシェアボタンのカスタマイズ

ポチッとな。

shiromatakumi.hatenablog.com

吹き出しを作る

プロフィールのページに使いました。

でもChromeの拡張機能は使えなかったです。

なので手動でHTMLに打ち込んでいます。

shiromatakumi.hatenablog.com

まとめ

途中で本当に途方に暮れましたが、検索すれば必ず答えは見つかります。

特に私程度のど素人であれば、はまる落とし穴なんか鼻の穴程度です。

根気があればできると思うので、あきらめずに頑張ってください。

一つ言えるアドバイスとしては、ソースコードは貼ったり消したりを繰り返す時があります。

なので…

  • コードのバックアップを取る
  • 採用したソースコード元のURLを都度控える

いろんなサイトを見ることになるので、収集つかなくなります。

この記事でも もしかしたら漏れてしまったサイトがあるかもしれないです。

また、コードをいじるのは全て自己責任になります。

リスクを踏まえたうえでクエストに旅立ってください。

それでは健闘を祈ります!


↓その後またカスタマイズの旅に出ました↓
www.yonekichism.com