タグアーカイブ: WordPress

【 WordPressとは？ 超超超入門編 ＜第３弾＞】IT業界3ヶ月目のエンジニアがWordPressのテーマを使ってみた！

に が投稿

はじめに

こんにちは、Itoop（アイティープ）技術担当の佐藤です！

以前投稿した、

【 WordPressとは？ 超超超入門編 ＜第２弾＞】IT業界3ヶ月目のエンジニアがWordpressインストールまでにやることを解説！

に続く、第3弾の記事を書いていきます！

第2弾では、WordPressをインストールする前に、「サーバー契約」と「ドメイン取得/発行」をする必要があると書きました！

第3弾では、WordPressをインストールした後の、「まずやること」について書いていきます！ひとつ目は、「テーマをダウンロード」です！

「テーマ」とは！

パソコンにあるフォルダをイメージしてください。

そのフォルダの中に、たくさんのファイルがあります（例：page.php、single.php、画像ファイルその他たくさん）。

フォルダの中にあるpage.php、single.php等の一部のデザインを担当しているファイルが「テンプレート」です。

このフォルダとその中のファイルを含めたもの一式を、テーマといいます。

引用：https://wp-customize.net/wordpress/7924.html

テーマには有料版と無料版がある！どっちがいいの！？

テーマには、有料版と無料版があります。

有料版を選択すれば、デザインのクオリティやSEO対策は、ある程度保証されます。

ですが、だからといって無料版のテーマを使わない方が良いかというと、そんなことはありません！

無料版のデザインは、有料版ほどではないですが一から作り込む手間を考えれば、十分なクオリティを持ち合わせていると思います！

SEO対策に関しては、プラグインを追加することでセキュリティ面を強化することが出来ます。

プラグインについては、次回の記事でご紹介しますね！

テーマをつかってページ作成にチャレンジ！

ここからホームページを実際に作り始めていきます！

詳しい編集手順はこちらを参考にどうぞ！

参考：https://bazubu.com/wordpress-fixedpage-24169.html

おわりに

今回テーマについて学びました！

作り始めてから、本当にプログラミング言語の知識がなくてもページが作られることに驚きました！書きたいことをそのままタイピングしたり、画像を挿入したりするだけでした！

テーマの中に組み込まれている機能が僕の知識・技術力をカバーしてくれているようです。

徐々にWordPressの使い方が分かってきました。

できることが増えていくと、より業務への意欲が湧いてきますね！

今回はWordPressをインストール後にやること「テーマのダウンロード」について書きましたが、次回はそれに続く「プラグインのインストール」について書きたいと思います！

それでは皆さん、今日も良い一日をお過ごしください。

【簡単！SEO対策の初歩！】SEO対策とは何か、基本とメリットをまとめます！

に が投稿

こんにちは、Itoop（アイティープ）の橋本です。

突然ですが！みなさま、SEO対策はしていますでしょうか。

今回は、HP作成の後のSEO対策についてまとめました！

まずおさえておきたいSEO対策の初歩！ということで、SEO対策とは、という部分とメリットについて書きます。

実は、HPを作成しただけではSEO対策は不十分です！

しっかりメリットを理解した上で、設定を行いましょう！

SEO対策とは

SEOとは、「Search Engine Optimization」の略称のことで、日本語訳すると「検索エンジン最適化」です。

簡単にいうと、「検索結果の上位に表示されるために行う施策」のことで、検索エンジンからの集客を増やしたい場合に非常に重要になります。

SEO対策のメリット

SEO対策のメリットは、主に2つあります。

①質の高い見込みユーザーを集客することができる

②検索順位が上がることでブランディング効果が大きい

しっかりSEO対策を行うことで、売上に繋げていくことが可能です。

WordPressでSEO対策を行う場合は、無料プラグインなども出ており、簡単に導入することも出来ます。

作成したサイトにSEO対策をしよう！

SEO対策の初歩の初歩について話してきましたが、いかがでしたでしょうか。

HP作成の際に大事なことだと思うので、HPにより多くの人がアクセスするように、SEO対策をばっちりしていきましょう！

それでは、本日も素敵な一日をお過ごしください。

【WordPressとは？ 超超超入門編 ＜第２弾＞】IT業界3ヶ月目のエンジニアがWordPressインストールまでにやることを解説！

に が投稿

こんにちは、Itoop（アイティープ）技術担当の佐藤です！

以前投稿した、

【 WordPressとは？ 超超超入門編 ＜第1弾＞】IT業界3ヶ月目のエンジニアがWordPressについて調べてみた！

に続く、第2弾の記事になります！

前回「WordPressとは何か」について学び、

WordPressを使えば、初心者でも簡単にホームページが作れるということを知りました！

早速インストールして始めようとしたところ、その前にやるべきことが2つありました！

①サーバー契約

②ドメイン取得/発行

それぞれ耳にしたことはありましたが、実際にやるとなると難しいイメージがありました。

先輩方の力をお借りして、順々に進めることができたので、詳しく書いていきます。

サーバーとは

サーバーとは、簡単にいうと、「サイトやメールなどの情報を保管・配信するもの」です。

自力でサーバーを運用する際には、以下のような知識が必要となります。

  • Webサーバーの知識
  • ハードウェア・ソフトウェアの知識
  • ドメインやIPアドレスに関する知識
  • セキュリティに関する知識

僕は、こんなにたくさん覚える必要があるのか！？と最初は戸惑いました。

流石に全てを一から学ぶと時間がかかるので、今回は「レンタルサーバー」を契約しました。

レンタルサーバーとは、「複雑なサーバー管理を業者に任せつつ、より高速かつ安定した環境でウェブサイトを公開するもの」とあります。

引用：まずはレンタルサーバーの契約が必要

https://www.xserver.ne.jp/manual/man_how_to_start_wpblog.php

レンタルサーバーを契約することで、豊富な知識がなくとも、簡単にサーバー契約ができます。

レンタルサーバーには、エックスサーバーなどの数種類のサーバーがあります。

今回は、以下の理由からエックスサーバーを採用しました。

  • 低価格
  • サーバーダウンしない安全性と通信速度
  • WordPressの導入が簡単

レンタルサーバー契約手順

参考：https://www.xserver.ne.jp/manual/man_how_to_start_wpblog.php

ドメイン取得/発行

サーバー契約が終わったら、次にドメインの取得/発行を行います。

ドメインとは、わかりやすくいうと「インターネット上の住所」です。

閲覧したいWebサイトの特定や、メール送信に必要です。

例）

URL→//www.xserver.ne.jp/

ドメイン→www.xserver.ne.jp

引用：ドメインの構造

https://www.xserver.ne.jp/blog/about-domain/?gclid=Cj0KCQjwub-HBhCyARIsAPctr7x5yU658OPdT7pNxm10feNp0LwYhF5PRRUraNVcKLAzQY7ke-9T9CkaAnhxEALw_wcB#%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A8%E3%81%AF

ドメインは無料でも発行可能なのですが、セキュリティ面や今後のサイト運用を考慮して、有料のものを使用することにしました。

有料のドメインは、1000円前後の費用がかかりますが、信頼性が高く、ホームページ作成であれば検索エンジンで上位に表示されやすいというメリットがあります。

ドメインは1日あれば取得可能で、特に難しさを感じることはありませんでした！

ドメイン取得手順

参考：独自ドメイン取得手順

https://www.xserver.ne.jp/manual/man_how_to_start_wpblog.php

これまでの工程を済ませ、ようやくWordPressをインストールしました！

こちらも手順を確認しながらやれば、簡単にインストールができました！

WordPressインストール手順

参考：https://www.xserver.ne.jp/manual/man_install_auto_word.php

今回はWordPressをインストールするまでに必要なことについて、紹介しました！

ホームページを作る際に、情報を保管する場所や、インターネット上に住所を作る必要があると学びました！

次回はWordPressインストール後の知識や学びを書いていこうと思います！

それでは皆さん、今日も良い一日をお過ごしください。

初めてのホームページ作成のやり方と、簡単かつ大事な3つのポイント

に が投稿

はじめに

こんにちは！

Itoop（アイティープ）技術担当の佐藤です！

世の中には様々な企業があり、多種多様なホームページがありますよね！

中には、「こんなホームページを作ってみたい」と思うサイトもあるのではないでしょうか。

ただ、初めてホームページを作成する場合、どこから手を付ければいいのか分からない方もいると思います。

今回、新卒・IT未経験の僕が、ホームページを初めて作成したときのことを振り返り、作成過程をまとめてみました。

ゴールを明確にする

まずは、どんなサイトを作るのかを明確にしました。

何かを作成する際は、最初にゴールを明確にすることが重要だからです。

そうすることによって、実現するために必要な知識やスキルが分かってきます。

ゴールを決める際のおすすめは、見本となるサイトを見つけることです。

自分が「面白いな！」と思えるサイトを選ぶと、作成するモチベーションも上がり、仕事が一層楽しくなると思います！

WordPressでホームページ作成

そうしてゴールが明確になったら、次は実際にホームページ作成に取り掛かりました。

使用したソフトは「Wordpress」です。

WordPressは、ホームページ作成経験がない方でも、使いやすいソフトだと思います。

コードを打ち込まなくても感覚的に作成が可能なうえ、

「今作成した部分ってどんなコードが使われているんだろう？」

という時には、コードを見ることができます。

そうしてコードを学びながら、ホームページを作成しました。

「まず、言語の勉強とか必要じゃない？」と思う方もいるかもしれません。

僕も、元々は基礎知識をしっかり身に着け、準備が整ったら実践をするタイプでした。

しかし、実践しながら学ぶ方が何倍も早く技術が磨かれるし、何より楽しいです。

3つのポイント

ここまで、ホームページ作成の具体的な流れをお伝えしました。

次に、初めてホームページを作成するときの、3つのポイントをご紹介します。

1.成果物のイメージを明確にすること

最初にゴールを明確にすることで、具体的に必要な作業が分かってきます。

特に初めて作る場合は、作成するサイトのイメージが中々湧かないので、見本サイトを見つけるのはおすすめです。

2.教えてくれる人がいること

作成しているうちに、疑問点がたくさん出てきます。その疑問を解消する早さが、仕事の早さに直結すると言っても過言ではないです！

疑問解消してくれる人の存在がいることで、仕事の早さが2倍も3倍も変わります。

3.実践を通して学ぶこと

勉強して事前準備をバッチリしてから作成するのも良いですが、個人的には実践しながら学ぶことをおすすめします。

手を動かしながら疑問解消することで実践的な技術も磨かれますし、自分のスキルアップが目に見えるので、仕事が楽しくなります。

おわりに

今日は、初めてホームページ作成する方へ向けて、やり方とポイントをお伝えしました！

この記事を読んで、実践を通してスキルアップした！仕事が楽しくなった！という方がいますと幸いです。

それでは皆さん、今日も良い一日をお過ごしください。

【初心者必見！】左右寄せ！レスポンシブ対応を見据えた構成！

に が投稿

こんにちは！

Itoop（アイティープ）の技術担当、佐藤です！

だんだん夏らしくなり、スーパーではスイカや夏野菜が目に入るようになってきましたね！

暑くなってきたからこそ、旬のものでエネルギーを補給したいです！

ところで、今回はWEBページ改修依頼の対応中にコンテンツの左寄せがうまくいかない事象を解決したので、理解の整理もかねて紹介させてもらいます！

初めて対応した、コンテンツの左寄せ！

今回は、WEBページの要素について左寄せというのを対応しました。

調べたところ、真っ先に目についたのが「float（フロート）」！

「float」は左右に要素を寄せるときに使う設定で、left、rightと指定することで左右に寄せることができます。

floatを利用することで左寄せが完了しました！

しかし、このあと対応を続けていくなかで想定外の問題が発生しました。。

問題発生！要素が重なってしまう！

左寄せは「float:left」で実現しました！

しかし、レスポンシブ対応といって、画面の幅が違うデバイスに対応させようとしたとき、不思議な挙動をするようになりました。

対象の画像と別の画像が重なって見えるようになってしまったのです！

別の画像は重ならずに左右に分かれたままだったり、左右に合った要素の段が変わったりしていたので、素直に「なんでこんなことに？」と驚きました！

悩んでも分からない僕は、先輩に相談しました！

どうやら左寄せを実現するために利用した「float」の仕様が問題でした！

『display:inline-block』で解決！

先輩の言葉をもとに調べたところ、左寄せを実現するために複数のやり方を発見しました！

例を挙げると、「float」「inline」「inline-block」・・・

それぞれ役割が違いました！

原因としては、今回利用した「float」の仕様でした。ほかの要素に「float」の設定がないと干渉しないという動きをします。

ほかの要素との間隔を直接数値で指定していたのもあって、画面の幅が変わると画像と画像が重なるような動きになっていました！

今回の対応に限れば「display:inline-block」という設定を「float:left」の代わりに利用するのが最適でした！

ほかの画像と重なることもなく、そのあとに加えた設定とも競合しませんでした！

参考：https://saruwakakun.com/html-css/basic/display

おわりに

今回、自分の能力を超えた挑戦だったので、先輩に助けていただいて本当にありがたかったです！

「左寄せ」ひとつにしても、複数の対応方法があり、自分の考えに固執していたことに気づけました！

人に聞くことで、視点を増やせることと、CSSの操作の理解が深まりました！

この記事が自分のような駆け出しのエンジニアの力や、問題解決のきっかけになったらとても嬉しいです！

今日も良い一日をお過ごしください。

【 WordPressとは？ 超超超入門編 ＜第1弾＞】IT業界3ヶ月目のエンジニアがWordPressについて調べてみた！

に が投稿

こんにちは、Itoop（アイティープ）技術担当の佐藤です！

社会人になりはや3ヶ月、日々の業務や研修で多くのことを学んでいます。

最近は先輩に教えてもらい、WordPressについて勉強しているので、今日はそのことについて書きます！

そもそもWordPressとは何なのか

WordPressとは、

・オープンソースのブログ投稿管理システム、CMS（コンテンツ・マネジメント・システム）

・サイトやブログを簡単につくれる仕組み

・HTMLやCSSなどのコードがわからなくても、記事やニュースを更新できるソフトウェア

引用：https://digital-marketing.jp/creative/what-is-wordpress/#WordPress

簡単にいうと、

「プログラミングができなくても簡単にWEBサイトがつくれるソフトウェア」ということです！

企業のHPやコラムページに活用されていて、なんと世界の4分の1を超えるサイトがWordPressでつくられています。

なぜこんなにもWordPressが使われているのか、実際に調べてみました！

参考：https://digital-marketing.jp/creative/what-is-wordpress/

参考：https://techacademy.jp/magazine/6693

WordPressが世界的なシェアを誇る理由

こちらが2021年7月時点での世界のCMSのシェア一覧です。

引用：https://w3techs.com/technologies/overview/content_management

このようにWordPressは、CMSの中でも、世界シェアダントツのNo.1という結果です。

WordPressが選ばれる理由としては、

・初心者でも簡単で、なおかつデザイン性の高いサイトが作成可能

・無料で使うことができ、商用利用も可能

・世界中に開発者がいるため、分からないことは調べれば対処法がすぐに出てくる

などが挙げられます。

僕みたいに、これからHP作成にチャレンジしていくぞ！という人にとっては、とてもよい状況が整っていると思いました！

おわりに

今回は、最近学んだWordPressの概要について紹介しました。

第2弾では、実際にWordPressを使用してHP作成していく中での気づきや学びを発信していこうと思います！

それでは皆さん、今日もよい一日をお過ごしください。