秋の油川の様子や足元の紅葉など散歩途中の風景
散歩途中に、秋の油川の様子や、林の中の背丈の低いウルシ類の紅葉などを撮ってみました。家の周囲の紅葉もだいぶすすんできましたが、油川の横に生えるカラマツなどは、まだ、青々としていやす。それでも、確実に冬が近づいてきているのを感じるのだ・・・。(^^;
松川村から夕暮れ時の風景を
地元のFacebok友達の家を訪ねさせて頂き、田園風景の中、コーヒーを飲みながら、話に花が咲きました。 松川村の中でも、今日、訪れた場所は、今まで入り込んだ事がなかった場所で、普段と違った角度から見る山など、ちょっと新鮮な風景でやんした。(^^)
WordPress備忘録 アコーディオンを使ってスマホ用の展開メニューを作る
アコーディオンを使って、スマホ用の展開メニューを作ってみたので、書き留めておきやす。
まず、展開用のアコーディオンですが、こちらのページのものを使わせて頂きやした。アコーディオンの動作については、こちらのページのDEMOをご覧ください。
テンプレートに入れるhtmlコード
<section class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <label for="ac-1">表示するアコーディオン名</label> <article class="ac-small"> <p>アコーディオンの中身</p> </article> </div> <div> <input id="ac-2" name="accordion-1" type="checkbox" checked /> <label for="ac-2">表示するアコーディオン名</label> <article class="ac-medium"> <p>アコーディオンの中身</p> </article> </div> <div><!--...--></div> </section>
上の例だと、アコーディオンが2つ書かれているわけですけど、2番目の固まりは、「type=”checkbox” checked」となっており、最初から、アコーディオンが展開してるパターンです。アコーディオンを増やす場合は、固まりをコピペして、上の”ac-1″、”ac-2″となっている部分を”ac-3″、”ac-4″と、数字を増やしていくだけです。もっとも、今回は、スマホ用の展開メニューを作るだけなので、使うアコーディオンは1つだけなんですけど・・・。
アコーディオンのCSS
全部、必要なわけでもないんですけど、今回、使わせてもらったアコーディオンの上記ページに書かれているCSSです。
/*幅やマージンの設定 */ .ac-container{ width: 400px; margin: 10px auto 30px auto; } /*クリックされるボタンとしてのラベルの装飾等の設定 */ .ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); } /*カーソルが乗った時のボタンの色の設定 */ .ac-container label:hover{ background: #fff; } /*クリック時にチェックボックスをオンにする設定とボタンの装飾など */ .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #c6e1ec; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } /*下向き矢印アイコンの挿入 */ .ac-container label:hover:after, .ac-container input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; background: transparent url(../images/arrow_down.png) no-repeat center center; } /*アコーディオン展開時の上向き矢印アイコンの挿入 */ .ac-container input:checked + label:hover:after{ background-image: url(../images/arrow_up.png); } /*チェックボックスの非表示設定 */ .ac-container input{ display: none; } /*アコーディオンの中身の展開設定 */ .ac-container article{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; height: 0px; position: relative; z-index: 10; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container input:checked ~ article{ transition: height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } /*アコーディオンの中身の装飾設定 */ .ac-container article p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } /*3つのアコーディオンの高さ設定 */ .ac-container input:checked ~ article.ac-small{ height: 140px; } .ac-container input:checked ~ article.ac-medium{ height: 180px; } .ac-container input:checked ~ article.ac-large{ height: 230px; }
と、まあ、かなり長いんですけど、これの必要な部分を書き換えたり、要らない部分を削ったり、逆に必要なものを足したりして、使うページにあったものに調整します。ちなみに、今、このサイトに入っているのは、以下のような感じです。(^^;
.ac-container{ width: 100%; margin:0 auto; } .ac-container label{ padding: 0px 40px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #fff; line-height: 33px; font-size: 16px; font-weight:bold; background: #06307b; border:solid 1px #06307b; } .ac-container label:hover{ background: #06307b; border:solid 1px #06307b; } .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #f40e55; border:solid 1px #f40e55; color: #fff; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); } .ac-container label:hover:after, .ac-container input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 23px; top: 7px; background: transparent url(https://yamura-yasuke.club/wp-content/uploads/2015/10/arrow_down.png) no-repeat center center; } .ac-container input:checked + label:hover:after{ background-image: url(https://yamura-yasuke.club/wp-content/uploads/2015/10/arrow_up.png); } .ac-container input{ display: none; } .ac-container article{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; height: 0px; position: relative; z-index: 100; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container input:checked ~ article{ transition: height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } .ac-container input:checked ~ article.ac-small{ height: auto; }
そして、実際に使用しているhtmlコードは以下のような感じです。(^^;
<div id="mbtmenu"> <section class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <label for="ac-1">MENU >></label> <article class="ac-small"> <?php wp_nav_menu( array( 'container_id' => 'mb-menu', 'theme_location' => 'mb-menu', 'depth' => 2 ) ); ?> </article> </div></section> </div>
最初のdivのid=”mbtmenu”のmbtmenuでは、展開された時に表示されるメニューの装飾をstyle.cssに書いてるんですが、それと同時に、position:fixedで、スマホの上部に固定しました。また、スマホ用のメニューなので、当然、PCでは表示させるわけにはいかないので、
@media screen and (min-width: 920px){#mbtmenu{display:none}}
とメディアクエリをかき込んでありやす。
ここで、上のhtmlコード内のアコーディオンの中身
<?php wp_nav_menu( array( 'container_id' => 'mb-menu', 'theme_location' => 'mb-menu', 'depth' => 2 ) ); ?>
についてですが、上の例ですと、mb-menuをfunctions.phpにメニュー登録する必要があります。
/*register_nav_menus*/ register_nav_menus( array( 'header-menu' => __( 'header-menu'), 'footer-menu' => __( 'footer-menu'), 'mb-menu' => __( 'mb-menu'), ) );
通常のテンプレートだと、ヘッダー用やフッター用のメニューが登録されていると思うので、その下にでも、適当な名前で登録してやればOKです。(^^)
functions.phpにメニュー登録が済むと、ダッシュボードの外観⇒メニューの下の「テーマの位置」に登録したメニュー名が表示されるようになるので、スマホ用メニューに作成したメニュー構造のところで、登録したメニュー名にチェックを入れてメニューを保存します。
あとは、上で作成したhtmlコードをheader.phpなどの表示させたい場所に貼り付けて終了です。
まあ、素人がやってる事なので、もしかしたら、あまりスマートなやり方ではないのかもしれませんが、とりあえず、こんなやり方でも、スマホ用の展開メニューが出来るということで・・・。(^^;
秋の常念岳を大王近辺と久保田公園近辺にて
今日は、風がとても強い一日でしたが、それでも、お山クッキリのいいお天気だったので、秋の常念岳を穂高の大王近辺と久保田公園近辺で何枚か撮ってみました。(^^)
ガマの穂と常念岳
柿の実と常念岳
常念に伸びる道と常念岳
松川橋と大出の吊橋から白くなった白馬三山を
今日は、雲一つない快晴で、お山もクッキリだったので、既に白くなった白馬のお山を松川橋と大出の吊橋の辺りから、通りすがりに撮ってみました。松川橋からの風景は、三段紅葉になってますね!!(^^)
松川橋から見る三段紅葉
大出の吊橋から
霊松寺の紅葉 光と水と紅葉のコラボ
ちょうど見頃を迎えた大町市の霊松寺の紅葉を撮ってきやした。(^^)
霊松寺の紅葉は間違いなく、極上でごぜーます。特に、光と水と紅葉のコラボは絶品で、毎年、僕は、真っ先に水に映る紅葉に飛びついてしまいます。今日、行った時は、日の光の角度が、ちょっと、今一つでしたが、それでも、雰囲気は分かって頂けると思います。個人的には、光と水と紅葉のコラボを撮るには、お昼ちょっと過ぎくらいがベストのような気がしやす・・・。(^^;
まずは、普通に霊松寺の紅葉を!
霊松寺、光と水と紅葉のコラボ!!
長福寺のイチョウとカエデの紅葉 池田町
長福寺の紅葉も見頃でごぜーます。(^^)
イチョウの黄色とカエデの赤のコラボが見事です。ここは紅葉と一緒にアルプスが入るのも見事だと思います。僕はスマホなんで、うまい事、撮れませんけど、ちゃんとしたカメラだったら、イチョウの黄葉とカエデの紅葉の間から、ズームで山を撮るなんてのは、けっこう、いい絵になるんじゃないかな~と思ったりしやす。(^^;