前回はBootStrapのCSS上書きが何故必要なのか（勝手に私が思っていることですが・・・）、そしてメガMenu実装とスマホの重要性とスマホ用Menuは格好いい方が良いと言う事でした！！
なのですが、実はこれはscssで「_variables.scss」と言うBootStrapの根幹ファイルか「Customize and download」の「Grid system」でカラム数の変更や@grid-gutter-widthを変更すれば記述する事はありません。
ですが、24カラムだけ憶えておけばVersionUpしても載せかえが簡単かなと思っただけです。あしからずｗ。
今までのリニューアル紹介記事
WordPressカスタマイズ その2 | WordPressをBootStrap化する為の注意点2 〜コーディング編１〜
WordPressカスタマイズ その1 | WordPressをBootStrap化する為の注意点 〜初期設定編〜
目次
一覧表示やSidebarのブロックは全て丸っとクリック出来る！！ul-li-spanの処理方法
今回は何をしましょうかｗ。
そうそう、アーカイブやサイドバーの一覧表示の処理を紹介致しましょう。
当サイトは一覧表示の枠内は全ての場所でクリックが出来る様に処理しました。
端から端までどの部分でもです
HTML5時代のタグのくくり方はHTML4時代とはかなり変わってきている
この処理の仕方ですが、ただaタグで全部をくくるだけでは何か腑に落ちないかなと・・・。
SEO的には多分何ら問題無いとも思われます。
実際、某上野の有名Web会社のサイトのMainContentsはdivをaタグでくくっていました。
articleの中なのでそれ自体は問題無いかなとも思いましたので当サイトでも同じ様な記述にしています。
HTML5からHTML4時代の約束事がかなり減っています。
私もそこまで勉強出来ていないのですがブロック要素とインライン要素の兼ね合いがかなり自由になっています。
だからといって完璧なCodeを組んだとしてもSEOで上位に行くとは限りませんし、速度が速くなるとも言えません。
でも出来れば完璧なCodeを目指したいですね。
日々勉強です。
SideBarのくくりは「ul-li-span」が良いのかも！
SideBarにはMenuだとか過去の記事紹介とかバナーなど様々は要素が絡んできます。
その場合何でくくればいいの？ってのが疑問になってきますが、やはりリストでくくる方が理にかなっているかなと・・・。
と、私は思っています。
そこで色々と探した結果こういう形になりました。
htmlソースで言うとこんな感じ
こちらのCodeはphpからhtmlに変換された形です。
次にphpだとこうなります。
8,
);
$st_query = new WP_Query($args);
?>
have_posts() ): ?>
have_posts()) : $st_query->the_post(); ?>
-
; title=)
/images/no-img-small.jpg" alt="no image" title="no image" width="60" height="60" />
新しい記事はありません
サイズ等は弄っていますが基本Stinger5のCodeです。
長い間Stingerを使ってきたので本当に勉強になりました！
素晴らしいCodeです！
「ul-li-span」化するために少々弄らせて頂いております。
ここまでは新着記事の表示なので標準のショートコードだけで問題ありません。
ここからが本番です！
WordPress Popular Postsを使って人気の記事を期間ごとに紹介しよう！
Sidebarには
- NEW POST（新着記事）
- POPULAR POSTS DAILY（本日の人気記事）
- POPULAR POSTS MOUTHLY（月間人気記事）
- POPULAR POSTS ALL（全期間人気記事）
が表示されています。
1番上の「NEW POST」は先程のコードで良いのですが、人気記事はplug-inを使用してカウントしています。
plug-inは「WordPress Popular Posts」を使用しています。
当サイトはOpen当初からこのplug-inでカウントしていました。
その資産を使わない手はありませんね！
使わないにしても入れておくだけでカウントしてくれているので先々でBlogを成長させるアイデアにもなりますのでオススメします。
と言う事で組込なのですが今回はウェジットでの組込では無くショートコードを直接張り込もうと言う訳です！
参考サイト：これで自由自在！WordPress Popular Postsで人気記事を任意の箇所に表示する3つの方法（プラグイン使用）
これを元に記述を変更
POPULAR POSTS DAILY
'daily', /*集計期間の設定（daily,weekly,monthly）*/
'limit' => 8, /*表示数はmax5記事*/
'post_type' => 'post', /*投稿のみ指定（固定ページを除外）*/
'title_length' => '35', /*タイトル文字数上限*/
'stats_comments' => '0', /*コメント数は非表示*/
'stats_views' => '1', /*閲覧数を表示させる*/
'thumbnail_width' => '50', /*画像のwidth（px）*/
'thumbnail_height' => '50', /*画像のheight（px）*/
'post_html' => '- {thumb}{title}{stats}
', /*表示されるhtmlの設定（サムネイル、記事タイトル、の順で表示）*/
); ?>
ここで注目なのがaタグの部分です。
「li」タグに次いで「a」をそのままくくり、「span」を記述しました。
これだとくくってないじゃん！！と言われそうですが後述するCSSで解決するのでお待ち下さい。
「span」は「float:left」で横並びにし、今回は崩れが無いので「ul」の後で「clearfix」を投入しました。
「:after」で「clearfix」すれば良いのですが、視覚化するためにもこの様な簡単な処理にしています。
期間の変更は「range」の指定記述を「daily」「weekly」「monthly」と変更すれば良いです。
全期間の指定は「all」にすれば今までの集計を表示してくれます。
次に「li」領域を全部クリック出来る様にしよう！CSSだけで出来る全領域クリック！
次にこのaタグを次のcssで指定すれば「li」タグ領域全体がクリック出来る様になります。
この記述例はこちらから引用させて頂きました。
・・・・と、記録していたのですがどこに行ったのかｗ。
次回までに探しておきます。ググってもなかなか出なかった・・・。
#kanren li, ul.favorited_box li {
position: relative;
margin: 1px 0;
background-color: #fcfcfc;
transition: all 0.4s;
padding: 10px;
display: block;
width: 100%;
}
a.article_linker {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
こちらの記述から「li」タグにpostion:relativeをかけ、「a」タグでabsoluteと縦横を100%・z-indexで追い打ちであります。
確かこれだけでいけたはずです。
ダメだったら突っ込んで下さい。調べ直しますｗ
「li」には「:hover」することで色が変化するようにしています。
#kanren li:hover, ul.favorited_box li:hover {
background-color: #d6ccd3;
transition: all 0.4s;
}
ここで気をつけなければいけないのは「transition」です。
「:hover」だけに指定するとhoverしたときにだけ変化します。
マウスを領域外に持っていくと瞬間的に色が戻ると言う事です。
その場合必ず元の部分にも「transition: all 0.4s;」と変化させたcssを記述しておくことです。
そうするとこうなります。
（スマホではデータが重いのでお気を付け下さい）
実演動画
ふわふわと色が変化しているのがわかるでしょうか？
両方に「transition」を指定することで「変化 → 戻る」で指定したCSSが行ったり来たりする訳です。
これは今後ギミックを重要視するのであれば必須の処理です。
GIF動画アプリ：Cinemagraph Pro
このCinemagraph Proを使うとPhotoshopでGIF変換したものより1/4に容量を抑えてくれました。
もともとはシネマグラフを作成するためのソフトですが、かなり綺麗な状態で容量を抑えてくれます。
こちらのアプリ紹介は別の講釈で・・・。
後書き
如何でしたでしょうか？
色々と順番に説明していきたいのですが、なかなかどうして、難しいモノです。
なのおで必要かなと思える部分と思い出した順番に紹介していきたいと思っています。
ただBootStrapの説明が少々少ないかなと思っているので次回はPC表示とスマホ表示の場合のBootStrapの記述例を紹介したいと思います。
お後が宜しいようで・・・。