スペシャリストを目指す方のプロジェクト選びは、ATS【エーティーエス】へ。次のステージを目指す方にベストな働くをサポートします。

A.T.S Advanced Technology Service

NEWS RELEASE 新着情報

ATSブログ ATS BLOG

ブログ

アラフォーママ ATS広報の“やってみました!”シリーズ⑦
~ホームページ制作にチャレンジ~


こんにちは。
雨が降ったり、急に暖かくなったり、気まぐれな春のお天気が続いていますね。
雨の日は、10キロの娘を抱っこ紐で保育園送迎しているため、腰痛に悩むATS広報です。

さて、先日7回目のWeb講座に行ってきました。
今回も、WordPressでレイアウトのカスタマイズの続きをしていきます。
まず、前回途中になっていたサイドバーへのプロフィール表示は、自分で調べてHTMLを記述し、なんとか成功したのですが、フォントとプロフィール写真のカスタマイズが思い通りに表示できていませんでした。
前回学んだフォント変更について、補足で資料も頂き、自分でCSSでの修正を試みたものの、反映できなかったので、そこから解決していきます。

まず、変更したい箇所が、ソースのどの部分か確認するため、デベロッパーツールを使用します。ブラウザでサイトを開いてF12を押すとデベロッパーツールが開きます。矢印のアイコンをクリックし、調べたい箇所をサイト上で選択すると、ソースのどの箇所か表示してくれるなんて、デベロッパーツール、ほんと神すぎます!ソースを確認してみると、プロフィール表示のフォント指定ができていなかったため、CSSファイルの最後に、改めて該当箇所のフォントを指定するコードを記述し、無事変更できました。


CSSでの修正は、自分でトライ&エラーを繰り返し、成功していた箇所もあったので、前回のようなコードを触ることへの恐怖感は無くなりました。また、知識が無いながらも「ここらへんを修正したらいいのかな?」という勘も少しばかり身についたようです。これは自分でも驚くべき進歩です!コードを触ることにビクビクしていた私が、調べて普通に記述できるようになっているのですから!


次にプロフィール写真が丸く表示されるように変更します。
ここでは、HTMLで変更したい箇所にクラス名をつけ、CSSでその箇所のスタイルを指定し、写真を丸く変更することに成功しました!


今回は講座時間内に、いくつかの変更を行うことができ、自分でも成長を感じられる時間となりました!
細かい変更が終わり、残りの時間で、完成に向けてトップページの設定を見直していきます。
不要な表示を消し、理想のサイトトップになるよう仕上げていきます。
完成目前といったところです。加藤先生、どうもありがとうございました!

ATSではWワークで働きたい方を応援しています!

加藤まやこさんのサイトはこちら↓
http://www.lunebleue-luxe.com/

次回は、いよいよ最終回!サイトの完成を目指し、トップページのカスタマイズをしていきます。
アラフォーママ ATS広報の“やってみました!”シリーズ⑧もお楽しみに!!