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

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

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

下記の様な場合、
親要素に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

コピペですが、自分用に投稿

※番号だけではなくデータそのものが初期化されるので、
 運用中には絶対に実行しないでくださいm(_ _)m



バージョン 2.13.4、2.13.5 で確認しています。


商品を初期化

TRUNCATE TABLE dtb_products;
TRUNCATE TABLE dtb_products_class;
TRUNCATE TABLE dtb_product_categories;
TRUNCATE TABLE dtb_product_status;

UPDATE dtb_products_product_id_seq SET sequence=0;
ALTER TABLE dtb_products_product_id_seq AUTO_INCREMENT=1;
UPDATE dtb_products_class_product_class_id_seq SET sequence=0;
ALTER TABLE dtb_products_class_product_class_id_seq AUTO_INCREMENT=1;

http://www.4web8.com/9807.html より


カテゴリーを初期化

TRUNCATE TABLE dtb_category;
TRUNCATE TABLE dtb_category_count;
TRUNCATE TABLE dtb_category_total_count;

UPDATE dtb_category_category_id_seq SET sequence=0;
ALTER TABLE dtb_category_category_id_seq AUTO_INCREMENT=1;
UPDATE dtb_classcategory_classcategory_id_seq SET sequence=0;
ALTER TABLE dtb_classcategory_classcategory_id_seq AUTO_INCREMENT=1;

カテゴリーは見当たらなかったので、
見よう見まねで書きました。


規格を初期化

TRUNCATE TABLE dtb_class;
TRUNCATE TABLE dtb_classcategory;
TRUNCATE TABLE dtb_products_class;

UPDATE dtb_classcategory_classcategory_id_seq SET sequence=0;
ALTER TABLE dtb_classcategory_classcategory_id_seq AUTO_INCREMENT=1;
UPDATE dtb_class_class_id_seq SET sequence=0;
ALTER TABLE dtb_class_class_id_seq AUTO_INCREMENT=1;
UPDATE dtb_products_class_product_class_id_seq SET sequence=0;
ALTER TABLE dtb_products_class_product_class_id_seq AUTO_INCREMENT=1;

INSERT INTO `データベース名`.`dtb_classcategory` (`classcategory_id`, `name`, `class_id`, `rank`, `creator_id`, `create_date`, `update_date`, `del_flg`) VALUES ('0', NULL, '0', '0', '0', CURRENT_TIMESTAMP, '0000-00-00 00:00:00', '0');

一部分が商品とかぶります。
商品とカテゴリーと違うところは、ダミーデータを別途挿入しないと、
すべての商品が売り切れの判断(在庫が見つからない)をされてしまい、
購入ができなくなってしまいます(汗)
データベース名は、環境に合わせて変える必要があります。



※番号だけではなくデータそのものが初期化されるので、
 運用中には絶対に実行しないでくださいm(_ _)m

バージョンは、2.12.2で見ています。
2.11、2.13も多分同じだと思います。
(追記:2.13.4 でもそのままでいけました。)

追従とマウスホバーをひとつずつご紹介。




テーブルヘッダーを追従させる。

管理画面でよくみるテーブルのヘッダーを、
追従させてみました。






管理画面のテンプレート /data/Smarty/templates/admin/main_frame.tpl の admin_file_manager.css というCSSの下に下記スタイルを追記

<style type="text/css">
#navi li ul {
z-index: 1;
} table.list.js_add_is_active { position: relative; } table.list.js_add_is_active .list_fixed { opacity: 0; position: fixed; top: 0; } table.list.js_add_is_active .list_fixed.js_add_is_active { opacity: 1; } </style>

同ファイルの file_manager.js というJSの下に下記スクリプトを追記

<script type="text/javascript">
jQuery(function($) {

/* ---------------------------------------
 スクロール追従
--------------------------------------- */
var $list = $('table.list');
$(window).bind('load.list', function() {
    $list.addClass('js_add_is_active').each(function() {
        // scroll 内でも自身を使いたいので便利に格納
        var $this = $(this);

        // ターゲットを設定
        var $list_head       = $this.find('tr:first');
        var $list_head_label = $list_head.children('th');

        // 横幅計算
        $list_head_label.each(function() {
            var width = $(this).width();
            $(this).css({
                'width': width,
            });
        });

        // 位置取得
        var offset = $list_head.offset();
        var left   = offset.left;

        // 複製
        var $list_head_html = $list_head.html();
        $this.append('<tr class="list_fixed">' + $list_head_html + '</tr>');

        // 複製した fixed 取得
        var $fixed = $this.find('tr.list_fixed');

        // fixed に位置情報を付与
        var fixed_left = left - 1; // -1 は border分
        $fixed.css({
            'left': fixed_left + 'px',
        });

        // スクロール追従
        $(window).bind('scroll.list', function() {
            var thisTop = $this.offset().top;
            var scrollTop = $(window).scrollTop();
            if ( scrollTop > thisTop ) {
              $fixed.addClass('js_add_is_active');
            } else {
              $fixed.removeClass('js_add_is_active');
            }
        });
    });
});

});
</script>





テーブルの行にマウスホバーすると、現在の行をハイライトにする。

管理画面のテンプレート /data/Smarty/templates/admin/main_frame.tpl(さっきと一緒) の admin_file_manager.css というCSSの下(さっきと一緒)に下記スタイルを追記

<style type="text/css">
    table.list tr:not([class]):hover th,
    table.list tr:not([class]):hover td {
        background: rgba(0, 0, 0, .1) !important;
    }
</style>

バージョン 2.12.2

その表示不具合、
プラグインが原因かもしれません...。

私が追加修正したサイトでは、
販売期間設定というプラグインを無効にすると正常に表示されました

table-header-groupを使用しているところに、
opacityを0にしてふわっとさせたかったけど、
IEだと上手くtransitionしてくれずにdisplay none/blockの様に一瞬で表示非表示の状態になってしまったので、
table-header-groupを諦めたところ、きちんと変化してくれました。

また table-header-group の中に子要素を作ってそこで変化の指定をする方法でも
上手く行ったのでメモしておきます。

firefox の標準の機能で レスポンシブモード にした時に、
select のブラウザ標準のスタイルが変化してました。

具体的には ▼ が消えていました。
何もスタイルを当ててないのにどうしてなんだ…と、
随分と悩んでいしまったのでメモ。

このページのトップヘ