元『企業戦士』の1日1歩ブログ ~素晴らしき日常~

のんびりいこうやない。今日も明日も、明後日も。

f:id:chihiro_dayori:20170523173117p:plain

1ニチ1ポブログ

キニナル日常をポジティブに発信するブログ

【初心者必見】 ブログデザインについて相談を受けたので、お手伝いしてみた♬

f:id:chihiro_dayori:20170603161947j:plain

先日、Twiiterにある連絡が届きました。

それは、近所の気ままなゆるブログを運営する近所さんから相談でした。なんと内容は「パソコン上のフッターのデザインはどうもうまくいかず、参考にさせて欲しい」との事でした!

「え~~~~~、私でいいのっ!!!?」と思いましたよ…

なぜなら近所 (id:kinjyo8835) さんは2016年からブログを運営されている大先輩。。。そんな先輩からこんな相談を貰うなんて。。

しかし大変恐縮になりながらも、学ぶ機会を貰ったと思い、この度お手伝いをすることに致しました!

近所さんからのOKも頂いたので、記事に書くことにしました!!

順を追って説明を書いておりますので、これからカスタマイズをしてみたいという方は必見です!!

※コードの流れ自体は完全に「近所さんのブログ」をもとに作成しております。また今期は簡単なメンテナンス作業ですので、アニメーションなど複雑なコトはしておりません。

 

Before

f:id:chihiro_dayori:20170603163840p:plain

After 

f:id:chihiro_dayori:20170603164720j:plain

今回の作業する上で使用したのは

f:id:chihiro_dayori:20170603165630j:plain
▼▼▼▼

f:id:chihiro_dayori:20170603170607j:plain

 

作業方法

まずは構造のもととなる『html』の修正からしていきます。流れとしては「『html』で骨組みを作っていき、その後の『CSS』で肉付けしていく」というイメージがわかりやすいと思います。

① 構造の確認

f:id:chihiro_dayori:20170603172949p:plain

まずは「フッターがどのような構造になっているか」を把握します。

把握する方法として活用するのが、GoogleChromeです。

簡単に作業方法を言えば、近所さんのサイトを検索し、フッターのところで『検証』を行います。
そうすると、htmlコードとCSSコードが出てきます。
後はそれぞれの位置にカーソルを持っていき、確認したい場所で『検証』することにより、どのような構造になっているかを確認することが出来ます。

そして、近所さんの場合、上記のような設定になっていることがGoogleChromeにてわかりました。

② 修正箇所を見つける

ブログを確認した中で、特に直したい箇所をチェック致しました。

  ① フッタータイトルの位置の調整
    理由) 『ABOUT me』だけ左なので

  ② フッタータイトルを「ひらがなとカタカナ」で統一
 
   理由) 『ABOUT me』だけ「英語」なので統一したほうが綺麗

  ③ p要素とul,li要素のフォントサイズと太さの統一
    理由) 少し文字が細いので、少し強調

  ④ p要素とul,li要素の位置の統一
    理由) 高さが違うので、同じ高さに。

③ 近所さんの世界観にこだわる

あわせて「近所さんらしい世界観を出せないか」を検討致しました。

  ① ブログ全体で使用されている背景色や文字色を使用する。
    理由) いろんな色を使用すると見栄えが汚くなる為

  ② 顔文字をふんだんに使うブログとのことなので、顔文字をアイコン化
    理由) 独自性を出すためには「顔文字」が一番わかりやすい為。

  ③ 後は雰囲気に合わせた文章の修正 

 

以上のことを念頭に置いて、まずはフッターの構成要素の見直しを測りました。

※今回の場合、フッターの幅調整やボックス自体の調整などは問題ないと判断したので、ボックスの中の修正を行いました。

順に追って、説明していきます。

スポンサーリンク
 

 

文章の構造を『html』で作成していきます。

【ここでの完成図】

f:id:chihiro_dayori:20170603182143j:plain

【説明】

▶ 全体の構造を作る為に『html』コードの見直しを測りました。上記に書いている通りですが、バランスを整えることを重視し、作業にかかりました。

▶ ブログ説明について、少し「⇒」の前に余白を入れることでタイトルよりも内側に入るように工夫。

顔文字をふんだんに使うことで世界観を表現

▶ いかにも読者になりたくなるようなそそる内容に(これは別にかも(笑))

【コード】

▶footerbox_01の構成要素作成

▶footerbox_02の構成要素作成

▶footerbox_03の構成要素作成

 

文章の装飾を『CSS』で行っていきます。

スポンサーリンク
 

 

① タイトルの変更

【ここまでの完成図】

f:id:chihiro_dayori:20170603175659p:plain

【説明】

しっかりタイトルとして存在感を出すために、枠を挿入しました。また文字をセンタリングしました。

【コード】

② 背景色を追加

【ここまでの完成図】

f:id:chihiro_dayori:20170603180840p:plain

【説明】

背景をつけることで、ボックス毎にまとまりを表現しました。背景色は、何色でも大丈夫ですが、今回は近所さんのブログイメージに合わせて、灰色にしました。

 

【コード】

③ リンクの調整

【ここまでの完成図】

f:id:chihiro_dayori:20170603185348j:plain

【説明】

リンクの文字サイズと太さの変更を実施致しました。今回は文字色を黒にしていますがリンクなので色を変えてもいいかもしれませんね。

 

【コード】

④ フッターのp要素の文字変更

【ここまでの完成図】

f:id:chihiro_dayori:20170603184631j:plain

【説明】

文字の太さを、リンクの太さと同じ太さにしています。

 

【コード】

⑤ 読者ボタンの調整

【ここで、完成です】

f:id:chihiro_dayori:20170603184206j:plain

【説明】

ボックスの中に「ボタン」があるように見せる為、ボタンの幅調整し、それに伴い、文字サイズもボタンの中に入るように調整をを行いました。

 

【コード】

 

 

まとめ

ブログのカスタマイズについて記事を書く人って本当にすごいなと思いました。カスタマイズ自体はそんなに時間はかからなかったのですが、記事にするのに、3時間30分かかりました(笑)。

近所さん‼勉強させて頂き有難う御座いました♬

またカスタマイズしたい方も是非参考になればと思います。

おしまい。 【文字数:2340文字。作成時間:3時間30分】