ã¬ã¹ãã³ã·ããµã¤ããæ§ç¯ããéãæå¤ã¨å¼ã£ãããã®ããã°ãã¼ãã«ããã
ãã¼ã¸ã®æ¨ªå¹ ï¼ãã£ã³ãã¹ï¼ãã£ã±ãã«è¡¨ç¤ºããããã¨ãå¤ãé¢ä¿ä¸ããã£ã³ãã¹å¹ ãä¸å®ã§ãªããªãã¬ã¹ãã³ã·ãWebãã¶ã¤ã³ã§ã¯ä¸çç¸ã§ã¯ããã¾ããã
æ £ããªãå ã¯èããã®ãé¢åã§ãã¹ããå°ç¨ã®ããã²ã¼ã·ã§ã³ãå¥éç¨æããããããã°ãã¼ãã«ãããã¾ããã¨é表示ã«ãã¦ãã¾ããã¨ãããã¨ããããæ¹ã®å°ãªããªãã®ã§ã¯ãªããã¨æãã¾ãã
ä»åã¯ãã¬ã¹ãã³ã·ãWebãã¶ã¤ã³ã§ä½¿ããã°ãã¼ãã«ããããã¾ã¨ãã¾ããã
ï¼ï¼ãCSSãTable-cellã§ï¼è¡è¡¨ç¤º
ãã°ãã¼ãã«ããã¯çµ¶å¯¾ã«ï¼ååºå®ããã以å¤ã¯èªããªããã¨ããæ¹åãã®æ¹æ³ã
ããã使ãã¨ééããªãï¼åã®ã°ãã¼ãã«ãããä½ãã¾ãã
åçã¯ç°¡åã§ãï¼åã ãã®tableãä½ãã¨ããã ãã®ãã¨ã§ãã
CSSã§tableã«ããããããã¼ã¯ã¢ããã¨ã¹ã¿ã¤ã«ã¯ãããªæãã«ãªãã¾ãã
<nav class="globNav-row"> <a>HOME</a> <a>ã¡ãã¥ã¼ï¼</a> <a>ã¡ãã¥ã¼ï¼</a> <a>ã¡ãã¥ã¼ï¼</a> </nav>
.globNav-row{ display: table; width: 100%; } .globNav-row > a{ display: table-cell; vertical-align: middle; text-align: center; }
ãã®æ¹æ³ã®æ大ã®ã¡ãªããã¯ãé«ãæãä¸è¦ãã¨ããã¨ããã§ãã
aã¿ã°ãtdã¿ã°ã¨åãæ¯ãèãããããããããã ãã®ã³ã¼ãã§é«ããæããã°ãã¼ãã«ãããä½ããã¨ãã§ãã¾ãã
ï¼è¡ã®é ç®ã»ï¼è¡ã®é ç®ãæ··å¨ããå ´åã§ãé«ããæåä½ç½®ãèªåã§èª¿æ´ãããã®ã§ãé常ã«ä¾¿å©ã§ãã
ä¸æ¹ãã¡ãªããã¯ããèéãå¹ããªããã¨ãã§ãã
tableã¿ã°ã¨åãæ¯ãèãã«ãªããããtableã§ã§ããªããã¨ã¯ãã¹ã¦NGã«ãªãã¾ãã
æ¹è¡ç¦æ¢å¦çãå ¥ãããããã¨ãããã¤ã¹å¹ ã«ãã£ã¦ã¯ã¬ã¤ã¢ã¦ãå´©ããèµ·ãããã¨ãããã¾ãã®ã§ã注æãã ããã
ããããã·ãã¥ã¨ã¼ã·ã§ã³ï¼ã¡ãã¥ã¼é ç®æ°ãï¼ã¤ä»¥ä¸ã®æ
ï¼ï¼ãJavascript+CSSãToggleã§ã¹ãã¼ããã©ã³å¯¾å¿
BootstrapãGumbyFrameworkãªã©ã®CSSãã¬ã¼ã ã¯ã¼ã¯ã§ããæ¡ç¨ããã¦ããæ¹æ³ã§ãã
CSSã¨JavaScriptã§ã¹ãã¼ããã©ã³å¹ ã§ã¯ãã°ã«ã¡ãã¥ã¼ã«å¤åãã¾ãã
ãã¼ã¯ã¢ããã¯ããã°ã«ãã¿ã³ãã¨ãã¡ãã¥ã¼é ç®ãã®ï¼è¦ç´ ã«åå²ããã¿ã¤ãã主æµã§ãã
<nav class="globNav-row"> <span class="globNav-toggle">MENU+</span> <ul class="globNav-inner"> <li><a>HOME</a></li> <li><a>ã¡ãã¥ã¼ï¼</a></li> <li><a>ã¡ãã¥ã¼ï¼</a></li> <li><a>ã¡ãã¥ã¼ï¼</a></li> </ul> </nav>
ã¿ãã¬ãã以ä¸ã§ã¯spanãé表示ã«ãã¹ãã¼ããã©ã³ã§ã¯ulãé表示ã«ãªãããã«CSSãè¨å®ããã¦ãã¾ãã
.globNav-toggle { display: none;} .globNav-inner{ overflow: hidden;} .globNav-inner > li { float: left;} @media only screen and (max-width: 480px){ .globNav-toggle { display: block;} .globNav-inner{ display: none} .globNav-inner > li { float: none;} } @media only screen and (min-width: 481px){ .globNav-inner{ display: block!important;} }
ãã¨ã¯Javascriptã§spanãã¯ãªãã¯ããéã«ulã®è¡¨ç¤ºãåãæ¿ããæ§æãè¨è¿°ããã ãã§ãã
<script> $(function(){ $(".globNav-toggle").on("click", function() { $(this).next().slideToggle(); }); }); </script>
ãã¡ãã®ã¡ãªããã¯ãé ç®æ°ãæ°ã«ããªãã¦ãè¯ããã¨ãããã¨ã«ããããªã¨æãã¾ãã
ç»é¢å¹ ãçãã¹ãã¼ããã©ã³ã§ã¯ãã°ã«ã¡ãã¥ã¼åãããããé ç®æ°ãå¤ãã¨ãè¦ãç®ãå¤åãããã¨ã¯ãã¾ãããã¾ããã
ããã¦ãã¡ãªããã¯ãã¹ã¿ã¤ã«ã®å¶ç´ãå¤ããã¨ãã§ãã
ã¹ãã¼ããã©ã³è¡¨ç¤ºã¨PC表示ãã©ã¡ããåãã½ã¼ã¹ã使ç¨ãã¦ããããããã¼ã¯ã¢ãããè¤éã«ãªããããªã¹ã¿ã¤ã«ãã¹ã¯ãªãããçµããã¨ã¯ãå§ãã§ãã¾ããã
ã©ããã¦ããªãããªãã¶ã¤ã³ãæ¡ç¨ãããå ´åã¯ããã®æ¬¡ã®æ¹æ³ãæ¡ç¨ãããã¨ããããããã¾ãã
ããããã·ãã¥ã¨ã¼ã·ã§ã³ï¼ã¡ãã¥ã¼é ç®æ°ãï¼ã¤ä»¥ä¸ã®æ
ï¼ï¼ãWordPress+Javascript+CSSããã¡ãã¥ã¼ãã§å°ç¨ã¿ã°ä½æ
ã¡ãã¥ã¼é ç®ã管çç»é¢ã§äºåã«ä½æããPHPã§ã¹ãã¼ããã©ã³ã»PCããããã«ã¿ã°ãåºåãããã¨ããããæ¹ã«ãªãã¾ãã
WordPressãªã©ã®CMSã使ç¨ãã¦ãã人éå®ã®å®è£ æ¹æ³ã§ããã
WordPressã§ã¯ãwp_is_mobile();ãã使ç¨ãããã¨ã§ã¹ãã¼ããã©ã³ã»PCã§ã®åºåã¿ã°ãåãæ¿ãããã¨ãã§ãã¾ãã
ã§ãã®ã§ã¹ãã¼ããã©ã³ã§ã®ã¿è¡¨ç¤ºãããå ´åã¯
<?php if ( wp_is_mobile() ) { ã¹ãã¼ããã©ã³ã§è¡¨ç¤ºãããã³ã³ãã³ã } ?>
å対ã«ã¹ãã¼ããã©ã³ä»¥å¤ã§è¡¨ç¤ºãããå ´åã¯
<?php if ( !wp_is_mobile() ) { ã¹ãã¼ããã©ã³ã以å¤ãã§è¡¨ç¤ºãããã³ã³ãã³ã } ?>
ã¨ãªãã¾ãã
è¨ç½®ä½ç½®ã¯ä¸ç·ã ãã©ããã¼ã¯ã¢ãããå¤ãããå ´åã¯
<?php if ( wp_is_mobile() ) { ã¹ãã¼ããã©ã³ã§è¡¨ç¤ºãããã³ã³ãã³ã } else { ã¹ãã¼ããã©ã³ã以å¤ãã§è¡¨ç¤ºãããã³ã³ãã³ã } ?>
ã§å¯¾å¿ã§ãã¾ãã
ã¡ãªããã¯ããã¶ã¤ã³ãèªç±èªå¨ãã¨ãããã¨ã§ãã
ããããã¿ã°èªä½ãå¥ç©ã«ãªãã¾ãã®ã§ãåºåæ¹æ³ãããããã°ã ãããã®ãã¨ã¯å®è£ å¯è½ã§ãã
ã¿ã°ã®åºãæ¹ã ããå¤ãã¦ããã®ã§ãã¡ãã¥ã¼é ç®ã¯ï¼ã»ï¼åæ§ä¸æ¬ç®¡çã§ããã®ãã¡ãªããã§ããã
ããããã®åé¢ããã³ã¼ãã£ã³ã°ç¥èãå¿ è¦ããPHPãçµãã®ãé¢åãã¨ãããã¡ãªãããããã¾ãã
WordPressãªã©ã®ãªã¼ãã³ã½ã¼ã¹ç³»CMSå ±éã®ãã¡ãªããã§ããããèªç±ã«ã§ããåå ¨é¨èªåã§è¨å®ããå¿ è¦ããããã¨ãããã¨ã§ããã
ããããã·ãã¥ã¨ã¼ã·ã§ã³ï¼ãããããã¨ããããæ
ä»æ§ããã£ãã確èªããæ£ããã使ããã ãã
ã¾ã¨ãã¾ãã
- ã¡ãã¥ã¼é ç®ãå°ãªãï¼ï¼å表示ã»ã»ã»table-cell
- ã¡ãã¥ã¼é ç®ãå¤ãï¼æ軽ã«å¯¾å¿ã»ã»ã»toggle
- ã¹ãã¼ããã©ã³ã»PCã§å¤§ããå¤ãããã»ã»ã»wpismobile
ããããã®ç¹æ§ããã£ããç解ããç¶æ³ã«åããã¦æ£ãã使ãåãããã¨ã大äºã§ãã
è¨äºä¸ãwp_is_mobile();ãããwpismobile();ãã¨è¡¨ç¤ºããã¦ããã¾ããã®ã§ä¿®æ£ãããã¾ããã
ãææãããã¨ããããã¾ãã