開発者ログ

目次

Google Map埋め込みテスト(2021/07/08 片平翔大)

https://www.excite-software.co.jp/maptest
外部リンクの本社、東京事業所Mapを埋め込み式のMapに変更するためのテストページ作成。

Map埋め込み方法
GoogleMapでピンを刺したい位置を指定。
メニューから「共有」を選択。
「地図を埋め込む」を選択。
地図のサイズを指定し「HTMLをコピー」をクリック。
固定ページを開き、ブロックのメニューから「HTMLとして編集」を選択。
先ほどコピーしたHTMLをペーストして保存。

参照：https://bazubu.com/wordpress-googlemap-23998.html

上に戻る

レスポンシブデザイン対応検討(2021/07/09 片平翔大)

https://docs.google.com/document/d/1TrvJBceOD4W8OmLMuFdq0y11kfwl5Ilt_AoXJrxkDdg/edit?usp=sharing
オフィシャルサイトのレスポンシブデザイン対応の手段を調査検討。
テーマについては引き続き適切なものを検討。

上に戻る

たもつくんページ公開(2021/07/09 片平翔大)

https://www.excite-software.co.jp/tamotsukun_series
ページ右側のリンクにバナーを設置。
たもくつんseriaseのページを公開に設定。

上に戻る

Google Map埋め込みを反映(2021/07/09 片平翔大)

https://www.excite-software.co.jp/company

Google Map埋め込みテスト(2021/07/08 片平翔大)の内容を実ページに反映。

上に戻る

問い合わせ、求人応募フォームを公開(2021/07/16 片平翔大)

https://www.excite-software.co.jp/contact
https://www.excite-software.co.jp/job_offer/application

コンタクトフォーム7にてフォームを作成。
問い合わせフォームは「お問合せ内容」の選択項目ごとにメールの送信先を振り分け。
(参照：https://contactform7.com/ja/selectable-recipient-with-pipes/)

メールアドレスの2回入力のバリデーションは以下参照。
テーマエディタからfunction.phpを編集。
(参照：https://100webdesign.jp/services/wordpress/wp_result/wp_result-180/)

ヘッダーメニューバーの変更について
外観→メニューから固定ページをmainに追加。
ブラウザの検証ツールから追加されたリンク部分のid=menu-item-xを確認。
リンク先ページのidを確認。(固定ページ編集画面のURLのpost=y部分)
テーマエディタからcss/page.cssのLine188~の#menu-item-の部分に先程確認したidに対応するタグの装飾を追加。

nav#main-navigation ul li#menu-item-x a{
    background:url('../image/common/menu_06.jpg') 0 0 no-repeat;
}
body.page-id-y nav#main-navigation ul li#menu-item-x a,
nav#main-navigation ul li#menu-item-x a:hover{
    background:url('../image/common/menu_06.jpg') 0 -90px no-repeat;
}

※閲覧時に前回のキャッシュが残っていると、お問合せのメニューが青抜きになり
表示されない場合あり。
　Chrome→右上メニュー→その他ツール→閲覧履歴消去、からキャッシュを削除すれば改善する。
　その他ブラウザについても表示されない場合、ブラウザのキャッシュ削除をお願いします。

上に戻る

目次の表示、非表示選択機能追加(2021/07/29 片平翔大)

JavaScriptを用いた切り替え手法は、displayプロパティ、visibilityプロパティの2種類。
それぞれの特徴として、

displayプロパティ
・非表示にした場合、コンテンツが存在した場所に下のコンテンツが移動し、レイアウトが圧縮される。
visibilityプロパティ
・非表示にした場合、コンテンツが存在した場所が空白として残る。(他コンテンツは移動しない)

今回用いたのはdisplayプロパティ。
今回使用していない手法についてはこちら参照。
(参照：https://allabout.co.jp/gm/gc/23973/)
以下変更手順。

表示を切り替えたいブロックのタグにIDを追記する。(<ul id=”contents“>)
元々存在する場合は不要。
切り替えボタンを表示したい場所に以下のコードを追記。

<input type="button" value="表示"
       onclick="document.getElementById('contents').style.display = 'block';">
<input type="button" value="非表示"
       onclick="document.getElementById('contents').style.display = 'none';">

上に戻る


listタグ(ol、ul)インデント(2021/08/02 片平翔大)

listタグ使用時のインデントの調整について。
padding：行頭文字と文の間隔
margin：行頭文字も含めた全体のインデント
CSSで上下左右の間隔を指定する。
　　・　　文章
　↑　　 ↑　
margin padding

例(左のみ指定) 

li.title{
    margin-left: 40px;
}
li.title{
    padding-left: 40px;
}

上に戻る

問い合わせフォームデザイン修正(2021/08/04 片平翔大)

pタグでフォームのコンテンツを配置していたが、tableタグに変更。
テーブルは項目名、重要度、入力欄の3カラムとしている。
重要度の色付けは、tdタグ内にpタグを設置しそのbackground-colorで行った。
メインカラムの横幅の関係上、重要度などの項目が折り返してしまう場合があるため、padding、marginでのコンテンツ幅の調整重要。(今回はpaddingのみ使用)
各カラム毎にクラスを設定しCSSでpaddingを指定。
親要素のサイズ以上にpaddingを大きくすると、本体コンテンツがpaddingに押し潰されデザインが崩れるため注意。

プレースホルダーの記述については以下の通り。

[text* your-name placeholder"例：佐藤　太郎"]

テーブルの罫線が崩れるため、テキストエリアは縦幅のみ変更可能とした。

textarea {
  resize: vertical;　(横のみ可：horizontal、縦横禁止：none)
}


各レコードのhtmlタグ構成は以下の通り。

<tr>
   <td class="item">氏名</td>
   <td class="importance"><p class="required">必須</p></td>
   <td class="form">[text* your-name placeholder"例：佐藤　太郎"]</td>
 </tr>

上に戻る

カスタム投稿の追加、フロントページにお知らせ表示(2021/08/05 片平翔大)

カスタム投稿(お知らせ、先輩紹介)の追加方法。
Cocoon子テーマのfunctions.phpに現行サイトのfunctions.phpから該当部分をコピペ。
該当箇所はコメント参照のこと。

次にフロントページにお知らせを表示する手順。
PC内でindex-notice.phpを作成し、お知らせ表示用のコードを記述。
SFTPクライアントツールでサーバーに接続。(HP編集手順参照)
/opt/bitnami/apps/wordpress/htdocs/wp-content/themes/cocoon-master/tmp/内のlist.phpをPCにコピー。
以下のコードをlist.phpの66行目に挿入。

  } elseif (is_front_index_page()){
	get_template_part('tmp/index-notice');


SFTPクライアントツールで/opt/bitnami/apps/wordpress/htdocs/wp-content/themes/cocoon-child-master/tmpに先程編集したlist.phpとindex-notice.phpを転送し完了。

上に戻る

独自ウィジェットエリア追加(2021/08/05 片平翔大)

まず外観＞ウィジェットに独自のエリアを表示させる。
子テーマfunction.phpに以下のコードを追加。

register_sidebars(1,
  array(
    'name' => ('フッターサイトマップウィジェットエリア'),
    'id' => 'footer-nav',
    'description' => ('フッターサイトマップ用ウィジェットエリア'),
    'before_widget' => '<aside id="%1$s" class="widget widget-content-bottom2 %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h2 class="widget-content-bottom-title main-widget-label2">',
    'after_title' => '</h2>',
  )
);

配列のvalueについてはすべて任意のものを設定可能。
外観＞ウィジェットに先程追加したnameのウィジェットエリアが表示されていることを確認。

次に先程作成したウィジェットエリアの表示場所を設定。
親テーマからウィジェットを設置したい箇所のテンプレートファイルをコピー。
テンプレートファイルは基本的にコードの上から順にコンテンツが画面に表示されるため、
他のウィジェットエリアやコンテンツの配置を参考に、配置したい場所に以下のコードを追加。

<?php if(is_active_sidebar('footer-nav')) : ?> 
    <?php dynamic_sidebar('footer-nav'); ?>
<?php endif; ?>

‘footer-nav’の部分は先程任意に設定した配列のidの値を使用。
コードを追加後、子テーマにテンプレートファイルをアップロード。
実際にウィジェットにコンテンツを入れ、表示箇所を確認。

フッターサイトマップウィジェットエリア、フッター最下部ウィジェットエリアを作成し使用中。

詳細は以下のサイト参照。
https://u-ff.com/wordpress-custom-widget-area/

上に戻る

フッターサイトマップの設置(2021/08/05 片平翔大)

フッターサイトマップは上記の独自ウィジェットエリアに現行サイトのものを流用して設置している。
設置個所は、フッターサイトマップウィジェットエリア。
以下設置手順を示す。

Cocoon設定＞テンプレートからショートコード新規作成。
現行サイトのfooter.phpのサイトマップ部分(15~79行目)をコピー、
テンプレート作成のHTML挿入からペーストし保存。
生成されたショートコードを外観＞ウィジェットのカスタムHTMLウィジェットを使用し、
独自ウィジェットエリアに挿入。
CSSによる装飾も現行サイトのものを流用しつつ、適当な修正を加える。
CSSは子テーマのstyle.cssに記述。

上に戻る

サイドバー関連ページ表示(2021/08/05 片平翔大)

子ページを持つページ(業務内容、求人情報)のサイドバーに子ページのリンク一覧を表示。
これについても現行サイトのものを一部変更し流用。

親テーマからsidebar.phpをコピー。
現行サイトのsidebar.phpの関連ページ部分(1~50行目)をコピー。(else以降は不要)
親テーマからコピーしたsidebar.phpの以下のコードの下にペースト。(括弧やdivタグにズレがある場合要調整)

  ////////////////////////////
  //サイドバー追従領域
  ////////////////////////////
  if ( is_active_sidebar( 'sidebar-scroll' ) ) : ?>
  <div id="sidebar-scroll" class="sidebar-scroll">

コードを追加後、子テーマにテンプレートファイルをアップロードし完了。

上に戻る

フロントページスライドの設定(2021/08/05 片平翔大)

フロントページのスライドは「MetaSlider」プラグインを使用。
基本的な使い方は以下のサイト参照。
(参照：https://affilabo.com/wordpress/15550/)

生成されたショートコードを子テーマのmain-before.phpに追加する。
その際フロントページのみで表示されるよう以下のように記述する。

<?php
if(is_front_page()):
	echo do_shortcode('[metaslider id="1020"]');
endif;
?>

PC用とスマホ用にサイズの違うスライドを2つ用意し、画面サイズごとに切り替えて表示している。

上に戻る

要素の横列配置(2021/08/06 片平翔大)

html要素を横列に並べる方法は概ねこの2つ。
・display: flex;
・float

テストサイトでは基本的にdisplay: flex;を使用している。
floatを使用すると要素の高さが消え、上下の高さを整えることなどが難しいため。
その他要素の回り込みなども起こるため面倒。

flexはflexで横列に配置したアイテムの間隔や幅などを調整するのに手間取ったため、
flexで上手く配置を調整する方法について残しておく。

アイテムの左右位置、間隔の自動調整CSS。flexボックスに指定。

justify-content: center;
　アイテム全てを中央寄せにする。アイテム同士の間隔は0になる。

justify-content: flex-start;
　アイテム全てを先頭(左)寄せにする。アイテム同士の間隔は0になる。

justify-content: flex-end;
　アイテム全てを末尾(右)寄せにする。アイテム同士の間隔は0になる。

justify-content: space-between;
　最初のアイテムを先頭、最後のアイテムを末尾寄せにし、各アイテム間の幅が均等になるよう配置する。

justify-content: space-around;
　各アイテムの左右に均等な幅の余白を付与する。

justify-content: space-evenly;
　各アイテム間、先頭、末尾の間隔を全て均等にする。

アイテム本体の幅の任意調整。flexボックス内の各要素に指定。
flex-basis: 100%;
　各アイテムの横幅をパーセンテージ又は、ピクセル数で指定する。

これらを使用すればある程度思い通りに配置調整できるのではないかと思う。
その他ポイントとしてはflexボックスをdivなどで囲って、
アイテムの動ける範囲を必要な範囲まで絞っておくと良さそう。
justify-content: flex-start;で画面の端まで行かれると困る場合など。

補足としてdisplay: flex;の後にflex-direction: column;を加えて記述すると、
アイテムを縦列に配置もできるので便利。

上に戻る

メインカラム、サイドバーの幅調整(2021/08/06 片平翔大)

メインカラム：ページの本文が記載される領域
メインコンテンツ：メインカラムとサイドバーを合わせた全体の領域

サイトのメインコンテンツ部分はメインカラムとサイドバーの2カラム構成になっている。
Cocoon設定＞カラムからそれぞれの幅は設定できる。
それぞれの幅の設定から自動的にメインコンテンツの幅が算出される。
しかし、その設定のみだと画面サイズが変わったとき、

・サイドバーの領域が広くなりすぎる(レスポンシブの設定で何故かそうなっている)
・サイドバーがメインカラムの下に回り込む

といったことが発生する。
それを回避するため、メインカラムとサイドバーに、それぞれパーセンテージでwidthを設定している。

.main {
	width: 77%; /*値はカラム幅、paddingの設定により変動*/
}
.sidebar {
	width: 21%;
}

元のCSS設定が上書きされ各カラムのサイズ比が固定される。

上に戻る

サイト内検索について(2021/08/13 片平翔大)

モバイルフッターメニューにサイト内検索の項目が存在する。
検索結果はフロントページの投稿一覧を表示するテンプレートを利用して表示される。
テストサイトでは、投稿一覧は非表示とし、お知らせを表示しているため、検索結果が正常に表示されない。
そもそも、サイト内検索機能が必要かという疑問もあるため、ひとまずサイト内検索用のメニューを削除することで対応している。

削除方法
親テーマからtmp/mobile-search-button.phpを子テーマにコピー。
mobile-search-button.php内のliタグ以下のコードをコメントアウト。

上に戻る

ヘッダーのロゴ切り替え(2021/08/17 片平翔大)

PC、スマホで同じヘッダー画像を使用すると、スマホ時に画像内のキャッチフレーズが小さくて読みにくい。
それぞれの場合でヘッダー画像を切り替える。
スマホの場合はロゴのみの画像にする。

PC用
スマホ用

Cocoon子テーマのCSSのレスポンシブデザイン用のメディアクエリ部分に書き込み。
834px以下で切り替えを行う。
まず以下のコードで834px以下の時、PC用のヘッダー画像を非表示にする。

img.site-logo-image.header-site-logo-image {
	visibility: hidden;
}

次に以下のコードでスマホ用のロゴを表示する。

.logo > a .site-name-text {
	display: inline-block;
	background: url("https://www.excite-software.co.jp/wp-content/uploads/2021/07/6f8914c90501250efacd3580026c21f1.jpg") no-repeat;
	background-size: contain;
	background-position: center;
}

参照：https://wp-cocoon.com/community/postid/17566/

上に戻る

コンタクトフォームの送信ボタンセンタリング(2021/08/17 片平翔大)

コンタクトフォームの送信ボタンはデフォルトでボタンの横にローダーが存在する。
通常時は隠れているが存在はしているため、text-align:center;でセンタリングを行うと、ボタンが中央からずれる。
ローダーはspanタグで囲まれているため、spanに以下の設定を行う。

div.wpcf7 .ajax-loader {
　　　　display: block;
}

spanにブロック要素を設定することで改行され、送信ボタンが中央に配置される。
ローダーも中央に配置するために、左右のmarginをautoに設定しておくとよい。

参照：https://shimamisa.com/contactform7-button/

上に戻る

見出しの装飾(2021/08/18 片平翔大)aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

現行サイトの見出しの装飾は背景に画像を設定する形で行われている。
この手法の場合、見出しの文章が長い、もしくは画面の幅が小さく文章が折り返した時に
背景の装飾からはみ出してしまうことがある。(上の見出しのように)
これを防ぐために、background-imageではなくbackground-colorで装飾を施すこととした。
ただ、単色では単調なデザインになってしまうため、linear-gradientを使用して
グラデーションをかけることでこれまでの見出しのデザインに近づけている。
以下がそのCSS設定になる。

background: linear-gradient(0deg, #f5db68ff, #f5db6800 50%),
            linear-gradient(150deg , #feecac 40%, #fdd053 40%) ;

1行目で下から上への影のようなグラデーションを設定。
各パラメータは(グラデーションの方向, 開始色(透明度含む), 終了色(透明度含む) 終了色の経由点(終了位置))
となっている。
2行目で左右の色の分割を設定。
各パラメータは1行目と同様だが、開始色と終了色の経由点が同じ位置に設定されているため、
グラデーションではなくその位置で色分けされたようになる。
このようにlinear-gradientを複数使用することでグラデーションの重ね合わせをすることも可能。

3色以上のグラデーションやピクセルでの経由点指定も可能。
詳細は以下参照。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients
https://www.keicode.com/script/css-linear-gradient.php

上に戻る

コピーライトについて(2021/08/31 片平翔大)

コピーライトを現行サイトと同様フッター最下部へ配置変更。
独自ウィジェット「フッター最下部ウィジェットエリア」を定義してカスタムHTMLで配置している。
独自ウィジェットの定義についてはこちら
テンプレートファイルfooter-bottom.phpの最下部にウィジェットを配置している。
コピーライトを更新する際は、外観＞ウィジェットの「フッター最下部ウィジェットエリア」内に設置しているカスタムHTMLを編集する。

上に戻る

スライドインメニュー内のバナーについて(2021/08/31 片平翔大)

アクセシビリティ向上のため、PC表示時にサイドバーに配置していたバナーを、モバイル表示時にはスライドインメニュー内に配置した。
テンプレートファイルのmobile-navi-button.phpに、サイドバーと共通のバナーを表示するよう記述した。
バナー更新の際は、外観＞ウィジェットの「サイドバースクロール追従」を編集することで、スライドインメニュー内のバナーもまとめて更新される。
サイドバーと別の内容を表示したい場合は、独自ウィジェットを定義し、入れ替えるのが早いかと思う。

上に戻る

モバイル用サイトマップについて(2021/09/01 片平翔大)

PC表示時のtable形式のサイトマップはモバイル表示では見づらいため、モバイル表示時にはアコーディオンメニューを用いたサイトマップを表示するよう変更した。
表示上は1つしかサイトマップは表示されないが、ソースコードでは2種類のサイトマップが記述されているため、
更新の際は両方のサイトマップに変更を加える必要がある。

PC表示のサイトマップについては固定ページ編集からHTMLでセルを追加するだけで問題ない。

モバイル表示のサイトマップは通常のリンクのみの場合、HTMLの編集のみで問題ないが、アコーディオンメニューを追加する場合、CSSの編集も必要となるため注意。
以下アコーディオンメニューの追加方法。

固定ページ編集からメニューを追加したい場所に以下のコードを追加。

<input id="任意ID1" class="accordion" name="check" type="checkbox">
<label for="任意ID1">メニュータイトル</label>
  <ul id="任意ID2">
    <li><a href="ページURL">ページタイトル</a></li>
    <li><a href="目次1URL">目次1</a></li>
    <li><a href="目次2URL">目次2</a></li>
    <li><a href="目次3URL">目次3</a></li>
  </ul>

CSSの添付画像の部分にそれぞれ以下のコードを追加し終了。

https://drive.google.com/file/d/1X_Xn-OnVBns4RXpabNu5It0WETGOX9dM/view?usp=sharing

#任意ID1:checked ~ #任意ID2 li
#任意ID1:checked ~ ul#任意ID2
#任意ID1:checked + label::before

1つのセレクタ内で、複数の隣接セレクタを使用するような記述方法も存在した。
しかし、Chromeで表示する場合、1つのセレクタ内で複数の隣接セレクタを使用すると、エラーでスタイルが反映されないため注意。
場合にもよるが、間接セレクタで代用するのが良さそう。

上に戻る

添付ファイルページについて(2021/09/02 片平翔大)

メディアから画像などをアップロードした際に、自動生成される画像とそのタイトルのみのページ。
画像のタイトルをURLに直接入力した場合、このページが表示されてしまう。
自動生成かつ、削除することも基本的にできないため、添付ファイルページにアクセスした際に、404not foundにリダイレクトするよう設定を変更する。
以下変更方法。

function.phpに以下のコードを追加する。

add_action( 'template_redirect', 'attachment404' );

function attachment404() {
  // attachmentページだった場合
  if ( is_attachment() ) {
    global $wp_query;
    $wp_query->set_404();
    status_header(404);
  }
}

投稿一覧やカテゴリページへのアクセスもどうようの方法で制限している。

上に戻る

モバイル用サイトマップについて(修正)(2021/10/01 片平翔大)

編集の手間を考えサイトマップのアコーディオンメニューをJQueryを使用するものに変更。
以下編集方法を記載。

展開するメニューの1ブロックが以下のようになっている。

    <li class="menu_item">
        <p class="menu_item_link js-menu_item_link">会社案内</p>
        <ul class="submenu">
            <li class="submenu_item">
                <a href="/company">会社案内</a>
            </li>
            <li class="submenu_item">
                <a href="/company#jp_aisatsu">社長挨拶</a>
            </li>
            <li class="submenu_item">
                <a href="/company#jp_gaiyou">概要</a>
            </li>
            <li class="submenu_item">
                <a href="/company#jp_enkaku">沿革</a>
            </li>
        </ul>
    </li>

このコードをサイトマップの<ul class=”sitemap_mob”>内に挿入する。
ulタグ内の項目数とリンク文字列は任意変更可。
各タグの属性は変更不可。

展開を制御するJQueryはサイトマップ固定ページ内最下部のカスタムJavaScriptに記述している。

上に戻る

ウィジェットエリア操作によるレイアウト不具合の修正(2021/11/08)

原因
ウィジェットエリアの「サイドバー」に「ナビゲーションメニュー」のウィジェットが配置されていたことが直接的な原因。
現在本サイトでは「サイドバー」ではなく「サイドバースクロール追従」のウィジェットエリアを使用している。
どちらのウィジェットエリアもサイドバーの領域を使用するため、両方のウィジェットエリアにコンテンツが配置されている場合、干渉してレイアウトが崩れると考えられる。

発見経緯
事前にサイドバーのリクナビのリンクとバナー画像を変更するという旨は伺っていたため、操作した項目はメディア、もしくはウィジェットであると推測される。
まずメディアの確認を行った。
レイアウトが崩れる原因として画像のサイズが大きすぎるなど考えられるが、特に問題はなかった。
次にウィジェットの確認を行った。
レイアウトが崩れる要因として、同じ領域を使用するウィジェットエリア(今回の場合「サイドバー」と「サイドバースクロール追従」)の両方にコンテンツが配置されている可能性が考えられた。
現在使用していない「サイドバー」のウィジェットエリア内のコンテンツを確認したところ、本来なにも配置されていないのが正常であるが、「ナビゲーションメニュー」が配置されているのを発見した。

修正内容
ウィジェットエリア「サイドバー」内に配置されたコンテンツ「ナビゲーションメニュー」を削除したところ、レイアウトは正常に戻った。

ホーム
タイトルとURLをコピーしました