ウェブデザイナーの問題解決メモ

 Dreamweaverでhtmlを作成していると、プログラマーの人に渡した時に「タブスペースや改行がくずれる」という現象が起きる。 というのも、Dreamweaverでタグをエンター改行すると、インデント分の空白が勝手にタブで入ったりしてしまうのだ。 今まではその都度手作業でスペース入れたりしていたのだが、ちょっとdiv増やしたりするともうスペースの入れ直し！！ …というのが一発で解消する方法を知ったので、設定を含めてメモ。 まずは上部メニューの「Dreamweaver」→「環境設定」を開く その中にある「コードフォーマット」で、上記設定をしておく。 ・インデント：☑を使用「2」「スペース」 ・タブサイズ：「２」☑スペースとして挿入 ・TDタグ：□TDタグ内に改行を含めない コード画面左側にある「ソースコードのフォーマット」をクリック その中にメニューとして「コードフォーマット設定」があるので、それを選ぶ。 タグごとに細かな設定ができるので、自分が一番見やすいように修正する。 自分の場合は「a」「div」「head」「button」を修正。 aタグの設定 改行：タグの前後 コンテンツ：フォーマットおよびびインデントあり divの設定 改行：前、中間、後 コンテンツ：フォーマットおよびびインデントあり buttonの設定 改行：前、中間、後 コンテンツ：フォーマットおよびインデントあり headの設定 改行：前、中間、後 コンテンツ：フォーマット及びインデントあり 最後に、「ソースフォーマットの適用」 ソース画面左の「ソースコードのフォーマット」アイコンを押して、「ソースフォーマットの適用」を選択すると、開いているソースの中身が整形されます。 ざっと見直して問題なければこれで完了！

 個人的趣味でティラノビルダーを使い、何年か前からノベルゲームを制作しています。 初制作ながら、この「ティラノビルダー」という素晴らしいソフトに出会えたおかげで、ゲームを作り上げる喜びを感じることができ、本当に感謝です。 さて、本題ですが、マルチエンディングのゲームを作成するときは、「どのエンディングに到達したか」という事が結構重要になってくると思います。 今回もざっくり説明すると「ノーマルエンド」「グッドエンド」「トゥルーエンド」というものを作り、それぞれに到達したらエンディングを振り返るような仕組みを実装しました。 キャラクターとの好感度やイベントフラグなどは、ゲームを始めからプレイする度にリセットされるのが当然ですが、エンディングの状態は常に記憶された状態にしたい。 そんなときに利用するのが「システム変数」になります。 ティラノビルダーでいうところの、「プロジェクト」→「変数管理」で変数を追加する際、「システム変数」のところにチェックを入れると作成できます。 しかし、これが実は初期値「０」を入力しても、実際に変数の中身を参照すると「undefined」という文字列が入っている…。 よくあるフラグの「０」ならクリアしてない、「１」ならクリアしてる、という概念で条件分岐をしようとすると期待した結果が返ってこないのだ…。 仕方ないので、title_screen.ksの中で０を代入して初期化するしかない。 ■具体的には以下のようになります。 コンポーネント「ジャンプ」「変数設定」「ラベル」を配置↓ ■ジャンプ A「end_normal」 B「定数」「１」 フラグ判定用の式「実行条件を指定する」にチェック 条件「AとBが同じ場合」 ターゲット「ノーマルエンドクリア」 ■変数設定 変数「end_normal」 操作「代入」 オペランド「定数」「０」 ■ラベル ラベル名「ノーマルエンドクリア」 end_normalに１が入ってたらスルー。 end_normalが１じゃなかったら０を代入。 という感じ。

 bootstrap5の基本classには、fs-1、fs-2、のように数字のみ指定してフォントサイズを変更する方法があるが、カラムを指定する時のような、col-sm-1、col-md-2、のように画面サイズによってフォントサイズを可変にする指定が無い。 そこで、以下ファイルに１行追加することにより、それが実現する！ scss/_utilities.scss 434行目くらいにある"font-size"のところ。 "font-size": (       rfs: true,       property: font-size,       class: fs,       values: $font-sizes,       responsive: true　←これを追加     ), 日本語サイトだとなかなか実装している人が居なかったので英語検索して見つけ、色々いじった結果、これを追加するだけで行けることが判明した！ 助かる！

 最近１ページもののHPが増えているが、ページ内リンクしたときに、スクロールした飛び先のコンテンツがヘッダーに隠れてしまう現象に悩まされてた。 その度に、目的のエリアよりも上にわざわざaタグを置いて対処していたが、CSSで対応できることが判明！ html {   scroll-padding-top: 100px; /* 固定ヘッダの高さ分 */ } これだけ！素敵！ スマホや大体のPCブラウザに対応しているみたいです。

 Wordpressのテーマ「Lightning」を使用するにあたり、以下の問題にぶち当たって解決！ 1.コピーライトが消せない 2.１ページものでページ内リンク（アンカー）した時に、グローバルナビゲーションに下線がついてしまう ※但し、これらの解決方法はかなり強引なので、オススメはしない。 まず「１」コピーライトが消せない いろんなサイトを調べてみると、子テーマで簡単に消せるような記述があるけど、どういう訳か子テーマをいじっても消せなかったので、親テーマをいじってやる。 wp-content/themes/lightning/_g3/inc/template-tags.php 251行目あたりの //Powered. から下３行くらいを、/* */ で囲ってコメントアウト！

 タイトルの通り、wordpressのテーマ「twenty-seventeen」を使用したサイトにて、投稿（お知らせ）記事の「この投稿を先頭に固定する」にチェックを入れた所、「お知らせ」ページ内では上部固定されるが、トップページでは固定されない現象がありました。 色々調べた所、以下のソースを変更することで解決しました！ wp-content > themes > twentyseventeen-child(ここは子テーマ) > template-parts > page > content-front-page-panels.php 63行目 'ignore_sticky_posts' => true, を 'ignore_sticky_posts' => false, に変更 先頭固定表示にする記事は「sticky」というclassがつくようになっていて、 つまり「ignore」＝「除外する」　「sticky_posts」＝「固定記事」　「true」＝はい 「固定記事という設定を無視しまーす」 という指定になっていました。 いやいや、日本語サイトもそうですが、海外で記事を漁ってもなかなか出てこず、手こずりました。

modxのフォーラム管理人であるyama様に紹介して頂いた、modx evolution用のサイト内検索スニペット。 https://github.com/yama/evo-content-search ドキュメントが無いですが、という事でしたが、 ・ajaxsearchと比べて、チャンクやテンプレート変数を展開した状態のテキストも建託対象に含めてくれる ・含まれる文字列の割合に応じて上位表示が出来る ということで、こちらを設置してみることにしました。 １．まずgithubからデータを一式ダウンロード。 ２．modxの「assets＞snippets」のフォルダ内に、解凍した「ContentSearch」フォルダをアップロード ３．modx管理画面のスニペットを新規作成し、 　スニペット名[ContentSearch] 　スニペットコードの内容に以下を記載 return require MODX_BASE_PATH.'assets/snippets/ContentSearch/bootstrap.php'; ４．検索ボックスを表示したいリソースに以下を記載 　[!ContentSearch!]  完了！！ 最初に検索ボックスを設置したページを開く際、インデックス登録が走るので少し時間がかかるが、無事検索＆結果表示出来るようになりました！ ＋α 個人的に色々いじっている部分の関係で修正した部分としては、 １．pagetitleにbrタグを入れているので、リソース内に表示する際のpagetitleを[*pagetitle:strip_tags:hanzen*]と表記していたので、以下のファイルを修正 ■core>config>template>result.html [+pagetitle+]の部分を[+pagetitle:strip_tags:hanzen+]に修正 ２．更新日＆ページURLの表示は消したいので、同ファイルの5行目〜7行目をコメントアウト <!--<div> [ 更新日：[+publishden:date(Y-m-d)+] ] [(site_url)][~[+id+]~] </div>--> という感じです。 ただ、これも日本語コメントが記載されているスタイルシートの中身まで検索対象...

●modx公式サイトのページ https://modx.jp/docs/extras/snippets/ajaxsearch/ ●githubのページ（1.12.1） https://github.com/extras-evolution/ajaxSearch/tree/master/assets/snippets/ajaxSearch ●ロシアのサイト？パラメータが詳しく載っているサイト http://i--gu.ru/asearch MODXでサイト内検索を調べていた所、「ajaxsearch」が現状で主流な感じのプラグインだったため導入、しかしサンプル通りに記述しても検索結果が表示されない事象に会う。 サンプルでは、[!Ajaxsearch!]と書けば良い。とのことだったが…。 googleサイト内検索を導入したところ、「広告が出るのが嫌だ」と言われ… 色々とエラー内容を調べても最初はわかりませんでした。 ■リソース内容 [!AjaxSearch? config=`` // &asId=`as2` &ajaxSearch=`1` &tplResult=`search-result-item` &debug=`1` !]  ■エラー内容 Uncaught TypeError: as.so.setStyle is not a function at activateAsInstance (ajaxSearch.js:formatted:72:18) at activateSearch (ajaxSearch.js:formatted:28:9) at g (mootools.js:3:7528) at mootools.js:3:7706 at mootools.js:3:21359 at Array.forEach (<anonymous>) at fireEvent (mootools.js:3:21299) at mootools.js:3:27550 at Function.<anonymous> (mootools.js:3:27703) at g (mootools.js:3:7528) エラー内容を調...

 タイトルのままですが、元々別サーバーで管理していたwordpressをxserverにデータ移行し、ドメイン移管前だったのでhostsをいじって管理画面にログインしました。 元々SSLがかかっていたサイトなので、一時的に設定のURLを「https」から「http」へ変更したが、なぜか管理画面メニューの「固定ページ」をクリックした時だけhttpsのページへ移動し、かつxserverの「無効なURLです。」が表示されてしまった。 URLからsを削除してアクセスしても勝手にhttpsになってしまい、どうしたものか、と思っていたが、chromeのブラウザキャッシュを削除したところ、問題なくアクセスできるようになった。

 wordpressで社内ドキュメント管理システムを構築することになり、見た目や機能が綺麗な「Document Library Pro」を導入することにしました。 「Document Library Lite」はwordpressのプラグイン検索で見つけられます。 これでも十分機能としてはいいのですが、フォルダ階層と、そこに属したファイルをテーブルで表示する仕組みを利用してくて、Proを導入しました。 しかし、完全英語版であり、細かな設定項目をいちいち頭の中で翻訳しながら（またはgoogle翻訳に頼りながら）設定するのは面倒なのと、「Dodument」一覧を表示したときに管理画面で横に広がった見にくいテーブルが許せなくて、日本語化する方法を探しました。 そして、公式サイトで他の言語を作る方法を発見。 https://barn2.com/kb/translating-document-library-pro/ それに従い、独自で日本語化することに…。 元から入っている言語ファイル「」を、 PoEdit というフリーソフトを使って地道に翻訳。 最後にpoからmoへ書き出し、フォルダに突っ込む。 全項目を頑張って日本語化したが、多言語対応していない箇所があってものすごく残念。 だが、一応それっぽくはなったので日本語化ファイルと日本語化の方法を記載します。 自力でやってみたい方向け【自力日本語化の流れ】 1.「ルートディレクトリ/wp-content/plugins/document-library-pro/languages/document-library-pro-nl_NL.po」のファイルを複製 2.公式サイトには「nl_NL」の部分を言語名に変えろとのことだったが、試したところ「ja」だけで表示された。つまり「document-library-pro-ja.po」とする。 3.PoEditで英語に対応する日本語を地道に入力 4.mo形式にして保存 5.元の言語が入っていたところと同じ場所へイン！ 6.wordpress管理画面にアクセス→日本語化！ 自力は面倒だからファイルよこせな方向け【ファイル入れるだけ日本語化の方法】 1.私が作った「 document-library-pro-ja.mo 」を「ルートディレクトリ/wp-content/plugins...

 MakeShopをいじり始めました。 使用したベーステンプレートは「BRothers」です。 商品を登録して、陳列位置を「新商品」へ。 そうすると「NEW ARRIVAL」にスライダー形式で商品が表示されるが、 ミニマムで運用しようと考えていたのでカテゴリーは作成せず。 ただ単に「NEW」のところに商品が流れるだけでは画面が寂しいし、カテゴリーを選択しなくてもトップページにある程度商品一覧を表示して欲しい… ただ、初期カテゴリーの「すべての商品」コード：all_itemsの内容をトップページに表示使用としたところ、何も表示してくれない！ 検索しても何も情報が出てこない！ 公式に問い合わせても「できない」と言われる。 んで、思いついたのが、「新商品」は表示されているのだから、「新商品」と同じ内容でスクロールしないやつをコピペしてモジュールを作り、表示すればいいのだ。 複数商品が表示される「セール」$module.sale_item　をコピペして、新しく「アイテムリスト」$module.item_list　のモジュールを追加。 中身からいらない情報をコメントアウトしたりして、色々と呼び出しを行っている「$special_item」と書かれている部分をすべて「$new_item」に書き換えた。 そして、トップページのHTMLの中に新しくsectionを追加して、 <{$module.item_list}> これでやっと問題なく商品一覧が表示されるようになりました。 新商品だけでなく他の陳列位置に設定したものも表示するには、それぞれの内容を同じitem_listのモジュール内に書けばなんとか行けそうな気がします。

 MODXで制作したサイトに、サイト内検索を設置しようと思い、googleカスタム検索を設置してみた。 https://cse.google.co.jp/cse/all 表示は問題なかったのだが、入力フォームに文字を入力して「検索」ボタンを押したあと、その検索結果で「一致する結果はありません」と表示されてしまう。 試しに個人サイトでも同じMODX環境なので設置してみると、こちらは問題なく表示される…。 noindexやnofollowを設定しているわけではないのでおかしい… 現在原因究明中

ol li　でリストを表示したら、本来数字で1.2.3とリストとなるはずが、全て「・」になる。 そこで、  cssで *{ font-size:1.1em; } を *{ font-size:1em; } にするとなぜか「1.2.3」に直る…意味不明　解析中 ★解決 実は見えていたのは1.の「.」の部分だった ul,olに対して padding-left:2rem;としていたが、padding-left:5rem;にしたら数字が表示された…なんかもう嫌！

 modxでテスト環境を作成後、同じデータベースを使用したまま同じサーバーの別ドメインに対してmodxのエクスポート・インポートを行いました。 ソース類はまるっと移動。 そして管理画面へログインしようとすると、なぜかログインできない。 パスワードを再発行しようとしても、アカウントが無いと言われる…おかしい。 そこで、phpmyadminへ接続し、DBの以下を変更 「modx_manager_users」テーブルの「password」を「 e10adc3949ba59abbe56e057f20f883e」へ変更。 じつはこれ「123456」になる。 再度管理画面へアクセスし、パスワードに123456を入力→ログイン出来た！！！ ※ログイン後はすぐパスワードを変更してくださいね

 タイトルの通り、メインのドメインを別のサーバーで運用していて、サブドメインだけをxserverで運用し、そこへmodxをインストールして動かした際に、うまくssl化ができない現象が起きた。 具体的には ・リソースを更新すると「site_url」に記載しているhttpsのURLが何故かhttpになっていて、外部ソースのcssやjsが読み込まれず画面が崩れる ・xserverの管理画面からhttpをhttpsへリダイレクトする設定をしてみるとそもそもページが表示されなくなる 以下の設定を追加することで、一旦はhttpのアドレスにアクセスできないようにしました。 ■modxインストールフォルダの.htaccessファイルに以下を追記 <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTPS} !=on [NC] RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> 一番下に追記してアップすればOK サイトにアクセス後、URLからhttps→httpに変更してリロードしてもhttpsから離れなければ一旦OK

 modxのコンテンツに背景透過png画像を登録後、それを表示すると何故か背景が黒くなる、という現象がおきました。 photoshopで開いてみたり、pngで保存しなおしてみたり、プレビューで開いてみたりしても背景は透過なのに… と検索していたところ、phpで画像処理をする関数を通ると、png透過背景が黒くなるという記事を見つけました。 どこで気がついたのが、modxの「ツール」「グローバル設定」「ファイル管理の設定」で「画像の横幅の最大値」に数値を入れていたことを思い出しました。 アップロードする画像が大きかったら、自動的に1000pxに縮小する処理です。 つまりここでphpの画像処理を通ることにより、png背景が黒になっていたということ！ 数値を消してアップロードしなおしたところ、問題なく透過で表示されました！

※jqueryが必要  ■js //画面のロード、タブレットの縦横切り替えで動く $(window).on("load orientationchange resize", function() {   scroll_effect();   scroll_effect2();   //画面のスクロール、タッチによるスクロールで動く   $(window).on("scroll touchmove", function(){     scroll_effect();     scroll_effect2();   });   //フェードイン   function scroll_effect(){     $('.fadein').each(function(){       var elemPos = $(this).offset().top;       var scroll = $(window).scrollTop();       var windowHeight = $(window).height();       if (scroll > elemPos - windowHeight){         $(this).addClass('scrollin');       }     });   }   //スライドイン   function scroll_effect2(){     $('.slidein').each(function(){       var elemPos = $(this).offset().top;       var scroll = $(window).scrollTop();       var windowHeight = $(...

modxでページタイトルを表示したい場所に[*pagetitle*]と表示しますが、そのページタイトルをキリの良い所で改行して表示したい、という時は、そのまま改行したい場所に＜br＞を入力します。 しかし、それだと「改行しないでタイトルを表示したい場所」でも、改行されて表示されます（当たり前だけど…） そこで、 ①strip_tags関数を使用する $str = [*pagetitle*]; echo strip_tags( $str, '<br>'); これをスニペットに登録し、表示したい場所に[[スニペット名]]としてみたのだが、どうしてもBRが消えてくれない。 ②正規表現で削除する ③modxのタグを使用する【これが正解！】 pagetitleを出力するリソースを以下にするとbrタグを削除してくれる [*pagetitle:strip_tags:hanzen*]

 Macbookproの13インチ、2016モデルを使用していますが、先日初めて覗き見防止シートを購入してみた。 上部がマグネット式になっていて、両面使用可能（グレア・アンチグレア）。 張り付きもいいし、画面を閉じるとキーボードのシートとちょっとぶつかって蓋は浮き気味になるが、ちゃんとスリープモードにも入ってくれる。 …と思っていたのだが、つけたまま画面を閉じてその翌日、画面の上部に妙な黒い影のような横線がどーんと！ VRAMリセットやSMCリセット、セーフモードでの立ち上げでも解消されず、 画面のスクリーンショットを撮っても黒い線は映らず。 Appleにチャットで問い合わせしたところ、残るはOSの再インストール…。 そこでいろんな記事を見ていたところ、この機種は修理プログラムの対象になっていたので、まずはジーニアスバーに行くことにした。 https://support.apple.com/ja-jp/13-inch-macbook-pro-display-backlight-service https://support.apple.com/ja-jp/keyboard-service-program-for-mac-notebooks 念の為シートを貼らずに土日放っておいたら、やはり画面が戻っている… 覗き見防止、どうしたらええの…

 modxのtemplateを何種類か作り、フロント画面でボタンを押すことでユーザーがテンプレートデザインを切り替える方法を探していたが結局見つからず、自作したのでメモします。 ■template templateに白ベース、黒ベースのhtmlを作成済み [2]black [3]white ■リソース画面にボタンを配置します。 [[changeTPL]] <!-- チャンクの呼び出し --> <form name="form" action="[~[*id*]~]" method="post"> <input type="submit" class="btn" name="subject" id="subject" value="白" /> <input type="submit" class="btn" name="subject" id="subject" value="黒" /> <input id="thisTPL" name="thisTPL" type="hidden" value="[*template*]" /> </form> ※フォームの内容をPOSTし、結果を同じ画面に返すことで反映させます。 ※hiddenで現在使用中のテンプレート番号も一緒に渡します。 ■チャンク // inputのidがsubjectのvalue値を取得 $post = $_POST['subject'];  //inputのidがthisTPLのvalue値を取得（テンプレート番号） $thisTPL = $_POST['thisTPL'];  //表示中のリソース番号を取得 $id = $modx->documentObject['id'];  //現在のテンプレートを取得し、切り替える if($thisTPL...