マルチスクリーン対応WEB制作

K-OFFICE

054-369-3016

Web

TOPページに動画を使用

TOPページのビジュアル画像に動画を積極的に使用していきたいと考えております。
そのための準備を進めています。

  • FilmoraのAI機能を活用した動画作成の研究
  • 動画作成請負サービスとの提携
  • ドローンの国家ライセンス取得

sampleを制作しましたのでご確認ください。➡Itype

CafeLog(ブログシステム)でエラー

バリューサーバーで運用しているCafeNote(v4.51)でエラーが発生したとクライアントより連絡がありました。
ログイン画面を表示しようとすると以下のエラーが表示されました。

Software error:
Can’t locate lib/auth_axs.pl in @INC (@INC contains: ./lib /usr/local/lib64/perl5 /usr/local/share/perl5 /usr/lib64/perl5/vendor_perl /usr/share/perl5/vendor_perl /usr/lib64/perl5 /usr/share/perl5) at index.cgi line 56.
For help, please send mail to the webmaster (info@valueserver.jp), giving this error message and the time and date of the error.

「lib/auth_axs.pl」が見つからないため、index.cgi line 56でエラーが発生しているようです。
Value Domainにエラー発生の現状を連絡したところ以下の回答がありました。

————————————————————-
ご利用サーバー「e4.valueserver.jp」に関しまして、
2021年12月13日に大規模リニューアルを実施いたしました。

■サーバーシステムの増強と移行について
https://www.value-server.com/info/brandnew2022.html

お客様にて設置いただくwebサイトデータやスクリプトに関しましては通常はサポート範囲外とさせていただいておりますこと、何卒ご理解賜りますと幸いでございます。

お問い合わせの件につきまして、
/public_html/hakko-ec.com/cafe/sys/index.cgi 内の56行目の記述を下記に変更の上で、動作確認をいただければと存じます。

■変更前
―――――――――――――――――――――
require ‘lib/auth_axs.pl’;
―――――――――――――――――――――
■変更後
―――――――――――――――――――――
require ‘./lib/auth_axs.pl’;
―――――――――――――――――――――

上記で改善いたします場合には、他「require ‘lib/xxx.pl’;」部分も全て修正を行っていただく必要がある恐れがございますため、お客様側でご確認および調査をお願いいたします。
————————————————————-

index.cgiファイルのlib/のパスを全て./lib/変更したところ動作が正常に戻りました。
■CafeNote
cafe→sys→index.cgi
31行→39行
46行
56行

■CafeLog
cafe→admin→index.cgi
31行→40行
47行
67行
VALUEサーバーでCafeにエラーが発生している方の参考に!

Contact Form 7 add confirmで不具合

Contact Form 7 add confirmの確認画面が表示されない不具合が発生しました。

2月25日にContact Form 7のver5.4がリリースされましたが、プラグインの自動アップデートを行っているサイトは全て同じ事象が発生しています。

おそらくこのアップデートが、きっかけで不具合が発生していると思われるため、いったんver5.3.2に戻したところ、不具合は解消されました。

Contact Form 7がver5.4にアップデートされ、かつContact Form 7 add confirmのアドオンプラグインを使用しているサイトは、訪問者からのフォームの送信ができませんのでご注意ください。

とりあえずは、ダウングレードで不具合は解消されますが、Contact Form 7使い続けるにはver5.4のアップデートが必要となります。アドオンプラグインのContact Form 7 add confirmがContact Form 7と連携できる様修正が行われないと、このアドオンプラグインの使用は不可となりますので、修正を期待します。

WPスパムメール対策

WPのformメールに『Contact Form7』を使いだしてから、英文のスパムメールが1日平均10通位来るようになりました。

対策として『承諾確認』のチェックボックスを設置したり、プラグインの『Honeypot』をインストールしました。効果はありましたが完全に防止はできず、まだ1日に5通位送られてくる状態が続きました。

スパムメールに共通していることは入力されている文字が数字とアルファベット、外国語です。日本語は全く入力されていません。住所にはいつも数字が入力されています。

以下のサイトで『日本語が1文字も含まれていないコメントを除外する』という記事を発見しました。
【kodocode.net】

この方法は『functions.php』に以下のコードを追加し日本語の有無をチェックし、日本語が使われていない場合はエラーにしてしまう方法です。私は住所のテキストボックスを検査対象にしましたが赤文字の検査対象部分は各自変更ください。

—————————————————————————————
function wpcf7_validate_spam_message( $result, $tag ) {
$value = str_replace(array(PHP_EOL,’ ‘), ”, esc_attr($_POST[‘text-154‘]));
if (!empty($value)) {
if (preg_match(‘/^[!-~]+$/’, $value)) {
$result[‘valid’] = false;
$result[‘reason’] = array(‘text-154‘ => ‘正確に入力してください’);
}
}
return $result;
}
add_filter( ‘wpcf7_validate’, ‘wpcf7_validate_spam_message’, 10, 2 );
—————————————————————————————

この対策後スパムメールは0件となりました。【kodocode.net】様 感謝申し上げます。

WordPressで写真の加工

WordPressでホームページを作成するとコンテンツの更新だけでなく、簡単な写真の加工(トリミングや回転・反転など)もこのWordPressの管理画面内でできてしまいます。ローカルで写真加工ソフトを使用しての作業は必要ありません。

下記写真のはアイキャッチ画像の被写体が写真の中央にありません。これを修正するためにフリーサイズの画像を写真加工ソフトで修正して再UPしても良いのですが、アイキャッチ画像のために全ての画像のロケーションが変わってしまいます。

WordPressには「すべての画像サイズ」「サムネイル」「サムネイル以外の全サイズ」から選択して画像を編集できます。今回はサムネイルのトリミングについての説明です。

 

【メディア】→【ライブラリー】から対象の画像をポイントして【編集】をクリックします。

 

【メディアの編集】画面が表示されるので左下の【画像を編集】をクリックします。

 

【画像のトリミング】の【縦横比】を1:1 【変更を適用】を【サムネイル】とします。

 

① 写真の船体部分をドラッグして選択します。『shift』キーを押しながらドラッグすると正方形となります。

② 【トリミング】ボタンをクリックします。

 

トリミングされた画像が表示されたら【保存】ボタンをクリックします。

 

上部に①『保存されました』と表示されたら完了です。
サムネイル画像が変更されているか確認のため② 【画像を編集】をクリックします。

 

右下の①【現在のサムネイル画像】の船体部分が中央に表示され変更されているのが確認できます。
② サムネイル以外の画像は変更されていないことが確認できます。

サムネイル画像が更新され船体部分が画像の中央に表示されるようになりました。

 

 

WordPressの画像について

WordPressでは、ひとつの画像をアップロードする毎に、追加で3種類のサイズの画像が自動で作られています。

下図のように【サムネイルのサイズ】【中サイズ】【大サイズ】の3種類の画像が自動生成されアップロードした画像(フリーサイズ)と合わせて4枚の画像がWordPressに保存されます。

ただしアップロードした画像サイズが上図の上限値を超えた場合は写真が自動生成されますが150×100の写真をUPしてもフリーサイズ(150×100)1枚のみしか保存されません。

900×600の画像をUPすると150×150、300×200、900×600の3枚が保存されます。

3000×2000の画像をUPすると150×150、300×200、1024×683、3000×2000の4枚が保存されます。

画像サイズにより以下のクラス名が付与されます。

●サムネイル:size-thumbnail
●中サイズ:size-medium
●大サイズ:size-large
●フルサイズ:size-full

 

文書に大サイズの写真を挿入すると、表示スピードが遅くなるので小サイズの写真を挿入し、それをクリックするとメディアファイルが表示されるように設定した方がベターです。

下図は画像挿入時の設定方法です。

 

 

WEBでぶら下げインデントの設定

スクリーン幅の狭いスマホ表示では、タイトルが長いと折り返される事があります。下図のようにタイトルの行頭にアイコンを使用している場合は、1行目の文字の始まりと2行目の文字の始まりにズレが発生します。

 

CSSで以下の設定をすると2行目以降の文字を1.2文字下げることができます。
h2{
text-indent: -1.2em;
padding-left: 1.2em;
}

 

 

備忘録を整理します

Word、Excelの便利な機能も使用頻度が高い場合は繰り返し使っているうちに身について使いこなすことができるようになりますが、年に数回しか使わないと身につかず忘れてしまいます。

そのため備忘録として書き溜めて置き、問題が発生し解決策が解らない時に参考にしておりましたが、今はネットでググれば簡単に発見できます。WordPressのphpやhtml/cssなどやり方を思い出せない時などには良く活用して助かっております。

ですから今回の備忘録は問題の解決策を探すというよりは、タイトルを見て『こんなことが出来る』という事を知っていただき、活用できるタイトルがあったら、そのスキルをマスターして日常の作業に活用していただければと思います。

範囲はMS OFFICEとWEBのhtml/CSS関係です。