2016年10月22日土曜日

階層化メニューのコード ～Blogger テンプレートを作るよ！ (22)～

こんばんはー！

数日ブログを書けませんでしたが、再開します！

といっても、今回は前回作成したメニューをちょっと改良したものを備忘録として載せておくだけです。

一応このブログにも反映させましたが、まだページがないのでメニューは 「ホーム」 だけだったりします。




階層化メニューのコード

<b:skin> 内の最後の </Group> の後に追加

<Group description="Navigations" selector=".navigation-outer">
<Variable name="navigation.background.color" description="Background Color" type="color" default="#66bbdd" value="#f3f3f3"/>
<Variable name="navigation.title.color" description="Title Color" type="color" default="#ffffff" value="#000000"/>
<Variable name="navigation.title.font" description="Title Font" type="font" default="normal bold 32px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 42px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="navigation.item.color" description="Item Color" type="color" default="#ffffff" value="#53a624"/>
<Variable name="navigation.item.selected.color" description="Item Selected Color" type="color" default="#ffffff" value="#53a624"/>
<Variable name="navigation.item.hover.color" description="Item Hover Color" type="color" default="#ffffff" value="#6fa8dc"/>
<Variable name="navigation.item.font" description="Item Font" type="font" default="normal bold 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="navigation.level0.border.color" description="Level0 Border Color" type="color" default="#c0c0c0" value="rgba(0, 0, 0, 0)"/>
<Variable name="navigation.level1.border.color" description="Level1 Border Color" type="color" default="#c0c0c0" value="#6aa84f"/>
<Variable name="navigation.level2.border.color" description="Level2 Border Color" type="color" default="#c0c0c0" value="#93c47d"/>
<Variable name="navigation.level3.border.color" description="Level3 Border Color" type="color" default="#c0c0c0" value="#b6d7a8"/>
</Group>

<b:skin> 内の最後に追加

/* Side Navigation
----------------------------------------------- */
body.pc .content {
padding-left: 240px;
}
.navigation-outer {
position: absolute;
width: 240px;
margin-left: -240px;
height: 100%;
background: $(navigation.background.color);
padding: 24px 0 24px 0;
box-sizing: border-box;
}
body:not(#layout) .navigation.unprocessed {
display: none;
}
.navigation .widget.parent .widget-item-control {
margin-top: 0;
margin-bottom: -20px;
}
.navigation .widget.empty {
display:none;
}
.navigation .widget:not(.empty):first-child h2 {
text-align: center;
color: $(navigation.title.color);
font: $(navigation.title.font);
border: 0;
margin: 0;
background: none;
}
.navigation .PageList ul {
list-style: none;
font: $(navigation.item.font);
margin: 0 0 0 0.4em;
padding: 0;
}
.navigation .PageList li {
font: $(navigation.item.font);
color: $(navigation.item.color);
margin: 1em 0 0 0;
padding: 0.2em 0.2em 0.2em 0.4em;
}
.navigation .PageList li a {
font: $(navigation.item.font);
color: $(navigation.item.color);
}
.navigation .PageList li a:hover {
font: $(navigation.item.font);
color: $(navigation.item.hover.color);
}
.navigation .PageList li.selected a {
font: $(navigation.item.font);
color: $(navigation.item.selected.color);
font-weight: bold;
}
.navigation .PageList li.selected a:hover {
font: $(navigation.item.font);
color: $(navigation.item.hover.color);
font-weight: bold;
text-decoration:underline;
}
.navigation .PageList *:not(ul)>ul {
border-left: 0.2em solid $(navigation.level0.border.color);
margin-left: 0;
}
.navigation .PageList *:not(ul)>ul>ul {
border-left: 0.2em solid $(navigation.level1.border.color);
}
.navigation .PageList *:not(ul)>ul>ul>ul {
border-left: 0.2em solid $(navigation.level2.border.color);
}
.navigation .PageList *:not(ul)>ul>ul>ul>ul {
border-left: 0.2em solid $(navigation.level3.border.color);
}
.navigation .PageList *:not(ul)>ul>li {
margin-top: 1em;
}
.navigation .PageList *:not(ul)>ul>ul>li {
margin-top: 0.7em;
}
.navigation .PageList *:not(ul)>ul>ul>ul>li {
margin-top: 0.5em;
}

<body> 要素を変更

<body expr:class='&quot;loading&quot; + (data:blog.isMobile ? data:blog.mobileClass : &quot; pc&quot;)'>

<div class="content"> 内の <div class="content-outer"> 前に追加

      <b:if cond='data:blog.isMobile'>
        <b:else/>
        <div class='navigation-outer'>
          <div class='navigation-cap-top cap-top'>
            <div class='cap-left'/>
            <div class='cap-right'/>
          </div>
          <div class='fauxborder-left navigation-fauxborder-left'>
            <div class='fauxborder-right navigation-fauxborder-right'/>
            <div class='navigation-inner'>
              <b:section class='navigation unprocessed' id='navigation'>
              </b:section>
              <script>
                //<![CDATA[
                (function(){
                  var navigationElem = document.getElementById("navigation");
                  var widgetElems = navigationElem.querySelectorAll(".PageList, .Label");
                  // create item list
                  var itemsInfo = {};
                  for (var i = 0; i < widgetElems.length; i++)
                  {
                    var widget = widgetElems[i];
                    var ulElem = widget.querySelector("ul");
                    var liElems = ulElem.querySelectorAll("li");
                    if (liElems == null) continue;
                    if (widget.className.search("PageList") != -1) {
                      ulElem.className += " page";
                    }
                    if (widget.className.search("Label") != -1) {
                      ulElem.className += " label";
                    }
                    for (var j = 0; j < liElems.length; j++)
                    {
                      var liElem = liElems[j];
                      var liName = liElem.textContent;
                      if (liName == null) continue;
                      liName = liName.trim();
                      if (itemsInfo[liName] == null) {
                        itemsInfo[liName] = [];
                      }
                      itemsInfo[liName].push({
                        "widget" : widget,
                        "ul" : ulElem,
                        "li" : liElem,
                        "next" : ((liElems.length > j + 1) ? liElems[j + 1] : null)
                      });
                    }
                  }
                  // insert
                  for (var i = 0; i < widgetElems.length; i++)
                  {
                    var widget = widgetElems[i];
                    var h2Elem = widget.querySelector("h2");
                    if (h2Elem == null) continue;
                    var widgetName = h2Elem.textContent;
                    if (widgetName == null) continue;
                    widgetName = widgetName.trim();
                    if (widgetName[0] != "@" || widgetName.length < 2) continue;
                    var targetName = widgetName.substring(1).trim();
                    var itemInfo = itemsInfo[targetName];
                    if (itemInfo == null) continue;
                    for (var j = 0; j < itemInfo.length; j++)
                    {
                      var ulElem = widget.querySelector("ul");
                      var parentInfo = itemInfo[j];
                      var parent = parentInfo["widget"];
                      if (parent == widget) continue;
                      var parentUl = parentInfo["ul"];
                      var widgetCtrl = widget.querySelector(".widget-item-control");
                      if (widgetCtrl != null) {
                        ulElem.insertBefore(widgetCtrl, ulElem.firstChild);
                      }
                      var parentCtrl = parent.querySelector(".widget-item-control");
                      if (parentCtrl != null) {
                        parentUl.insertBefore(parentCtrl, parentUl.firstChild);
                      }
                      parentUl.insertBefore(ulElem, parentInfo["next"]);
                      if (parent.className.search("parent") == -1) { 
                        parent.className = parent.className + " parent";
                      }
                      widget.className = widget.className + " empty";
                      break;
                    }
                  }
                  navigationElem.className = navigationElem.className.replace("unprocessed", "");
                }());
                //]]>
              </script>
            </div>
          </div>
          <div class='navigation-cap-bottom cap-bottom'>
            <div class='cap-left'/>
            <div class='cap-right'/>
          </div>
        </div>
      </b:if>

メモ


  • レイアウト設定画面の作業だけでメニューを階層表示できるようになります
  • 画面左端のサイドバーとして普通にガジェットを追加して使えます
  • 今回のメニューは、PC表示の時にのみ画面左端に表示されます
  • メニューのタイトルは、メニューの一番上に表示されるガジェットの名前になります
  • 階層化したいとき、子階層になるページリストには、ページリストの名前に 「@親となる項目名」 とすると自動的に親階層に組み込まれます
  • ガジェットの配置順序は無視しますが、組み込み先の候補が複数ある場合は最も先頭にあるものを優先しています
  • body:not(.mobile) の書き方はテンプレート設定画面では通用しなかったので、今後の作業を楽にするためにも 「.pc」 を使うことにしました
  • 色やフォントの設定はテンプレートデザイナーで変更することができます
  • 一応ラベルガジェットもこの機能によって階層化することができます
  • 今後も、思いつきで改良することもあると思います
投稿者 時刻:
ラベル: , , , ,

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )