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

A.T.S Advanced Technology Service

NEWS RELEASE 新着情報

ATSブログ ATS BLOG

ブログ

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


こんにちは。
暖かい日が続き、早くも春を感じられるようになってきましたね。
重度の花粉症で薬が手放せないので、花粉シーズンが終わったら今度こそ免療療法をしたいATS広報です。

さて、先日6回目のWeb講座に行ってきました。
今回は、バックアップの取り方と、カスタマイズの続きをしていきます。
WordPressのバックアップは、プラグインを使用した方法もあるようなのですが、今回はサーバーから直接ファイルをダウンロードしてバックアップを取る方法を教えてもらいました。大きな修正や変更を行う前には、WordPressそのもののデータを手元に残しておくと安心して作業ができます。

そして、カスタマイズの続きで、フォントを変更します。
設定画面では変更できないため、WordPressのテーマ編集から、実際にCSSを修正していきます。CSSを修正する場合、間違えても元に戻せるよう忘れずCSSをメモ帳などにコピペしておきます。それから編集をはじめます。
まず、Webフォントから、変更したいフォントを選びます。
通常のフォントは、端末にインストールされているフォントしか表示できないため、端末ごとで表示がバラバラになってしまいますが、Webフォントはサーバーから読み込むため、端末に関係なく共通のフォントを表示させることができます。
フォントを選んだら、読み込みコードをWordPressのPHPファイルにコピペします。
そして、CSSファイルでフォントを指定します。ページ全体のフォントを変更したいので、bodyタグを探して、修正します。フォント名をコピペするだけなのに、緊張です!

作業に集中!



今までは設定画面で変更できるものばかりだったので、難解なコードが記述されているPHPとCSSでの修正は、余計に怖く感じてしまいました。バックアップも取っているので、元に戻せると分かっていても、今までコードとは無縁のPC苦手ママには、かなり神経を使う作業でした。
無事フォントが反映されると、サイトのイメージとマッチして、おぉ!しっくりきます!しかも読みやすい。フォント1つでここまで印象が変わるとは驚きました。
また、初心者がコードを修正するという作業を終え、充実感があります!

コードを確認中



最後に、サイドバーにプロフィールを表示する方法を教えてもらいます。
ウィジェットの設定画面から、カスタムHTMLをサイドバーに挿入し、HTMLコードを記述、写真をアップロードするのですが、時間の都合で続きは次回となりました。
今日は、PHPとCSSを修正するにあたって、ファイルやタグの説明もしてもらいながら行ったので、また少しレベルアップできた感じがします!
お忙しい中、次の予定時間ギリギリまで教えて頂きました。
加藤先生、どうもありがとうございました!

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

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

次回も、カスタマイズの続きをしていきます。
アラフォーママ ATS広報の“やってみました!”シリーズ⑦もお楽しみに!!