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

wordpressのテーマ「Twenty Seventeen」を使ってみたのですが、ヘッダー画像（カスタムヘッダー画像）のサイズが、トップページと他のページではサイズが異なり、画像を上下左右最大限まで表示する必要があったので、その設定方法と苦労をメモしておきます。 １．まずは子テーマを作成します（これについては別途記載） ２．子テーマの「function.php」に以下を追加します。 // Eliminate twentyseventeen-front-page home css // フロントページのヘッダー画像を他のページと統一する add_filter( 'body_class', 'my_body_class',20 ); function my_body_class( $classes ) { unset($classes[array_search("twentyseventeen-front-page",$classes)]); unset($classes[array_search("home",$classes)]); return $classes; } フロントページの画像を表示するプログラムを、他ページと同様の扱いにしてしまいます。 最初はトップページ、サブページのヘッダー画像をそれぞれCSSを探って変更したのですが、 IEと他のブラウザで見え方が違ったりと色々苦戦しました。 ３．子テーマの「style.css」に以下を追加します。 .site-branding{ padding:30% 0 !important; height: calc(100vh - 104px); } .panel-image { background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: 100%; position: relative; } .has-header-image.twentyseventeen-front-page .custo...

■opencms_8.0.1jaのインストール手順 ※Windows7の64bit環境だった為、VirtualPCを構築 １．サイトからダウンロード http://www.opencms.jp/download/ ２．解凍した中のinstall.htmlの流れに沿って各種ソフトをインストール 　　１）java SDKをインストール http://www.oracle.com/technetwork/java/javase/downloads/index.html 　　　　Windows x86版の「jdk-7u1-windows-i586.exe」をダウンロード＆インストール 　　２）Tomcatをインストール http://tomcat.apache.org 　　　　「apache-tomcat-7.0.22.exe」をインストール 　　３）Tomcatの中にopencmsのファイルを移動 　　　　Tomcatのインストール先フォルダの下記階層にopencmsのフォルダ内にあった「opencms.war」を配置 　　　　例）C://tomcatにインストールした場合 　　　　　　C://tomcat/webapps/opencms/　　（「opencms」は任意のフォルダ名で良い） 　　　　　　opencms.warの拡張子を.zipに変更し、解凍して出てきた中身を上記階層に配置しておく 　　４）MySQLをインストール http://www.mysql.com/downloads/ 　　　　「mysql-installer-5.5.17.0.msi」をサービスにインストール 　　　　※MySQL Workbenchで以下の設定をしておく 　　　　　　１）Server AdministrationのLocal MySQL5.5を起動 　　　　　　２）Options Fileにある「Networking」タブに移動し、「max_allowed_paket」にチェックを入れ、 　　　　　　　　値に「16777216」を入力 　　　　　　３）MySQLを再起動させる 　　５）opencmsのインストール画面を起動 　　　　ブラウザで下記アドレスにアクセス http://localhost:8080/opencms/...

■phpmyadminでDBをエクスポート ■phpmyadminでDBをインポート ■サーバー上のデータをFTPでダウンロード ■新しいサーバーにデータをFTPでアップロード ■「core/config/config.inc.php」のDB接続情報とURLを修正 ■DBの「modx_workspace」のパスを修正

①facebook「いいね」ボタン（押すと自分のタイムラインにシェアします） https://developers.facebook.com/docs/reference/plugins/like/ ここで作れます。 ②Twitter　ツイートボタン <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="アカウント名" data-lang="ja">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> ③google＋１ボタン ↓を、ボタンを表示したい場所に設置 <g:plusone></g:plusone> ↓を head 要素内または body 終了タグの直前に設置 <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ja'} </script>

FTPでmodxと同階層にフォルダを作成してindex.htmlを配置しても、管理画面側でエラーページのリダイレクト設定をしているせいか、 ページにURL打ち込んでアクセスしようとするとhtmlページをファイルとしてダウンロードしようとしてしまう。 方法を模索中… 【解決！】 そもそも普通に階層を作っても読み込んでました。 じゃあなんで今回おかしくなったかというと、htmlファイルの中でinclude()を使ってました。 これはphp.iniの設定でallow_url_includeがonになっていないとダメなんだそうで。 なんだよー、普通に使えるのかー！ というか何故modxとhtmlの共存ってキーワードで「普通に使えるよ！」というページがヒットしないのだろうか… CMS使ってるのにHTMLページを配置するなんてことはそうそうないのかな。 とにかく長いこと悩んだ事象が解決！

①実際に表示するソースに以下を記入（index.htmlとかに） [[!getResources? &parents=`2` &includeTVs=`1` &tpl=`news`]] &parents=`2`　ここに入る数字は実際に表示したい親コンテンツのID　「新着情報」とかいう親コンテンツを作成してそれ以下に新着情報詳細を追加していく場合 &includeTVs=`1`　表示形式を自分で指定する場合は１ &tpl=`news`　表示形式を自分で指定する場合、その表示形式を指定しているチャンクの名前 ②チャンクを作成する　この場合「news」という名前で作成 ↓チャンクの内容 [[+pagetitle:toCDATA]] （[[+publishedon:strtotime:date=`%Y/%m/%d 更新`]]） ③表示結果　こんな感じ ・冷やし中華始めました(2012/06/05) ■表示順をメニューインデックスの順番で表示する ①スニペットを作ります　「getResourcesTree」という名前で作成 $v) { $keys[] = $k; if (is_array($ar[$k])) $keys = array_merge($keys, multiarray_keys($ar[$k])); } return $keys; } } $parents = (!empty($parents) || $parents === '0') ? explode(',', $parents) : array($modx->resource->get('id')); $depth = isset($depth) ? (integer) $depth : 10; $tree = $modx->getTree($parents, $depth); $tree = multiarray_keys($tree); $tree = implode(',', $...

①getpage　を導入 ②新着情報一覧のページに以下を書きます（newslist.htmlとかに） [[!getPage? &elementClass=`modSnippet` &element=`getResources` &pageVarKey=`page` &parents=`2` &depth=`1` &limit=`30` &includeTVs=`1` &includeContent=`1` &tpl=`news` ]] [[!+page.nav]] &parents=`2`　新着情報の親コンテンツIDを指定　getresourcesと同じ &depth=`1`　どの位の階層までいくか　これはなくても可 &limit=`30`　１Pに何件表示するか &includeTVs=`1`　見栄えを指定するかどうか　getresourcesと同じ &tpl=`news`　見栄えを指定しているチャンク　getresourcesと同じ [[!+page.nav]] 　ページナビゲーションを表示する場所にこれを記入。（一応センタリング） あとはそのまま気にせず書いとけ。

スニペット名：　例　[[parent_id]] 内容 $pid = $modx->documentObject['parent']; echo &pid; リソース内に[[parent_id]]と書くと、その場所に、現在表示しているページの親にあたるID番号（数字）が表示される。

スニペット名　例：[[id]] 内容↓ $id = $modx->documentIdentifer; echo $id; 使うときは、リソース中に[[id]]と記入。 内容にはリソースのID（数字）がそのまま出力される。

スニペット名：例　[[is_folder]] 【内容】 $folder = $modx->documentObject['isfolder']; if($folder==true){ $folder="1"; } else{ $folder=""; } echo $folder; 【使い方】

■CPIサーバーにmode evoをインストールした ・CPIサーバーにmodxをインストールした際、インストールが全て完了して管理画面にログインは出来たのだが、 インストールディレクトリを消してまずは「更新」ボタンを押すよう促されます。 そこで、「更新」をした後に管理画面の右側エリアがエラーページになってしまった…。 で、色々と調べた結果、インストールが完了して.htaccessが生成された後、その.htaccessを一旦FTPソフト等でダウンロードしてきて、 以下の一行を追加することで問題が解消しました！ 3行目くらいに↓があるので、その下に… # Options +FollowSymlinks Options +SymLinksIfOwnerMatch　←これを追加！

■フレンドリーURLが効かない、「プレビュー」を押しても404エラー画面が出る →ルートディレクトリにインストールしなかったことが原因でした。 まずはコレ→modxをインストールしたディレクトリにある「ht.access」を一旦「.htaccess」に変更しましょう そしてコレ→「RewriteBase」が「/」となっているところを、「/インストールしたディレクトリ名/」に変更しましょう 自分はコレで行けました。

【概要】 modxで、コンテンツリソースに入力した内容を元に、ページ内にgooglemapを表示し、マップピンとその吹き出し内容を表示する。 【流れ】 1.スニペット「GoogleMapMarker」を用意 2.スニペット「phx:slashandstrip」を用意（特殊文字とかを回避するやつ） 3.チャンクを用意 4.googlemapのAPIを取得 5.マップを表示するリソースを用意 6.マップピンと吹き出し内容を管理するリソースを用意 スニペット「GoogleMapMarker」を用意 まずは、スニペット「GoogleMapMarker」をダウンロードしてきましょう。 modx管理画面の「エレメント」「エレメント情報」「スニペット」タブを開いて、スニペットを新規作成します。 スニペット名は「GoogleMapMarker」、中身には、ダウンロードしてきた内容を丸々コピペ。

・StableUpdateのデータを丸々上書きしてみる ・PHP3.5.1以降にしてくれといわれる ・xamppが172だったから最新の181をインストールする ・「Strict Standards」とかエラーが沢山出る ・xamppのphp.iniの「error_reporting = E_ALL | E_STRICT」ってところを「error_reporting = E_ALL」にするといいと言うから直して再起動 ・まだ治らない 今ここ

■メタタグとして以下を設定すると、スマホ側で勝手に画面の大きさとかを調整されなくなる <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">

■リンクがクリック出来なくなる件 HTMLソース↓ <div class="test"> <a href="#">リンク</a> </div> スタイルシート↓ .test { z-index:-1; } 上記の場合、HTML内のリンクにマウスオーバーしても、リンクとして反応してくれない。 z-indexが原因のようだ。

・Gmailのアカウントを持っていないと送信エラーになるので注意 ・トリガーをフォーム送信にする ・スクリプト上で実行しても「 TypeError: undefined からプロパティ「response」を読み取れません。」と言われるけど、そりゃそうですよ。「response」はフォーム送信時に初めて取得されるのだから。ということで気にしない。テストは実際にフォーム送信してメールが届くかチェックすればよい。 ・改行は「¥n」じゃなくて「\n」としないと文字化けする。 「メール送信.ga」 function submitForm(e){   var itemResponses = e.response.getItemResponses();   var message = '';   for (var i = 0; i < itemResponses.length; i++){     var itemResponse = itemResponses[i];     var question = itemResponse.getItem().getTitle();     var answer = itemResponse.getResponse();     message += (i + 1).toString() + '. ' + question + ': ' + answer + '\n\n';   }      var to = 'ここにメアド';   var title = 'ここに件名';   var body = 'メール本文の頭に何かメッセージを書く時\n\n';   body += message;   body += '\n\nこのメールはフォーム入力後の自動送信です。とかなんとか\n';   GmailApp.sendEmail(to, title, body ,{     from:'送信元のメアド'...

■googlemapsをiframeを使わないで表示する 【HTML】 <head> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //<![CDATA[ var map; function map() { var latlng = new google.maps.LatLng(35.711783,139.796686); //緯度経度の初期値 var opts = { zoom: 17, //初期の拡大値（大きいほど拡大） mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; map = new google.maps.Map(document.getElementById("map"), opts); //id="map"のところに表示しますよー // Marker var markerOpts = { position: new google.maps.LatLng(35.711844,139.796444), //マーカーを表示する緯度経度 map: map, title: "マーカーですよー" //カーソルを合わせたら表示される文字 }; var marker = new google.maps.Marker(markerOpts); } //]]> </script> </head> <body onload="map(...

■通常のアナリティクスの記述に加えてこれを書く ■実際にリンクを貼る時 ※でもコレだと別ウインドウで開く為のtarget blankが効かない ※ちなみに、  XHTML 1.0 Strict では target = blank が利用できないらしい。 ■別ウインドウで開く方法 setTimeout('document.location = "' + link.href + '"', 100)　の部分を setTimeout('window.open("' + link.href + '", "_blank")', 100)　とすると別ウインドウで開けるようになった…。 でも、ポップアップブロックにひっかかる。 引き続き調査。 ポップアップブロックされた時に別ウインドウで開く方法 function openWindow( url,name,option ) {     if( !window.open( url, name, option ) ) {         location.href = url;     } } ■別ウインドウで開く方法その２ これは、scriptの方には何も書かなくていい方法…。試し中。 テストページ 別ウインドウでは開くから、無事イベントを拾ったら入れ替える予定

エリアを選択した状態で… 「ホーム」→「条件付き初期式」→「ルールの管理」→「新規ルール」→「数式を仕様して、書式設定するセルを決定」 →「=MOD(ROW(),2)=0」 書式から色を選択してOK