web制作で参考にしたサイトの備忘録(随時更新)

制作物関連

Photoshopの初期設定

これから制作する前に見直しておきたいPhotoshopの基礎的な環境設定まとめ|ferret [フェレット]
様々な活用方法があるPhotoshopは、用途や使い勝手の好みに応じて環境設定をおこなっておくことで効率よく作業ができます。 今回は、はじめてPhotoshopを使う方に向けて環境設定の基礎をご紹介します。

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

Photoshopの画像を角丸にする方法 | UX MILK
Photoshopでは、様々な機能を利用して画像を編集することができます。そこで今回は、クリッピングマスク機能を使って、画像を角丸にする方法を紹介します。 クリッピングマスク機能を応用すれば、角丸以外にも好きな形に画像を切り抜くことができ

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

HTTPコードチェッカー

HTTPステータスコードチェッカー|複数URL一括検索&転送経路調査もOK

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

常時https化に必須、リダイレクト設定方法。ロリポップでの事例! | | 便利なデジタル生活
かなり前に本サイトもhttps化したのですが、実はhttpでもアクセス可能な状態になっていました。不具合等出てきたら嫌だと思い敢えてそうしていました。しかし、もう大丈夫と言うコトで今回はhttpからhttpsへのリダイレクト方法について説明しようと思っております。 「ロリポップ!」での独自ドメイン設定は下図のように設定...

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

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

[ CSS ] 要素の順番を入れ替える box & box-ordinal-group | J-COOL BLOG

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

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

htpasswdファイル生成(作成)
htpasswdファイル生成(htpasswdファイル作成)するweb・ウェブ制作に役立つ便利ツール。htaccessを利用したユーザー認証によるアクセス制限(ベーシック認証)が可能です。

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

 

今さらながらBasic認証がうまくいかないときに確認すること | memopad

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

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

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

マコトのおもちゃ箱 ~ぼへぼへ自営業者の技術メモ~  複数のsitemap.xmlを設置する
プログラム言語や環境設定を中心としたパソコン関連の技術メモです。主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。

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

当サイト、ワードプレスのプラグイン「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の閉じタグ書いちゃダメ

PHPの最後の終了タグ ?> は付けないでおこうねというお話
こんにちは。とみっちです。 何年か前に会社勤めしていた際、 って言われたのが衝撃的だったので、同様の記事をよく見かけますが、改めて書いてみます。 PHPの開始タグと終了タグ PHPではお馴染みの、この構文。 ファイル全体が純粋なPHPコードである場合と、WordPressやHTMLテンプレートなどで、HTMLの途中にこ...

このサイトのテーマを新しくし、子テーマ作成。
そしてその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と書いてしまっていたこと。が原因でした。

http://www.finefinefine.jp/jquery/kiji2117/

ここでエラー原因をチェック

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

「WordpressでjQueryのコードが動かない」場合の対処方法 – 時にはWEBの話っ!

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

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

「colorbox.js」の使い方 ~簡単で便利なモーダルウィンドウ~|プラカンブログ | WEB制作会社プラスデザインカンパニー
こんにちは。デザイナーの(鈴)です。今回はモーダルウィンドウで有名な「colorbox.js」を紹介します。「colorbox.js」とは画像や動画、htmlをモーダルウィンドウとして表示するプラグイ...

ワードプレスのリダイレクト

WordPressでURLを別のURLにリダイレクト(301リダイレクト・自動転送)する方法
WordPressで一度投稿した記事を別のURLににリダイレクト(自動転送)させたいということは、まれにあると思います。記事のカテゴリを変更したのでURL(パーマリンク)が変更されてしまったブログを別のドメインに引っ越したので、URLが変更

htaccessにもともと記述されているワードプレスの項目より前に書くこと。

そうしないと動かない。

コメント