yonekichism

グルテンフリーを開拓する盛り合わせブログ

【攻略】初心者ブロガー カスタマイズのダンジョンに迷い込む

カスタマイズの迷路に迷い込む

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

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

そんなわけで、一日かけてブログの模様替えをしました。
そして見事に迷いました。しかも奥深くじゃなくてめっちゃ入口付近で。

f:id:yonekichism:20170306211310p:plain
画像引用元:https://play.google.com/store/apps/details?id=jp.co.happyhoppyhappy.android.escape&hl=fi

「Html」や「CSS」は聞いたことはあるけど、じぇ…じぇくえり? なにそれ?
いまだによくわかってないです。

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

Before
f:id:yonekichism:20170306202211p:plain

After
f:id:yonekichism:20170306202221p: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を都度控える

いろんなサイトを見ることになるので、収集つかなくなります。この記事でも もしかしたら漏れてしまったサイトがあるかもしれないです。

また、コードをいじるのは全て自己責任になります。リスクを踏まえたうえでクエストに旅立ってください。

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