(佐賀→熊本)マークアップエンジニアのググる生活

地方のWEB制作会社で働く、フロントエンドエンジニア。
HTML、CSS、JavaScript(jQuery)、PHP、Smary、EC-CUBE、WordPress、Movable Type等々で解らない時に、Googleで検索したら解決した話や、「閃いた!」などをほとんど自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

2015年11月

min-height - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/min-height

min-height の初期値は「0」ですが、
最近のブラウザでは「auto」でもなるようです。

私のwindows10のfirefox、chrome、IE11、Microsoft Edgeでは、
「auto」でも有効でしたが、
iPadで確認したときに値が認めてもらえず無効になっていました。

やはりきちんと仕様通りに書かねばなりませんね。

ボクは boxer という jQuery プラグインが好きで、よく利用させてもらってます。

便利でクールですが、

閉じる動作が PC だとESCキーか、×ボタンしかありません!
タッチデバイスだとそれこそ×ボタンのみ…。

追記(2015/11/27)
オプションで mobile: true を付けると、
画像外クリックで閉じるが効かないだけ…ということでした…!

なので、 mobile: true を付与した用に追記致しました。

それだけだとちょっと面倒な感じがするので、
画像とテキストと他のボタン以外をクリック or タップした時に閉じるように追加してみました。

ミニファイ化されていないプラグインjsを編集します。

下記の関数を追加します。
どこでもいいと思いますが、
ボクは @name onKeypress のあとに追加しました。

  /**
   * @method private
   * @name onClickbody
   * @description #boxer or .boxer-container or .boxer-content Click for .boxer-close click trigger
   * @param e [object] "Event data"
   */
  function onClickbody(e) {
    var boxer_class = $('#boxer').attr('class');
    var target = $(e.target);
    var target_id = target.attr('id');
    var target_class = target.attr('class');
    if ( 
        boxer_class === 'mobile' &&
        (
             target_id === 'boxer'
          || target_class === 'boxer-container'
          || target_class === 'boxer-content'
        )
       ) {
      data.$boxer.find(".boxer-close").trigger("click");
    }
  }


そのあとに上記関数を動作させるために、
下記のイベントハンドルを追加します。
data.$body.on("touchstart.boxer click.boxer", "#boxer-overlay, #boxer .boxer-close", onClose)
の下あたりがいいかなーとは思います。

      data.$body.on("touchstart.boxer click.boxer", onClickbody);


これで完了です!

ミニファイ化はGoogleお手製のsimpleモードなら大丈夫でした。
プラグインのライセンスコメントをお忘れなく!

http://closure-compiler.appspot.com/home

register_post_type の supports にて、

'editor' => true,

という記述をしていたら wp_footer() で生成される管理バーが表示されなくなった
エラー等がさっぱり出なかったので全く分からず悩んでしまいました。

 => true, を消すと正常になりました。

バージョン 2.13.4

/data/Smarty/templates/default/frontparts/bloc/category_tree_fork.tpl

kaihei






















<ul class="js-menu-slide" <!--{if $treeID != ""}-->id="<!--{$treeID}-->"<!--{/if}--> style="<!--{if !$display}-->display: none;<!--{/if}-->">
    <!--{if isset($child.children|smarty:nodefaults)}-->
        <li class="level<!--{math equation="1 + level" level=$child.level}--><!--{if in_array($child.category_id, $tpl_category_id)}--> onmark<!--{/if}-->">
            <a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$child.category_id}-->"<!--{if in_array($child.category_id, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$child.category_name|h}-->のすべて<span class="u-n">(<!--{$child.product_count|default:0}-->)</span></a>
        </li>
    <!--{/if}-->
    <!--{foreach from=$children item=child}-->
        <li class="level<!--{$child.level}--><!--{if in_array($child.category_id, $tpl_category_id)}--> onmark<!--{/if}-->">
            <a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$child.category_id}-->"<!--{if in_array($child.category_id, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$child.category_name|h}--><span class="u-n">(<!--{$child.product_count|default:0}-->)</span></a>
            <!--{if in_array($child.category_id, $arrParentID)}-->
                <!--{assign var=disp_child value=1}-->
            <!--{else}-->
                <!--{assign var=disp_child value=0}-->
            <!--{/if}-->
            <!--{if isset($child.children|smarty:nodefaults)}-->
                <!--{include file="`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/category_tree_fork.tpl" children=$child.children display=$disp_child}-->
            <!--{/if}-->
        </li>
    <!--{/foreach}-->
</ul>

開閉用のボタンを設置するといいのですが、
リンクエリアが限定されると操作性が悪くなると思うので、
「カテゴリーのすべて」というリンクをもう一つ生成してあげることによって、
解決してみました。

バージョン 2.13.4

http://blog.livedoor.jp/mokuhen/archives/51608775.html
に続いてECCUBEの管理画面ネタ


ページ詳細設定とレイアウト設定の画面のテーブルにて、
名称|レイアウト|ページ編集|削除 と
項目がありますが、その中に確認という項目を追加しました。



<h2>編集可能ページ一覧</h2>
<div class="btn addnew">
    <a class="btn-normal" href="?device_type_id=<!--{$device_type_id|u}-->"><span>ページを新規入力</span></a>
</div>
<table class="list">
    <col width="60%" />
    <col width="10%" />
    <col width="10%" />
    <col width="10%" />
    <col width="10%" />
    <tr>
        <th>名称</th>
        <th>レイアウト</th>
        <th>ページ詳細</th>
        <th>確認</th>
        <th>削除</th>
    </tr>
    <!--{foreach key=key item=item from=$arrPageList}-->
        <tr style="<!--{if $item.page_id == $page_id}-->background-color: <!--{$smarty.const.SELECT_RGB}-->;<!--{/if}-->">
            <td>
                <!--{$item.page_name}-->
            </td>
            <td class="center">
                <a href="./<!--{$smarty.const.DIR_INDEX_PATH}-->?page_id=<!--{$item.page_id}-->&device_type_id=<!--{$item.device_type_id}-->" >編集</a>
            </td>
            <td class="center">
                <!--{if $item.filename|strlen >= 1}-->
                    <a href="?page_id=<!--{$item.page_id}-->&device_type_id=<!--{$item.device_type_id}-->">編集</a>
                <!--{/if}-->
            </td>
            <td class="center">
                <a href="<!--{$smarty.const.ROOT_URLPATH}--><!--{$item.filename}-->.php" target="_blank">確認</a>
            </td>
            <td class="center">
                <!--{if $item.edit_flg == 1}-->
                    <a href="javascript:;" onclick="fnTargetSelf(); eccube.fnFormModeSubmit('form_edit','delete','page_id','<!--{$item.page_id|escape:'javascript'|h}-->'); return false;">削除</a>
                <!--{/if}-->
            </td>
        </tr>
    <!--{/foreach}-->
</table>


/data/Smarty/templates/admin/design/index.tpl
/data/Smarty/templates/admin/design/main_edit.tpl

ページ詳細設定とレイアウト設定では微妙にコードが違いますが、
赤色のところを適用するとOKです。
レイアウト設定には <col> が無かったです。





続いてレイアウト設定画面のブロックUI。



ここからブロック編集画面へのリンクを貼れればいいなーと思ったのですが、
楽ちんで出来たので紹介。


<!-- ★☆★ HEADタグ内テーブル ☆★☆ -->
<td colspan="3" id="<!--{$arrTarget[$smarty.const.TARGET_ID_HEAD]}-->" class="ui-sortable">
    <!--{assign var="firstflg" value=false}-->
    <!--{foreach key=key item=item from=$arrBlocs name="bloc_loop"}-->
        <!--{if $item.target_id == $arrTarget[$smarty.const.TARGET_ID_HEAD]}-->
            <div class="sort<!--{if !$firstflg}--> first<!--{/if}-->">
                <input type="hidden" class="name" name="name_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="<!--{$item.name}-->" />
                <input type="hidden" class="id" name="id_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="<!--{$item.bloc_id}-->" />
                <input type="hidden" class="target-id" name="target_id_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="<!--{$item.target_id}-->" />
                <input type="hidden" class="top" name="top_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="<!--{$item.bloc_row}-->" />
                <!--{$item.name}-->
                <label class="anywherecheck">(<input type="checkbox" class="anywhere" name="anywhere_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="1" <!--{if $item.anywhere == 1}-->checked="checked"<!--{/if}--> />全ページ)</label>
                <a href="bloc.php?bloc_id=<!--{$item.bloc_id|h}-->&device_type_id=<!--{$device_type_id|h}-->" >編集</a>
            </div>
            <!--{assign var="firstflg" value=true}-->
        <!--{/if}-->
    <!--{/foreach}-->
</td>
<!-- ★☆★ Headタグ内テーブル ☆★☆ -->


/data/Smarty/templates/admin/design/index.tpl

似たような記述が13箇所ありますが、赤色のところを1個1個適用するとOKでした!

下記の様な場合、
親要素にclearfixのbefore、afterがあったらmac環境だとカラム落ちが発生しました…。
単純にfloatやinline-blockからflexへの移行の際に消し忘れたのですが、
はまってしまったのでメモ!


赤色の所がいらない。

<!DOCTYPE html>
<head>
  <title>test</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      clear: both;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      list-style: none;
    }
    ul:before,
    ul:after {
      content: "";
      display: table;
    }
    ul:after {
      clear: both;
    }
    li {
      background-color: #f0f0f0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      width: 50%;
    }
    li span {
      display: block;
    }
    li:nth-child(1) span {
      background-color: red;
    }
    li:nth-child(2) span {
      background-color: blue;
    }
    li:nth-child(3) span {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li><span>DOCTYPE<br>DOCTYPE<br>DOCTYPE</span></li>
    <li><span>html</span></li>
    <li><span>PUBLIC<br>PUBLIC</span></li>
  </ul>
</body>
</html>

stackoverflow にも何件もスレッドがありましたが、
中々良さそうな答えに巡り合えずに断念しそうになりましたが、
下記のスレッドで解決出来ました!

http://stackoverflow.com/questions/29149904/display-flex-in-chrome-with-100-height-of-child-elements

子要素にも display: flex; が必要とのこと。

<!DOCTYPE html>
<head>
  <title>test</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      list-style: none;
    }
    li {
      background-color: #f0f0f0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      width: 50%;
    }
    li span {
      display: block;
    }
    li:nth-child(1) span {
      background-color: red;
    }
    li:nth-child(2) span {
      background-color: blue;
    }
    li:nth-child(3) span {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li><span>DOCTYPE<br>DOCTYPE<br>DOCTYPE</span></li>
    <li><span>html</span></li>
    <li><span>PUBLIC<br>PUBLIC</span></li>
  </ul>
</body>
</html>

※バージョン 1 ですm(_ _)m

簡単なオプション指定で、
カルーセルにもスライダーにもなれる
高機能で使いやすい Owl Carousel ですが、
Owl を指定した子要素のすべてに発火するようになっているので、
少し変えてみました。

noscript に反応してほしくなかっただけですが、
普段使う要素だけに絞った方が良い気がしたので、
下記の様に変更しました。

$elem.children()

↓↓↓↓↓

$elem.children('a, p, li, img, div')

エディタの置き換えで一発OKでした。


ミニファイに変換は恐らく下記のGoogleお手製を使用されてるみたいで、
(変換後のコードが似ていたので多分そうかなと…)
こちらもsimpleモードなら大丈夫でした。ライセンスコメントをお忘れなく!

http://closure-compiler.appspot.com/home

バージョン 2.13.4

Smartyではなく、
PHPファイル側でごにょごにょしたかったのでやってみました。

class LC_Page_Ex に書いていきます。

各ページのタイトルは 各々のファイルの public function init にて定義されているので、
まず親の parent::init(); を呼んできて、上の関数を読み込みます。
読み込んだ中の $this->tpl_title; をとっ捕まえて、現在のClass内に return してあげます。

class LC_Page_Ex extends LC_Page
{
    /**
     * Page を初期化する.
     *
     * @return void
     */
    public function init($mode = false)
    {
        parent::init();

        switch ( $mode ) :
          case 'title' :
            $ec_var = $this->tpl_title;
            break;
          default :
            $ec_var = '';
            break;
        endswitch;

        return $ec_var;
    }
}

$ec_get = new LC_Page_Ex;
$ec_get_title = $ec_get->init('title');

これで、 echo $ec_get_title とするとPHPファイル側でタイトルの取得や出力が可能になりました。

解説もなしにメモ。
随時更新予定…。(2016/06/15 更新)

SEO系は今のところ、自分で書いて頑張っているので入れていません。
コメント系は使用しない想定になっています。

まずは Multi Plugin Installer を使って、下記の一覧をまとめて、
インストールと有効化をする。

■ブログ機能のみのサイト
Admin Post Navigation
Category Order and Taxonomy Terms Order
Edit Author Slug
EWWW Image Optimizer
Force Regenerate Thumbnails
Google XML Sitemaps
Post Thumbnail Editor
Post Types Order
Simple Local Avatars
TinyMCE Advanced
TypePad 絵文字 for TinyMCE
WP Multibyte Patch
Duplicate Post

■ブログ+実績とかあるサイト
Admin Columns
Admin Post Navigation
Advanced Custom Fields
Category Order and Taxonomy Terms Order
Custom Post Type Permalinks
Edit Author Slug
EWWW Image Optimizer
Force Regenerate Thumbnails
Google XML Sitemaps
Post Thumbnail Editor
Post Types Order
Simple Local Avatars
TinyMCE Advanced
TypePad 絵文字 for TinyMCE
WP Multibyte Patch
Duplicate Post
Enhanced Media Library


各種設定が終わったら、
通常運用では不要な為、下記を停止&削除する
Multi Plugin Installer
Edit Author Slug




候補
Raw HTML

このページのトップヘ