ABOUT
運営情報
- 企業戦士がWEB経験0からはじめるSTEPUPブログ -
先日、Twiiterにある連絡が届きました。
それは、近所の気ままなゆるブログを運営する近所さんから相談でした。なんと内容は「パソコン上のフッターのデザインはどうもうまくいかず、参考にさせて欲しい」との事でした!
「え~~~~~、私でいいのっ!!!?」と思いましたよ…
なぜなら近所 (id:kinjyo8835) さんは2016年からブログを運営されている大先輩。。。そんな先輩からこんな相談を貰うなんて。。
しかし大変恐縮になりながらも、学ぶ機会を貰ったと思い、この度お手伝いをすることに致しました!
近所さんからのOKも頂いたので、記事に書くことにしました!!
順を追って説明を書いておりますので、これからカスタマイズをしてみたいという方は必見です!!
※コードの流れ自体は完全に「近所さんのブログ」をもとに作成しております。また今期は簡単なメンテナンス作業ですので、アニメーションなど複雑なコトはしておりません。
まずは構造のもととなる『html』の修正からしていきます。流れとしては「『html』で骨組みを作っていき、その後の『CSS』で肉付けしていく」というイメージがわかりやすいと思います。
まずは「フッターがどのような構造になっているか」を把握します。
把握する方法として活用するのが、GoogleChromeです。
簡単に作業方法を言えば、近所さんのサイトを検索し、フッターのところで『検証』を行います。
そうすると、htmlコードとCSSコードが出てきます。
後はそれぞれの位置にカーソルを持っていき、確認したい場所で『検証』することにより、どのような構造になっているかを確認することが出来ます。
そして、近所さんの場合、上記のような設定になっていることがGoogleChromeにてわかりました。
ブログを確認した中で、特に直したい箇所をチェック致しました。
① フッタータイトルの位置の調整
理由) 『ABOUT me』だけ左なので
② フッタータイトルを「ひらがなとカタカナ」で統一
理由) 『ABOUT me』だけ「英語」なので統一したほうが綺麗
③ p要素とul,li要素のフォントサイズと太さの統一
理由) 少し文字が細いので、少し強調
④ p要素とul,li要素の位置の統一
理由) 高さが違うので、同じ高さに。
あわせて「近所さんらしい世界観を出せないか」を検討致しました。
① ブログ全体で使用されている背景色や文字色を使用する。
理由) いろんな色を使用すると見栄えが汚くなる為
② 顔文字をふんだんに使うブログとのことなので、顔文字をアイコン化
理由) 独自性を出すためには「顔文字」が一番わかりやすい為。
③ 後は雰囲気に合わせた文章の修正
以上のことを念頭に置いて、まずはフッターの構成要素の見直しを測りました。
※今回の場合、フッターの幅調整やボックス自体の調整などは問題ないと判断したので、ボックスの中の修正を行いました。
スポンサーリンク
【説明】
▶ 全体の構造を作る為に『html』コードの見直しを測りました。上記に書いている通りですが、バランスを整えることを重視し、作業にかかりました。
▶ ブログ説明について、少し「⇒」の前に余白を入れることでタイトルよりも内側に入るように工夫。
▶ 顔文字をふんだんに使うことで世界観を表現
▶ いかにも読者になりたくなるようなそそる内容に(これは別にかも(笑))
▶footerbox_01の構成要素作成
▶footerbox_02の構成要素作成
▶footerbox_03の構成要素作成
スポンサーリンク
【説明】
【説明】
【説明】
【説明】
【説明】
ブログのカスタマイズについて記事を書く人って本当にすごいなと思いました。カスタマイズ自体はそんなに時間はかからなかったのですが、記事にするのに、3時間30分かかりました(笑)。
近所さん‼勉強させて頂き有難う御座いました♬
またカスタマイズしたい方も是非参考になればと思います。
おしまい。 【文字数:2340文字。作成時間:3時間30分】