concrete5では、様々なブロックが用意されています。様々なブロックが出力できるのは嬉しいのですが、デザインをスタイルシートでカスタマイズしたい時には、ブロックのHTMLコードを確認する、という手間がかかります。

ブロックが一つや二つなら手作業でソースコードを見ても良いですが、多くなると大変ですね。なので、テーマのエリアを改造して、ブロックの実際の出力と、ソースコードを順に表示するようにしてみます。実際の出力とソースが一緒に表示されると、デザインカスタマイズがしやすくなります。

今回のカスタマイズは、テーマのコードを編集します。かならずバックアップを取ってから行ってください。

elementalのblank.phpを変更する

オリジナルテーマを作っても良いのですが、簡略化のため、デフォルトテーマelementalのblank.phpを変更することにします。元のファイルはこんな感じです。

<?php
defined('C5_EXECUTE') or die("Access Denied."); この行は、直接アクセスを防止するための呪文です。
$this->inc('elements/header_top.php'); ?>  テーマのヘッダーを読み込みます。

<main>
<?php
$a = new Area('Main'); エリア（ログインすると編集できる箇所）を作成します。
$a->enableGridContainer();  このエリアではグリッドコンテナを有効にします。
$a->display($c);  エリアの内容（ログインしてブロック等を置いた場合、ブロックの内容）を出力します。
?>
</main>
<?php  $this->inc('elements/footer_bottom.php'); ?> テーマのフッターを読み込みます。

これを下記のように変更します。

<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header_top.php'); ?>

<main>
<?php
$a = new Area('Main');
$a->enableGridContainer();
ob_start();  出力結果を一時的に保存します。
$a->display($c);
$data = ob_get_flush();  出力結果を $data に格納する＆出力します。
echo h($data);  $data の内容をエスケープして出力します。
?>
</main>
<?php  $this->inc('elements/footer_bottom.php'); ?>

こうすると、通常のエリアの出力に加えて、HTMLソースコード(エスケープ処理されたコード)も同時に見ることができます。

※あくまでテーマ開発／編集用に作成しています。サーバー負荷等は考慮していません。このエリアにブロックがたくさん入っていると、表示が遅かったり、サーバーの制限で途中でカットされたりする可能性があります。