[concrete5 サイト制作] 社会福祉法人 恩賜財団 東京都同胞援護会

社会福祉法人 恩賜財団 東京都同胞援護会のサイトを10年ぶりにリニューアルしました
http://doen.jp/

昔MTで作ったせいで更新がすごく大変だったものをconcrete5にしてクライアントの更新作業が楽になるように設計。
もうずっとリニューアルしたかったんですよ

Screen Shot 2017-04-03 at 16.15.24-fullpage

Screen Shot 2017-04-03 at 16.15.39-fullpage

Screen Shot 2017-04-03 at 16.16.09-fullpage

Screen Shot 2017-04-03 at 16.16.03-fullpage

やったこと

  • デザイン
  • HTML/CSS/JSコーディング
  • レスポンシブ
  • concrete5組み込み
  • フォーム作成(concrete5外)
  • 承認フロー
  • 運用マニュアル作成

つらかったこと

  • 同じフォーマットにひたすら住所やら電話番号やら座標やらを入力していく作業
    →xmlかcsvでインポーター使えばよかったと反省。あるいはデータ投稿だけしてもらうバイトを雇えばよかった。
  • 承認フローがなかなかうまく機能してくれなくてどハマり
    →参考文献がなかったのと、フォーラムに質問するということを考えなかったので反省。次からはググってもわからない問題はフォーラムに質問しよう。
  • さくらサーバーで通知メールが飛ばない問題
    →もうどうしようもなくてフォーラムに相談して解決してもらった。

更新性が高い設計にするために汎用性をもたせつつ、デザインを両立させるという作業に対して、非常にモチベーションが高く保てたかな、と。
今回制作ページは160ページほどで、concrete5で作らなかったらおそらく3倍くらいの作業時間が必要だったのではないかなーと思います。

リリースしたおかげで今月は暇になったからゆっくり療養します。もう体がバキバキ。

[Concrete5 5.6.3.1]タイトルタグの表示を変えたい[メモ]

前回。ECキューブのタイトルタグの記事を書いてから気づいたのですが、このブログはConcreteg5が主な趣旨のブログでしたので、一応このブログを見る方は既にご存知かと思いますがタイトルタグの表示の変更方法を記載しておきます。

Concrete5のデフォルトだと「サイト名::ページ名」という形で表示されます。
やはり、昔だとそれでも問題なかったんですが、最近のブラウザはタブ表示でサイト名が先に表示されるとタブを見てもどこのページを開いているかわかりませんので、特別な理由(宗教上の理由とか)がない限り、ページ名を先に表示させた方が明らかにユーザビリティに優れていますよね。

バージョン:5.6.3.1

Concrete5のタイトルタグはsite.phpに記述することで変更が可能です。
※インストール直後だとデータベースの設定しか書いてないので、その下にdefine(‘PAGE_TITLE_FORMAT’, ”);を追記します。
/config/site.php

デフォルト

<?php
define('DB_SERVER', '*******');
define('DB_USERNAME', '******');
define('DB_PASSWORD', '******');
define('DB_DATABASE', '******');

「ページ名|サイト名」

<?php
define('DB_SERVER', '*******');
define('DB_USERNAME', '******');
define('DB_PASSWORD', '******');
define('DB_DATABASE', '******');

define('PAGE_TITLE_FORMAT', '%2$s|%1$s'); //←ここ

「ページ名」のみ

<?php
define('DB_SERVER', '*******');
define('DB_USERNAME', '******');
define('DB_PASSWORD', '******');
define('DB_DATABASE', '******');

define('PAGE_TITLE_FORMAT', '%2$s'); //←ここ

%1$sがサイト名、%2$sがページ名となります。

また、個別にタイトルタグを変えたい場合は、ページ設定の「カスタム属性」にある、「Metaタグタイトル」に入力することで変更可能です

ただし、カスタム属性の Metaタグタイトルに入力をした場合には、%1$sで出力されるサイト名も丸ごと置き換わりますのでご注意ください。

[ECキューブ 2.13.3]タイトルタグの表示を変えたい[メモ]

ECキューブのタイトルタグは、デフォルトだと「サイト名 / ページ名」という形で表示されます。
昔だとそれでも問題なかったんですが、最近のブラウザはタブ表示でサイト名が先に表示されるとタブを見てもどこのページを開いているかわかりませんので、特別な理由(宗教上の理由とか)がない限り、ページ名を先に表示させた方が明らかにユーザビリティに優れていますよね。

バージョン:2.13.3

ECキューブのタイトルタグは基本、テンプレートのsite_frame.tplに書かれています。
/data/Smarty/templates/default/site_frame.tpl

その中の27行目あたりにタイトルタグがありますので、中身をちょちょいといじれば大丈夫
※一行だとみづらいので改行しています

「サイト名 / ページ名」

<title>
<!--{$arrSiteInfo.shop_name|h}-->
<!--{if $tpl_subtitle|strlen >= 1}--> / <!--{$tpl_subtitle|h}-->
<!--{elseif $tpl_title|strlen >= 1}--> / <!--{$tpl_title|h}-->
<!--{/if}-->
</title>

「ページ名|サイト名」にしました。

<title>
<!--{if $tpl_subtitle|strlen >= 1}-->
<!--{$tpl_subtitle|h}-->|
<!--{elseif $tpl_title|strlen >= 1}-->
<!--{$tpl_title|h}-->|
<!--{/if}--><!--{$arrSiteInfo.shop_name|h}-->
</title>

中身のif文は管理画面でサブタイトルが設定されているときにページ名の代わりに表示するものです。
<!–{$arrSiteInfo.shop_name|h}–>がサイト名です。

[jQuery]$(document).readyと$(window).loadの違い[自分メモ]

今までずっとjqueryの実行タイミングをデフォで$(document).readyで書いてました。
今更こんな事書いたら、いろんなお客さんから怒られそうですが、今まで作ってきたjsアニメーションの実行のタイミングは何かをクリックしたら動かすといったような、必ずトリガーが何かしらあるものでした。

で、ちょうど今ページ読み込みと同時に動くアニメーション作っているのですが、PC環境だと問題なくてもスマホで問題があるんすよ。
wifiならまだしも、3G環境でただでさえ読み込みに時間がかかる状態で実行のタイミングが$(document).readyだと、スマホでデータの読み込みが終わった時点でアニメーションが終了しているという本末転倒な事態になる事が判明。

$(document).readyってなんぞ

DOMが読み込まれた時点で実行します。
htmlの構造が読まれた時って事だもんで、画像ファイルの読み込みを待たずにスクリプトの処理を開始します。

じゃあ$(window).loadってなにさ

DOM内に含まれる全ての要素の読み込みが完了した時点で実行します。
なので、今回の懸念である「3G回線」で画像の読み込み待ってる間にアニメーション終わっとるがな、という事態を解消するにはうってつけだったわけで。

ただ、調べている間に見つけたサイトには$(document).readyの方が良い的な事書いてあったので、$(window).loadはあまり推奨はされていないみたいですね。
うーん、もうちょっと勉強が必要だなぁ。

今気づいたけどもう2ヶ月もconcrete5に関する記事書いてないや…。

[CSSクイズ]構造を変えずにCSSだけでボックスの上下の順番を入れ替えられるのかッ!?

<div id="content">
  <div id="firstBox">
    <p>テキストテキストテキストテキスト</p>
  </div>
  <div id="secondBox">
    <p>テキストテキストテキストテキスト</p>
  </div>
  <div id="thirdBox">
    <p>テキストテキストテキストテキスト</p>
  </div>
</div>

例えば上記のHTMLがあったとして。
下記の図のように、#secondBoxと#thirdBoxの位置を入れ替えたいんですよ。

で、条件としては以下。

  • 各div内のテキスト量は不定。つまり高さは可変
  • HTML構造を変えてはダメ
  • CSSはいくらでもいじっても良し

なんだかんだでね、これ結構難しい問題だと思うんですよ。
解決策がない。
CSSクイズとか表題にしてるくせにさ、答えがないんですよ。

position: absolute使うにしても、ボックスの高さが不定だからtopもしくはbottomの値が定まらないし、同様にネガティブマージン使うにしても値が決まらない。
もう#thirdBoxにheight決め打ちしちゃってoverflow: hiddenかscrollでって事も考えた。

なんかどれもこれもスマートじゃない。スマートフォン向けに作ってるのに、全然スマートじゃない!!
あ、このフレーズいいな。今度から打ち合わせとかで使おう。「それ全然スマートじゃないですよね?スマートフォン向けなのに、全然スマートじゃないですよね?」って。

閑話休題。
で、結論としては、もうCSSだけじゃ解決できないよ私。
助けてjavascript〜!

こうすることにした。※cssの部分は結構省略して書いてます。

CSS

div#content {
  position: relative;
}
div#content div#secondBox {
  position: absolute;
}
div#content div#thirdBox {
  position: relative;
}

javascript

[javascript]
var fitstHeight =$(‘#firstBox’).height(); //高さを取得
var secondHeight =$(‘#secondBox’).height(); //高さを取得
var thirdHeight =$(‘#thirdBox’).height(); //高さを取得

$(‘#content’).css(‘height’, fitstHeight + secondHeight + thirdHeight); //#contentに中身のボックスの高さを合計した値を与える。
$(‘#secondBox).css(‘top’, fitstHeight + thirdHeight); //#secondBoxのtopからの位置を#firstBoxと#thirdBoxの合計した値を与える。
[/javascript]

でも、結局javascriptで解決するのも、なんだかちっともスマートじゃないですね。
この部分の解決策は多分、html原理主義者か、js信徒か、css教徒の三つどもえの論争が終わらないんじゃないかなぁと思います。

「君のやり方は間違っている!俺の解決方法はこれだッ!!」って思う人はご遠慮なさらずコメント欄へどうぞ。

サイトマップ内に「サイトマップ」って項目はいらんだろう?

たとえば「sitemap.html」というサイトマップのページがあったとして、その中に「サイトマップ」という項目は必要ないですよね。

  • トップページ
  • 会社概要
  • サービス紹介
  • お問い合わせ
  • 個人情報保護方針
  • サイトマップ ←これいらんやろ

非常に簡略化していますが、上記みたいなリストがあった場合に、ナビゲーションで、同じページが重複しても構わないと思いますが、サイトマップを閲覧している時に、サイトマップというページを表示する必要性がどれくらいあるか疑問です。

せめて正しいマークアップをしよう

こんなパンクズのコードを見る度悲しくなります。

<div class="pan_navi">
  <p><a href="../index.html" title="トップページ">HOME</a> &gt;&gt; <a href="index.html">施設紹介</a> &gt;&gt; 施設名</p></div>
</div><!--second_pan_navi-->

CSS当てづらいんですよ…。全く融通が聞かないコードになってしまう。

htmlの意味を考えるとulかolを使うと思いますが、私はパンクズをマークアップするときは、なるべく<ol>を使う様にしてます。
理由は、トップページからの順番を意味を持って示したいという意図があるからです。

<ol id="topicPath">
<li><a href="../index.html" title="HOME">HOME</a></li>
<li><a href="index.html">施設紹介</a></li>
<li>施設名</li>
</ol>

疑似要素で種類の違うボーダーを引く

↑のh1見出しとか、サイドバーのh3に使ってるボーダーですが、今まで色の異なるボーダーの引き方がわからなくて、いつも背景画像を使っていました。

背景画像を使わずにCSSだけでなんとかしたかった。

で、天から聞こえて来た声が「:after使えばいいじゃない」。

#content article h1 {
    font-weight: bold;
    font-size: 150%;
    text-shadow: 0 0 2px rgba(6, 45, 124, 0.8);
    color: #fff;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #aec5e1;
    margin: 0 0 10px 0;
}

#content article h1:after {
    border-bottom: 1px solid #5e8ec5;
    content: "";
    display: block;
    height: 1px;
    margin: 0 0 -10px;
}

:afterの時に、「content=””」と「height:1px」を入れないとそもそもレンダリングされなかったので、仕方なく入れました。
「margin: 0 0 -10px」は位置の調整用です。

wordpressのテーマをつくります。

予備知識ゼロでこれからwordpressのテーマをつくっていきます。

ちょっと触ってみた感想。

とりあえず新しいテーマを作ろうと思って、デフォルトで入ってたテーマをコピペしていじってみようと思ったら、テーマの説明文やら、作成者やらを記述したファイルが無かった。
こりゃいったいどういう事だと思って、全文検索掛けたらthemesの中のstyle.cssに書いてあった。

なんでテーマの説明文をcssに書かなきゃいけないのか全く持って理解不能。
これどういう理屈なのかなー。