CSS フッターの下に隙間ができたときの対処

ページの中身が少なくフッターが浮いた状態になってみっともないことがある。
そんなときの解決方法。

FOOTERをWRAPPER の中に入れているときにはFOOTERの上にダミーのボックスを置き、それにFOOTERの高さと同じだけ「padding-bottom」するのが味噌。セレクターは「contents」とした。
それとWRAPPERは「position」を「relative」 に、FOOTERは「position」を「absolute」にしておく。
あとは普通にHTML、BODYとWRAPPERを「width: 100%」しれば完成。

参考にさせてもらったサイトはこちら
https://liginc.co.jp/designer/archives/6435

-----------------------------------

html,body{
     height:100%;
}
#wrapper{
     width: 100%;
     position: relative;
     height:auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
}
#contents{
     padding-bottom:140px; /*フッターの高さと同じ*/
}
#footer{
    height:140px;
     position:absolute;
     bottom:0;
}



しかし、FOOTERが400pxとか500pxとかデカい場合、この方法ではCONTENTの「padding」の分、空白部分が400pxとか500pxとかデカくなるのでみっともない。その場合は「background」か何かでごまかすしかなくなる。

div のhoverに「before」適用

HOVERにもコロンを二つ「::」つけることで疑似セレクターが適用できる

.contents-element a:hover::before{
content: "- > ";
}

投稿一覧にアイキャッチ

WordPressを使い始めたころからお世話になっている

「管理画面の投稿一覧にアイキャッチを表示する」スクリプト。


今回も使わせていただきました。


「野良プラグイン化」したものはダウンロードできなかったのですが、


functions.php　に記述する方で実装しました。


なぜデフォルトで実装されていないのかと不思議に思うほど実用的な機能です。


「 林家次男」さんのブログ
http://hayashikejinan.com/wordpress/tips/964/

is_home()が効かない

パーツのテンプレートを使ってページの下部、フッターの上にカテゴリバナー群を設置。
その中に上層の一覧ページへのリンクを貼る。

リンクのCSSをトップページとその他に振り分けるのに「is_home()」を使おうと思ったがトップページもすり抜けてしまう。

「is_front-page()」にしたり、「表示設定」で固定ページにしたりとやってみたが駄目。

たどり着いたのがこちら

http://kawatama.net/web/wordpress/1907

で、処理をリセットしていないせいだったようだ。


<?php wp_reset_query(); if(is_home()): ?>

トップページで表示したい内容

<?php else: ?>

トップページ以外で表示したい内容

<?php endif; ?>

これで解決。

楽天RMS スマホ商品ページにINPUT タグを設置する裏ワザ

楽天RMS、スマホの商品ページにINPUTタグを設置するにはタグの最後に全角スペースを13個挿入する

<input type="submit"　　　　　　　　　　　　　>

こんな感じ。

iFRAME版の裏ワザはいくつか記事があるが、INPUTのはどこにも見つからなかったので掲載する

Welcart 購入しても商品がカートに残る

購入手続きを完了しても商品が残ったままになっている。

Wel Cartのシステム要件は

・WordPress WordPress4.0
・PHP PHP5.4、5.5、5.6
・データベース MySQL5.5以上

https://www.welcart.com/wc-condition/

ロリポップサーバーのPHPバージョンが5.1だったので5.6に。

だが、MySQLはハードルが高そうだったので、アップしてあるファイル全てをバックアップしている間に


WCの公式ページに出ていた記事のようにテンプレートphpファイルを書き換えたところ

解決した。

「header.php」には

この位置

<?php wp_head(); ?>

</head>

「footer.php」には

この位置

<?php wp_footer(); ?>

</body>

で、テンプレートタグを記述する。

http://support.welcart.com/topic/178/

敷居の高い「MySQL」のバージョンアップはしなくて済んだ。

ポップアップで画像拡大

WPやっててアイキャッチ画像の拡大は大きなテーマでしたが、ほかの機能とぶつかったり動作がいまいちだったり、ありそうでなかなかいいのが見つかりませんでした。

今回、設置も超簡単で動きもスムーズ。（今のところですが）他の機能とぶつからない秀逸なjQueryを見つけたので記録しておきます。

名前は「Lity」。

HTMLのヘッダーに

<link rel="stylesheet" href="lity.min.css">

<script src="lity.min.js"></script>

それとjQuery本体を読み込み

リンクタグに

<a href="画像URL" data-lity="data-lity"><img src="画像URL"></a>

として「data-lity="data-lity"」を記述するだけ。

今回、ほかの機能として「bxslider」や「waypoints」等を設置するためjQueryは

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

としました。

問題なく動作してます。

デモ

「Lity」の設置はこちらを参考にさせて頂きました。

http://on-ze.com/archives/2556

「Lity」公式サイトは→こちら

ついでに、固定表示しているヘッダーナビと買い物カゴボックスが上に出てしまったのでz-indexを増やしたのですが、今まで”999999”くらいが上限と思っていたのが実は

-2147483647から2147483647

とのことでした。

こちらを見させていただきました。

https://app.codegrid.net/entry/z-index-1

アイキャッチ画像拡大機能追加で

・トップページのスライダー「bxslider」

・スクロールでふわっと出てくる「Waypoints」

・カートシステムの「Welcart」（カートない表示ボックスも固定表示）

・ヘッダーのグローバルナビと”ページのトップ”がスクロールで移動するちょっとしたパララックス

・Perlで組んだリクルート募集システム

それと今回の

・アイキャッチ画像拡大

の６つの機能がそろいました。

あと、できれば予約システムも、と思っていますが、こちらはウェブで完結させるにはかなり高度な技が必要そうなので検討中です。

しかし、すべて無料でここまでできるとは。。