WEB制作で発生した問題と解決法メモと参考にしたサイト

\ お買い物忘れにご注意!/

目次

\ お買い物忘れにご注意!/

Photoshopの初期設定

https://ferret-plus.com/3686

四角形画像をカード型に角丸で切り抜く(Photoshopのクリッピングマスク)

http://uxmilk.jp/30451

htaccessに追記するhttp→httpsへの301リダイレクト設定方法

HTTPコードチェッカー

https://singoro.net/http-status-code/

このサイトのhttp→httpsへの301リダイレクトの設定で使用しました。

https://digital-life.club/hp/redirection-to-https-for-lolipop

ロリポップ×ワードプレスでのやり方

HTMLはさわらず、CSSだけで要素の表示順を変更する方法

https://www.j-cool.co.jp/blog/?p=7039

スマホページで表示順を上下で入れ替える際に使いました。
いままではスマホとPCでdisplay:none; とblockで場所切り替えしてたのがバカらしくなるくらい便利。
CSSでここまで出来ると非常に助かります。

初めてのBASIC認証で役立ったサイト

http://www.luft.co.jp/cgi/htpasswd.php

はじめて設定する際に参考になったサイト。
パスワードの暗号化もサイト内で行えます。

http://memopad.noor.jp/html-css/post-862/

htaccessを設置しただけで500エラーになってしまい、どうすればいいかわらずたどり着いたサイト。
サーバー内のフルパスが間違っていたことがこの記事で判明。

<?php
echo __FILE__;
?>
これをどこか適当にindex.phpとかに記述すれば本当のサーバーのフルパスが判明します。これで解決しました。
(うちの会社のサーバーのFTPからは見つけられないディレクトリがあったので)

サイトマップを複数設置し管理する方法

http://piyopiyocs.blog115.fc2.com/blog-entry-1097.html

これは本当に面倒でした。情報が少なく、こちらのサイトに助けられました。

当サイト、ワードプレスのプラグイン「google xml sitemaps」だけでずっと運用していたのですが、ワードプレスで作ってない普通のwebサイトをルート直下にフォルダ作ってFTPであげていたのですが(例えばhttps://kwsm.asia/color/)、プラグインのgoogle xml sitemapsにはこれらのページが書き込まれていなかったのです。

ということで、ワードプレスで自動作成されないサイトのサイトマップをsitemap2.xmlとし、プラグインのサイトマップはsitemap.xml(この名前で自動作成される)なので、この2つをrobots.txt(新たに作る)に下記のように書き込み、ここに関しては問題解決。

User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

Sitemap: http://example.com/sitemap.xml
Sitemap: http://example.com/sitemap2.xml

重複したワードプレスで作ったページの記述はsitemap2.xmlから削除して調整。

サーチコンソールでrobots.txtを更新し、googleに送信。
これで作業終了。

子テーマのfunctions.phpにはphpの閉じタグ書いちゃダメ

https://thesaibase.com/php/end-tag

このサイトのテーマを新しくし、子テーマ作成。
そしてそのfunctions.phpにh2タグ直前にアドセンス貼るコードを書いたのですが、むちゃくちゃなことに。

何が原因かわからず、3時間格闘し、やっとわかったのが、PHPの閉じタグ。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
 
このように書くのが正解。
僕は?>とPHPの閉じタグを最後に書いてしまっていたため、そのあと続きに何を書こうがバグだらけ。
PHPの閉じタグは書かないほうがトラブルを防げます。
 

ディレクトリ構造維持してファイル抽出できる超便利windows用フリーソフト

 
クライアントのwebサイトのファイル内一括置換した後の差分ファイルを抽出するのに最高のソフトです。
更新時間で検索でき、なんといっても「ディレクトリ構造を維持」して抽出できる!最高のソフトです。
会社のPCがwindows7なのでいつも使わせてもらってます。
10やmacには使えないです。
 

floatの解除にoverflow:hidden;使うとはみ出だしたい領域が隠れてしまう

hiddenしたくない場合は普通にafterで解除しましょう。
overflow:hidden;のせいでhoverエフェクトでメニューが表示されなくなった。
positionやz-indexの仕業かと思っていたが、このhiddenのせいだった。
だからfloatは嫌い。
.clearfix:after{
    content: "";
    clear: both;
    display: block;
}

JQueryが動かない場合の解決策

colorboxを使ってinlineのhtmlをクリックでオーバーレイ表示したいのですが、
全然動かない。

原因はJQueryの「$」を再定義ができていなかったこと、

そして、scriptのinlineをiframeと書いてしまっていたこと。が原因でした。

Uncaught TypeError: $ is not a function というエラーが出ました。

あわせて読みたい

このページで再定義をすることでJQueryが動き出しました。

あとはcolorboxのinlineが表示されるために、inline:trueに変更すればok

https://www.plusdesign.co.jp/blog/?p=3690

参考になったらシェアお願いします!

この記事を書いた人

■自己紹介
MEDIARCS ディレクター 河島 靖
1984年5月生まれの39歳

■趣味
銭湯・サウナ行くこと(サウナ・スパ健康アドバイザー)
筋トレ(懸垂をよりできるようになりたい)
音楽鑑賞(Nujabes、NewJeansなど)
ヴィンテージもの、レザーグッズが好き

コメントはこちらよりお願いします

コメントする

目次