【ココナラ副業】WordPressのHTML/CSSの修正の案件

読者のみなさまの中には、副業をされている方・始めようと考えている方・やりたい方も多いかと思いのではないでしょうか。

本ブログで定期的に、当ブログ筆者が細々と行っている副業について、依頼内容や実施方法、収益まで赤裸々にお伝えしていきたいと思います。

（筆者の作業内容の備忘録としての役割もあったりします。）

ちにみに、当ブログ筆者は2023年1月からWordPressやHTML/CSSの勉強をスタートし、現在はJavaScriptとPHPの習得に取り組んでいます。

よければ下記プロフィールをご覧ください。

ホームページ修正等をメインとして副業を請け負っており、主に「coconala（ココナラ）」というサイトから依頼を受けています。

その他、ランサーズやクラウドワークスに登録しておりますが、プログラミング技術が未熟故、まだまだ案件を取れる実力がありません。

追々、プログラミング技術が習得でき次第、そういったサイトからも案件受注につなげていきます。

今回のWordpress修正の依頼内容

今回の依頼は、ページ改修依頼となっておりWordPressで作成された既存HPを一部ページの修正案件です。見積額は3,000円(ココナラ最安値)で指定ありました。HTML/CSSの編集作業のみでしたので、希望額にて受注しました。

下の画像が変更前のランディングページの一部です。
※特定防止のため、記事内容は隠しています。

下のイメージが編集後の希望デザインです。
※特定防止のため、記事内容は隠しています。

修正内容

以下、修正内容。
希望納期は指定ありませんでしたが、勝手に3日と指定し修正をかけました。

①バックアップの取得

毎度のことですが、作業開始前に必ずBackUpを取ります。通常はプラグイン「BackWPup」で全体バックアップをとります。
ただ、今回はHTML/CSSの一部編集のみだったので、該当コードをコピペでテキストに保存するだけとしました。

②HTML：classタグ追加

ちなみに今回のホームページは、「外観」→「テーマファイルエディター」でPHPが直打ちで構成されています。そのため、「テーマファイルエディター」からコード編集画面にアクセスし、該当データのコード修正が必要となります。

以下、変更前のHTMLコードです。
h3を囲むdivタグが全て、class=”text js-fade-up” となっているため、デザインの種類ごとに分けるため、classタグの追加・整理をしました。

<!--変更前HTMLコード-->
<div class="business-items__cont">
    <h2 class="js-fade-up">営業品目</h2>
    <div class="text-wrapper">
      <div class="text js-fade-up">
        <h3>項目1</h3>
      </div>
      <div class="text js-fade-up">
        <h3>項目2</h3>
      </div>
      <div class="text js-fade-up">
        <h3>項目3</h3>
      </div>
      <div class="text js-fade-up">
        <h3>項目4</h3>
      </div>
      <div class="text js-fade-up">
        <h3>項目5</h3>
      </div>
      <div class="text js-fade-up">
        <h3>項目6</h3>
      </div>
      <div class="text js-fade-up">
        <h3>項目7</h3>
      </div>
      <div class="text js-fade-up">
        <h3>項目8</h3>
      </div>
    </div>
    <h2 class="js-fade-up">以下の業務は即応が可能です。まずはご連絡ください。</h2>
    <div class="text-wrapper">
      <div class="text js-fade-up">
        <h3>項目9</h3>
      </div>
      <div class="text js-fade-up">
        <h3>項目10</h3>
      </div>
      <div class="text js-fade-up">
        <h3>項目11</h3>
      </div>
      <div class="text js-fade-up">
		  <h3>項目12</h3>
      </div>
    </div>
  </div>

以下、変更後のHTMLコードです。
デザインの種別ごとに、 class=”text js-fade-up” 、 class=”text js-fade-up-2″ 、 class=”text js-fade-up-3″ 、 class=”text js-fade-up-4″と整理しました。

また、 class=”text js-fade-up-3″ の幅が大きい箇所は同一div内で、 class=”text js-fade-up-3 sub” と記述しています。

<!--変更後HTMLコード-->
<div class="business-items__cont">
    <h2 class="js-fade-up">営業品目</h2>
    <div class="text-wrapper">
		<div class="text js-fade-up">
			<h3>項目1</h3>
		</div>
      </div>
                          ~~省略~~
    <div class="text-wrapper">
		<div class="text js-fade-up-2">
			<h3>項目7</h3>
		</div>
      </div>
                          ~~省略~~
    <div class="text-wrapper">
		<div class="text js-fade-up-3">
		  <h3>項目10</h3>
		</div>
		<div class="text js-fade-up-3 sub">
			<h3>項目11</h3>
		</div>
      </div>
    <div class="text-wrapper">
		<div class="text js-fade-up-4">
			<h3>項目12</h3>
		</div>
      </div>
                          ~~省略~~
	</div>

③HTML：記事の変更

上記、HTML内の項目を所定の文字に変更しています。
所定の文字は、依頼主から指定があり、そのまま記述するだけですので省略します。

④CSS：バックグラウンドの背景の形状変更と、一部要素の横幅変更し2列に変更

以下、変更前の CSSコードです。
.business-items__cont .textと.business-items__cont .text-wrapper でタグ装飾をかけているコードから、先ほど整理したHTMLの種別に合わせてデザインを変更をしました。

/**変更前CSSコード**/
.business-items__cont .text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% / 3 - 40px / 3);
  padding-left: 10px;
  padding-right: 10px;
  height: 110px;
  margin-bottom: 20px;
  background-color: #f6f8fb;
  border-radius: 10px;
  color: #0a4da9;
  font-size: 20px;
  text-align: center;
}
.business-items__cont .text-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.business-items__cont .text-wrapper:last-of-type .text {
  background-color: #fbe5d6;

以下、変更後のCSSコードです。
タグの種別ごとに、所定の装飾コードを持たせているだけなので、難しい処理ではないですね。角丸を強くするもの、下記のように border-radius を大きくするだけです。

また、横幅の長い class=”text js-fade-up-3 sub” の記述に多少苦労しましたが、下のコードでうまくピッタリハマったので、これで良しとしました汗。（本当はもっと上手いやり方があるのかも。。。）

/**変更後CSS**/
.business-items__cont .text {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 90px;
	width: calc(100% / 3 - 40px / 2.3);
	margin-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}
.business-items__cont .text.js-fade-up {
  background-color: #CCFFCC;
  border-radius: 500px;
  color: #0a4da9;
  text-align: center;
　　font-size:19px;
}
.business-items__cont .text.js-fade-up-2 {
	background-color: #CCFFFF;
	border-radius: 10px;
	color: #0a4da9;
	text-align: center;
	font-size:19px;
}
.business-items__cont .text.js-fade-up-3, .business-items__cont .text.js-fade-up-4 {
	background-color: #FFCC99;
	border-radius: 10px;
	color: #0a4da9;
	text-align: center;
	font-size:19px;
}
.business-items__cont .text.js-fade-up-3.sub {
	width: calc(70% / 1.0 - 60px / 1);
	margin-right:0;
	margin-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

以上で依頼内容通りの修正完了となります。

今回の依頼はHTML/CSSのみの修正のため簡易的な内容でした。

まとめ

ココナラであれば、上記のような簡単なHTML/CSSコードの修正のようなお仕事が、非常に多くあります。印象としては、他の副業サービスはレベルが高く、また単価も高いことから競争率が激しいです。筆者のように最近プログラミングを学び始めた方は、スキルが上がるまではココナラで学びながらスキルアップを目指す方が良いかと思います。

ただし、金額は安価なので、勉強のつもりで取り組むのが良いかと思います。

このような修正をしながら、ホームページの構成などを学ぶことも今後の学習に活かせると思います。

副業をお考えの方は、ぜひご参考にください。