<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>カスタマイズ | Iの喜劇</title>
	<atom:link href="https://inokigeki.com/tag/customize/feed" rel="self" type="application/rss+xml" />
	<link>https://inokigeki.com</link>
	<description>芋娘の日記</description>
	<lastBuildDate>Thu, 26 Feb 2026 14:41:00 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://inokigeki.com/wp-content/uploads/cropped-favicon-3-32x32.png</url>
	<title>カスタマイズ | Iの喜劇</title>
	<link>https://inokigeki.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/>
<atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/>
<atom:link rel="hub" href="https://websubhub.com/hub"/>
<atom:link rel="self" href="https://inokigeki.com/tag/customize/feed"/>
<site xmlns="com-wordpress:feed-additions:1">147513011</site>	<item>
		<title>【Cocoon】アーカイブウィジェットを年別にまとめてコンパクト表示【カスタマイズ】</title>
		<link>https://inokigeki.com/cocoon-customize-archive</link>
					<comments>https://inokigeki.com/cocoon-customize-archive#comments</comments>
		
		<dc:creator><![CDATA[I]]></dc:creator>
		<pubDate>Mon, 25 Nov 2019 21:35:45 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Cocoon]]></category>
		<category><![CDATA[カスタマイズ]]></category>
		<guid isPermaLink="false">https://inokigeki.com/?p=1084</guid>

					<description><![CDATA[WordPressの標準機能であるアーカイブウィジェットをカスタマイズしました。 備忘録として残しておきます。 目次 変更前→変更後のデザインウィジェットの設定CSSのソースコードjQueryのソースコード修正版まとめ  [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPressの標準機能であるアーカイブウィジェットをカスタマイズしました。</p>



<p>備忘録として残しておきます。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">変更前→変更後のデザイン</a></li><li><a href="#toc2" tabindex="0">ウィジェットの設定</a></li><li><a href="#toc3" tabindex="0">CSSのソースコード</a></li><li><a href="#toc4" tabindex="0">jQueryのソースコード</a></li><li><a href="#toc5" tabindex="0">修正版</a></li><li><a href="#toc6" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">変更前→変更後のデザイン</span></h2>



<p>アーカイブウィジェットは設定でドロップダウン表示とリスト表示が選べますが、そのままのデザインではしっくりきませんでした。</p>



<p>それぞれのカスタマイズ前のデザインです。</p>



<figure class="wp-block-image aligncenter size-large"><a href="https://inokigeki.com/wp-content/uploads/d0a8cc9de61945726dde093c5eb67679.png"><img fetchpriority="high" decoding="async" width="362" height="234" src="https://inokigeki.com/wp-content/uploads/d0a8cc9de61945726dde093c5eb67679.png" alt="" class="wp-image-1130"/></a><figcaption class="wp-element-caption">ドロップダウン表示</figcaption></figure>



<p>ドロップダウン表示はちょっと味気ないデザインだし、月を選択するのに2クリックしなければならないので操作性も悪いなと感じていました。</p>



<figure class="wp-block-image aligncenter size-large"><a href="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-04.59.43-fullpage.png"><img decoding="async" width="354" height="479" src="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-04.59.43-fullpage.png" alt="" class="wp-image-1119"/></a><figcaption class="wp-element-caption">リスト表示</figcaption></figure>



<p>一方のリスト表示。<br>これぐらいの長さならまだ問題ありませんが、これから長年サイトを運用していくとなると、もっと長さも伸び、見栄えや操作性も悪くなります。</p>



<p>なので今回は、</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box has-border-color has-key-color-border-color">
<ul class="wp-block-list">
<li>一覧性がある（分かりやすさ）</li>



<li>1クリックで飛べる（使いやすさ）</li>



<li>コンパクトな表示（見やすさ）</li>
</ul>
</div>



<p>この三点を目標にカスタマイズした結果、</p>



<figure class="wp-block-image aligncenter size-large is-style-default"><a href="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.08.12-fullpage.png"><img decoding="async" width="350" height="229" src="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.08.12-fullpage.png" alt="" class="wp-image-1120"/></a><figcaption class="wp-element-caption">完成形</figcaption></figure>



<p>こんな感じのデザインになりました。</p>



<p><span class="marker">直近の年は最初から表示、それ以外の年はスペース節約のため非表示</span>になっています。<br>各年をクリックすると表示・非表示を切り替えできます。</p>



<p>今回のカスタマイズはCocoonの作者、わいひらさんの記事を参考にさせてもらいました↓<br></p>




<a rel="noopener" target="_blank" href="https://nelog.jp/folding-archive-widget" title="折り畳み式アーカイブウィジェットを作成するWordPressカスタマイズ方法。プラグイン不要コピペのみ。" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://inokigeki.com/wp-content/uploads/cocoon-resources/blog-card-cache/7e8ccadfe9c8a59deed8b299d5b116cd.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">折り畳み式アーカイブウィジェットを作成するWordPressカスタマイズ方法。プラグイン不要コピペのみ。</div><div class="blogcard-snippet external-blogcard-snippet">今回は、Wordpressアーカイブウィジェットのリスト表示を、プラグインを必要とせず、コピペのみでスッキリと…</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://nelog.jp/folding-archive-widget" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">nelog.jp</div></div></div></div></a>



<h2 class="wp-block-heading"><span id="toc2">ウィジェットの設定</span></h2>



<p>まずはウィジェットの設定を確認します。</p>



<p>「外観」→「ウィジェット」で、アーカイブをクリックし「ドロップダウン表示」のチェックを外して保存。</p>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.09.22-fullpage.png"><img loading="lazy" decoding="async" width="1024" height="580" src="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.09.22-fullpage-1024x580.png" alt="" class="wp-image-1127" srcset="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.09.22-fullpage-1024x580.png 1024w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.09.22-fullpage-500x283.png 500w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.09.22-fullpage-768x435.png 768w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.09.22-fullpage-120x68.png 120w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.09.22-fullpage-160x90.png 160w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.09.22-fullpage-320x180.png 320w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.09.22-fullpage.png 1271w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>ここにチェックしたままだとドロップダウン表示になります。</p>



<h2 class="wp-block-heading"><span id="toc3">CSSのソースコード</span></h2>



<p>以下のコードを、「外観」→「テーマエディター」Cocoon Childのstyle.cssに貼り付けます。</p>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.04.49-fullpage.png"><img loading="lazy" decoding="async" width="1024" height="533" src="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.04.49-fullpage-1024x533.png" alt="" class="wp-image-1148" srcset="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.04.49-fullpage-1024x533.png 1024w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.04.49-fullpage-500x260.png 500w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.04.49-fullpage-768x400.png 768w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.04.49-fullpage.png 1271w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<div class="hcb_wrap code-css"><pre class="prism line-numbers lang-css" data-file="style.css" data-lang="CSS" data-line="6-11"><code>/*---折り畳みアーカイブウィジェット---*/
.widget_archive a.year{ /*各年*/
	cursor: pointer;
	border-bottom: 1px dotted #ccc; /*各年に下線を引く*/
}
.widget_archive a.year::after{ /*各年横のアイコン*/
	font-family: &quot;Font Awesome 5 Free&quot;;
	content: &#39;\f107&#39;; /* アイコンの指定 */
	position: relative; /* 相対配置 */
	left: 5px; /* アイコンの位置 */
	font-weight: bold;
}
.widget_archive .years ul { /*各月*/
	display: flex;
	flex-flow: row wrap;
	margin-left: 5px; /*インデント*/
	font-size: 1rem;
	text-decoration: underline; /*各月に下線を引く*/
}
.widget_archive ul.years li {
	padding: 0 1px; /*各月の間隔*/
}
#sidebar .widget_archive ul.years li :hover { /*マウスホバー時*/
	background: none;
	transition: 0.1s;
	color: #72c7e6;
}
.widget_archive ul.years .hide { /*各年をクリックすると開閉*/
	margin: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}</code></pre></div>



<p>6〜11行目のコードは「Font Awesome5」に設定している場合です。<br>「Font Awesome4」に設定している場合は対応するコードに変えてください。</p>



<p>Font Awesomeについては↓の記事が分かりやすかったです。</p>




<a rel="noopener" target="_blank" href="https://y-k-studio.com/it/cocoon-fontawesome4to5" title="【Cocoon】Font Awesome 4から5へ変更する前に注意すべきこと" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://inokigeki.com/wp-content/uploads/cocoon-resources/blog-card-cache/ea00416d26f27b418ac73f9f2311cd97.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">【Cocoon】Font Awesome 4から5へ変更する前に注意すべきこと</div><div class="blogcard-snippet external-blogcard-snippet">2019年11月14日に無料WordPressテーマ「Cocoon」のバージョンが2.0.0になり、多くのブロックエディター機能が強化されました。そして今回のアップデートでFont Awesome 5が漸く公式から使用できるように用意されま...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://y-k-studio.com/it/cocoon-fontawesome4to5" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">y-k-studio.com</div></div></div></div></a>



<h2 class="wp-block-heading"><span id="toc4">jQueryのソースコード</span></h2>



<p>次に、以下のjQueryコードをCocoon Childのjavascript.jsに貼り付けます。</p>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.07.27-fullpage.png"><img loading="lazy" decoding="async" width="1024" height="520" src="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.07.27-fullpage-1024x520.png" alt="" class="wp-image-1138" srcset="https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.07.27-fullpage-1024x520.png 1024w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.07.27-fullpage-500x254.png 500w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.07.27-fullpage-768x390.png 768w, https://inokigeki.com/wp-content/uploads/Screen-Shot-2019-11-25-at-05.07.27-fullpage.png 1271w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<div class="hcb_wrap code-css"><pre class="prism line-numbers lang-js" data-file="javascript.js" data-lang="JavaScript" data-line="89-90"><code>///////////////////////////////////
// 折り畳み式アーカイブウィジェット
/////////////////////////////////
(function($) {
  $(function() {
    var wgts = $(&quot;.widget_archive&quot;);//アーカイブウィジェット全てを取得
    //アーカイブウィジェットを1つずつ処理する
    wgts.each(function(i, el) {
      wgt = $(el);

      //日付表示＋投稿数か
      var has_date_count = wgt.text().match(/\d+年\d+月\s\(\d+\)/);
      //日付表示だけか
      var has_date_only = wgt.text().match(/\d+年\d+月/) && !has_date_count;

      //日付表示されているとき（ドロップダウン表示でない時）
      if ( has_date_count || has_date_only ) {
        var
          clone = wgt.clone(),//アーカイブウィジェットの複製を作成
          year = [];
        //クローンはウィジェットが後に挿入。クローンはcssで非表示
        wgt.after(clone);
        clone.attr(&quot;class&quot;, &quot;archive_clone&quot;).addClass(&#39;hide&#39;);

        var
          acv = wgt; //ウィジェット
          acvLi = acv.find(&quot;li&quot;); //ウィジェット内のli全て
        //ul.yearsをアーカイブウィジェット直下に追加してそのDOMを取得
        var acv_years =  acv.append(&#39;&lt;ul class=&quot;years&quot;&gt;&lt;/ul&gt;&#39;).find(&quot;ul.years&quot;);

        //liのテキストから年がどこからあるかを調べる
        acvLi.each(function(i) {
          var reg = /(\d+)年(\d+)月/;
          //日付表示＋投稿数か
          if ( has_date_count ) {
            reg = /(\d+)年(\d+)月\s\((\d+)\)/;
          }
          var dt = $(this).text().match(reg);
          year.push(dt[1]);

        });
        $.unique(year); //重複削除

        acvLi.unwrap(); //liの親のulを解除

        //投稿年があるだけ中にブロックを作る
        var
          yearCount = year.length,
          i = 0;
        while (i &lt; yearCount) {
          acv_years.append(&quot;&lt;li class=&#39;year_&quot; + year[i] + &quot;&#39;&gt;&lt;a class=&#39;year&#39;&gt;&quot; + year[i] + &quot;年&lt;/a&gt;&lt;ul class=&#39;month&#39;&gt;&lt;/ul&gt;&lt;/li&gt;&quot;);
          i++;
        }

        //作ったブロック内のulに内容を整形して移動
        //オリジナルのクローンは順番に削除
        var j = 0;
        acvLi.each(function(i, el) {
          var reg = /(\d+)年(\d+)月/;
          //日付表示＋投稿数か
          if ( has_date_count ) {
            reg = /(\d+)年(\d+)月\s\((\d+)\)/;
          }
          var
            dt = $(this).text().match(reg),
            href = $(this).find(&quot;a&quot;).attr(&quot;href&quot;);

          //月の追加
          var rTxt = &quot;&lt;li&gt;&lt;a href=&#39;&quot; + href + &quot;&#39;&gt;&quot; + &quot;&quot; + dt[2] + &quot;月&lt;/a&gt;&quot;;
          //日付表示＋投稿数か
          if ( has_date_count ) {
            rTxt += &quot; (&quot; + dt[3] + &quot;)&quot; + &quot;&lt;/li&gt;&quot;; //投稿数の追加
          }

          //作成した月のHTMLを追加、不要なものは削除
          if (year[j] === dt[1]) {
            acv_years.find(&quot;.year_&quot; + year[j] + &quot; ul&quot;).append(rTxt);
            $(this).remove();
          } else {
            j++;
            acv_years.find(&quot;.year_&quot; + year[j] + &quot; ul&quot;).append(rTxt);
            $(this).remove();
          }
        });

        //クローン要素を削除
        clone.remove();

        //直近の年以外は非表示
        acv.find(&quot;ul.years ul:not(:first)&quot;).addClass(&quot;hide&quot;);

        //年をクリックで展開
        acv.find(&quot;a.year&quot;).on(&quot;click&quot;, function() {
          $(this).next().toggleClass(&quot;hide&quot;);
        });
      }//if has_date_count || has_date_only
    });//wgts.each

  });

})(jQuery);</code></pre></div>



<p><span class="marker">直近の年以外は最初、非表示</span>になっています。<br>クリックすると表示されますが、最初から全年表示したいという方は89〜90行目のコードを削除してください。</p>



<p>直近の2年分を表示したい場合は、89〜90行目のコードを以下のコードに書き換えてください。</p>



<div class="hcb_wrap code-css"><pre class="prism line-numbers lang-js" data-file="javascript.js" data-lang="JavaScript" data-start="89"><code>        //直近2年（0番目と1番目のul.month）以外は非表示
        acv.find(&quot;ul.years &gt; li:gt(1) ul.month&quot;).addClass(&quot;hide&quot;);</code></pre></div>



<h2 class="wp-block-heading"><span id="toc5">修正版</span></h2>



<p>ここからはただの自己満のコードを載せておきます。</p>



<p>以下の点を修正しました。</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box has-border-color has-key-color-border-color">
<ol class="wp-block-list">
<li>月の表示を等間隔にして、1行に6ヶ月ずつ並べる(画面幅が狭いスマホでは3列表示にする)</li>



<li>月の表示の行間を狭める</li>



<li>ウィンドウを縮小した際、2桁月の表示が改行されてしまうので折り返し禁止にする</li>



<li>月の並び順を<span class="red">降順(12月→1月)</span>から、<span class="red">昇順(1月→12月)</span>に変更</li>
</ol>
</div>



<p>1〜3はCSS、4はJavaScriptの管轄です。</p>



<p>Geminiに上記のコードを投げたら、<span class="marker-under">「無駄な処理」や「非効率なDOM操作」がいくつか見受けられる</span>とのことで、ぱぱっと簡素化・最適化してくれました。</p>



<p>私には何が何だかさっぱり(笑)ですが、こういうプログラミング系にはめちゃくちゃ強いですねAIは。</p>



<p>最終的にこうなりました↓</p>



<figure class="wp-block-image aligncenter size-medium"><a href="https://inokigeki.com/wp-content/uploads/Screenshot-05-46-06.png"><img loading="lazy" decoding="async" width="500" height="220" src="https://inokigeki.com/wp-content/uploads/Screenshot-05-46-06-500x220.png" alt="" class="wp-image-1852" srcset="https://inokigeki.com/wp-content/uploads/Screenshot-05-46-06-500x220.png 500w, https://inokigeki.com/wp-content/uploads/Screenshot-05-46-06-768x338.png 768w, https://inokigeki.com/wp-content/uploads/Screenshot-05-46-06.png 876w" sizes="(max-width: 500px) 100vw, 500px" /></a><figcaption class="wp-element-caption">修正版</figcaption></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-file="style.css" data-lang="CSS" data-line="21-23,26-35,42-45"><code>
/*--- 折り畳みアーカイブウィジェット ---*/
/* 各年の親要素：クリックできることを示し、区切り線を入れる */
.widget_archive a.year {
    cursor: pointer;
    border-bottom: 1px dotted #ccc; /* 各年に下線を引く */
    display: block; /* クリック領域を広げる */
}
/* 各年横のアイコン */
.widget_archive a.year::after {
    font-family: &quot;Font Awesome 5 Free&quot;;
    content: &#39;\f107&#39;; /* 下向き矢印のアイコン */
    margin-left: 8px; /* アイコンの位置 */
    font-weight: bold;
}
/* 各月の横並び（フレックスボックス）の設定 */
.widget_archive .years ul {
    display: flex;
    flex-flow: row wrap; /* 折り返しを許可 */
    font-size: 1rem;
    line-height: 1.5; /* 行の高さを低くする */
    text-align: center; /* 中央寄せで等間隔感を出す */
    white-space: nowrap; /* 月名（12月など）が途中で改行されないように固定 */
    text-decoration: underline; /* 各月のリンクに下線を引く */
}
/* 1行に6ヶ月ずつ並べる（PCサイズ） */
.widget_archive ul.years li {
    flex: 0 0 calc(100% / 6); /* 6列 */
}
/* レスポンシブ対応：画面幅が狭いときは3列にする */
@media (max-width: 480px) {
  .widget_archive ul.years li {
    flex: 0 0 calc(100% / 3); /* 3列 */
  }
}
/* マウスホバー時のエフェクト */
#sidebar .widget_archive ul.years li :hover {
    background: none;
    transition: 0.1s;
    color: #72c7e6;
}
/* jQueryで .hide を toggle する場合、CSSは以下のようにシンプルでOK */
.widget_archive .hide {
  display: none;
}</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="javascript.js" data-lang="JavaScript" data-line="48-49,55-60"><code>/////////////////////////////////////
// 折り畳み式アーカイブウィジェット
/////////////////////////////////
(function($) {
  $(function() {
    $(&quot;.widget_archive&quot;).each(function() {
      var $wgt = $(this);
      var wgtText = $wgt.text();

      // 正規表現を一度だけ定義
      var regCount = /(\d+)年(\d+)月\s\((\d+)\)/;
      var regSimple = /(\d+)年(\d+)月/;
      
      var hasCount = wgtText.match(regCount);
      var hasDate = wgtText.match(regSimple);

      // ドロップダウン表示時はスキップ
      if (!hasDate) return;

      var $listItems = $wgt.find(&quot;li&quot;);
      var years = [];

      // 1. 年のリストを抽出
      $listItems.each(function() {
        var match = $(this).text().match(regSimple);
        if (match) years.push(match[1]);
      });
      years = $.unique(years);

      // 2. 新しい構造（ul.years）を作成
      var $acvYears = $(&#39;&lt;ul class=&quot;years&quot;&gt;&lt;/ul&gt;&#39;);
      $.each(years, function(i, y) {
        $acvYears.append(&#39;&lt;li class=&quot;year_&#39; + y + &#39;&quot;&gt;&lt;a class=&quot;year&quot;&gt;&#39; + y + &#39;年&lt;/a&gt;&lt;ul class=&quot;month&quot;&gt;&lt;/ul&gt;&lt;/li&gt;&#39;);
      });

      // 3. 既存のliを新しい構造に振り分け
      $listItems.each(function() {
        var $li = $(this);
        var match = $li.text().match(hasCount ? regCount : regSimple);
        if (!match) return;

        var y = match[1], m = match[2], count = match[3];
        var href = $li.find(&quot;a&quot;).attr(&quot;href&quot;);
        
        var linkText = m + &quot;月&quot; + (hasCount ? &quot; (&quot; + count + &quot;)&quot; : &quot;&quot;);
        var $newLi = $(&quot;&lt;li&gt;&quot;).append($(&quot;&lt;a&gt;&quot;).attr(&quot;href&quot;, href).text(linkText));

        // 該当する年のulに追加（prependで昇順、appendで降順）
        $acvYears.find(&quot;.year_&quot; + y + &quot; .month&quot;).prepend($newLi);
      });

      // 4. DOMを入れ替え
      $wgt.find(&quot;ul&quot;).first().replaceWith($acvYears);

      // 5. インタラクション設定
      $acvYears.find(&quot;ul.month:not(:first)&quot;).hide(); // 最初以外非表示
      $acvYears.on(&quot;click&quot;, &quot;a.year&quot;, function(e) {
        e.preventDefault();
        $(this).next(&quot;.month&quot;).slideToggle(200);
      });
    });
  });
})(jQuery);</code></pre></div>



<p>ハイライトしてあるところが大きく変わった部分です。</p>



<h2 class="wp-block-heading"><span id="toc6">まとめ</span></h2>



<p>今回のカスタマイズでこだわったのは二点。</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box has-border-color has-key-color-border-color">
<ul class="wp-block-list">
<li>各年の横に矢印アイコンを表示して開閉式であることを示した</li>



<li>各月にアンダーラインを引き、リンクだと分かりやすくした</li>
</ul>
</div>



<p>ユーザビリティ重視です。</p>



<p>コピペするだけで簡単に実装できるので、アーカイブが長くなって困っている方はぜひいかがでしょうか。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://inokigeki.com/cocoon-customize-archive/feed</wfw:commentRss>
			<slash:comments>7</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1084</post-id>	</item>
		<item>
		<title>Firefoxで多段タブ化【Macの場合】</title>
		<link>https://inokigeki.com/firefox-multitab-mac</link>
					<comments>https://inokigeki.com/firefox-multitab-mac#respond</comments>
		
		<dc:creator><![CDATA[I]]></dc:creator>
		<pubDate>Mon, 04 Oct 2021 17:12:03 +0000</pubDate>
				<category><![CDATA[パソコン]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[カスタマイズ]]></category>
		<guid isPermaLink="false">https://inokigeki.com/?p=1348</guid>

					<description><![CDATA[MacでFirefoxを多段タブ化したい！という方向けの解説記事です。 多段タブ化の導入方法については多くの方が詳しく解説してくれていますが、そのほとんどがWindows！Macでも大方の流れは一緒なのですが、やっぱりち [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>MacでFirefoxを多段タブ化したい！という方向けの解説記事です。</p>



<p>多段タブ化の導入方法については多くの方が詳しく解説してくれていますが、そのほとんどがWindows！<br>Macでも大方の流れは一緒なのですが、やっぱりちょっとやり方が違ってスムーズに行かない…。</p>



<p>ということで今回は、Mac派の方でもスムーズにFirefoxを多段タブ化できるよう、解説記事を作ってみました。</p>



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-border-color has-key-color-border-color"><div class="tab-caption-box-label block-box-label box-label fab-apple"><span class="tab-caption-box-label-text block-box-label-text box-label-text">動作環境</span></div><div class="tab-caption-box-content block-box-content box-content">
<ul class="wp-block-list">
<li>macOS：Big Sur 11.6（記事投稿時点）→<span class="red"><span class="bold-red">Ventura 13.5（記事更新時点）</span></span></li>



<li>ブラウザ：Firefox 92.0（記事投稿時点）→<span class="red"><span class="bold-red">Firefox 117.0（記事更新時点）</span></span></li>
</ul>
</div></div>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-4" checked><label class="toc-title" for="toc-checkbox-4">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">userChrome.js、config.js、config-prefs.jsをダウンロード</a></li><li><a href="#toc2" tabindex="0">多段タブ.zipをダウンロード</a><ol><li><a href="#toc3" tabindex="0">MultiRowTabLiteforFx.uc.js</a></li><li><a href="#toc4" tabindex="0">userChrome.css</a></li></ol></li><li><a href="#toc5" tabindex="0">「chrome」フォルダに格納</a></li><li><a href="#toc6" tabindex="0">「Resources」フォルダに格納</a></li><li><a href="#toc7" tabindex="0">Firefoxを再起動</a></li><li><a href="#toc8" tabindex="0">応用編</a><ol><li><a href="#toc9" tabindex="0">多段タブの段数を変更</a></li><li><a href="#toc10" tabindex="0">タブの横幅を固定</a></li></ol></li><li><a href="#toc11" tabindex="0">バージョンアップで不具合が発生したら</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">userChrome.js、config.js、config-prefs.jsをダウンロード</span></h2>



<p><a rel="noopener" target="_blank" href="https://github.com/alice0775/userChrome.js">alice0775さんのGitHubページ<span class="fa fa-external-link external-icon anchor-icon"></span></a>へアクセスし、現在のFirefoxのバージョンと一致するフォルダを開きます。<br>この記事の投稿時点ではFirefox 92.0なので「92」のフォルダです。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/Screenshot-2021-09-22-at-23-51-58-GitHub-alice0775-userChrome-js.png"><img loading="lazy" decoding="async" width="914" height="227" src="https://inokigeki.com/wp-content/uploads/Screenshot-2021-09-22-at-23-51-58-GitHub-alice0775-userChrome-js.png" alt="" class="wp-image-1599" srcset="https://inokigeki.com/wp-content/uploads/Screenshot-2021-09-22-at-23-51-58-GitHub-alice0775-userChrome-js.png 914w, https://inokigeki.com/wp-content/uploads/Screenshot-2021-09-22-at-23-51-58-GitHub-alice0775-userChrome-js-500x124.png 500w, https://inokigeki.com/wp-content/uploads/Screenshot-2021-09-22-at-23-51-58-GitHub-alice0775-userChrome-js-768x191.png 768w" sizes="(max-width: 914px) 100vw, 914px" /></a></figure>



<p>このフォルダの中には、</p>



<ul class="wp-block-list">
<li><span class="marker-under">userChrome.js</span></li>



<li><span class="marker-under">config.js</span></li>



<li><span class="marker-under">config-prefs.js</span></li>
</ul>



<p>の3つのファイルが格納されているので、それぞれダウンロードします。</p>



<p>それぞれ、</p>



<ul class="wp-block-list">
<li>92→<span class="marker-under">userChrome.js</span></li>



<li>92→install_folder→<span class="marker-under">config.js</span></li>



<li>92→install_folder→defaults/pref→<span class="marker-under">config-prefs.js</span></li>
</ul>



<p>の順に辿っていくとダウンロードできます。</p>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box alert-box">
<p>もし最新バージョンのフォルダ内に「install_folder」が無い場合は、最新バージョンに一番近い数字のフォルダの中から探してください。Firefox 100.0の場合は「92」のフォルダ内にありました。</p>
</div>



<p>以下は例として「<span class="marker-under">userChrome.js</span>」のダウンロードの方法です。</p>



<p>「<span class="marker-under">userChrome.js</span>」をクリック→右上の「Raw」を右クリック。</p>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/0b8b11c5a4f40f4135533f8a80aecacf.png"><img loading="lazy" decoding="async" width="1024" height="427" src="https://inokigeki.com/wp-content/uploads/0b8b11c5a4f40f4135533f8a80aecacf-1024x427.png" alt="" class="wp-image-1591" srcset="https://inokigeki.com/wp-content/uploads/0b8b11c5a4f40f4135533f8a80aecacf-1024x427.png 1024w, https://inokigeki.com/wp-content/uploads/0b8b11c5a4f40f4135533f8a80aecacf-500x209.png 500w, https://inokigeki.com/wp-content/uploads/0b8b11c5a4f40f4135533f8a80aecacf-768x321.png 768w, https://inokigeki.com/wp-content/uploads/0b8b11c5a4f40f4135533f8a80aecacf.png 1440w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/e96e2a1e4aee940fe99933cc21363266.png"><img loading="lazy" decoding="async" width="1024" height="476" src="https://inokigeki.com/wp-content/uploads/e96e2a1e4aee940fe99933cc21363266-1024x476.png" alt="" class="wp-image-1637" srcset="https://inokigeki.com/wp-content/uploads/e96e2a1e4aee940fe99933cc21363266-1024x476.png 1024w, https://inokigeki.com/wp-content/uploads/e96e2a1e4aee940fe99933cc21363266-500x232.png 500w, https://inokigeki.com/wp-content/uploads/e96e2a1e4aee940fe99933cc21363266-768x357.png 768w, https://inokigeki.com/wp-content/uploads/e96e2a1e4aee940fe99933cc21363266.png 1379w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>「別名でリンク先を保存」を押して、任意の場所に保存します。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/d2440e6d7cd4db5b593a877f36b5718c.png"><img loading="lazy" decoding="async" width="875" height="512" src="https://inokigeki.com/wp-content/uploads/d2440e6d7cd4db5b593a877f36b5718c.png" alt="" class="wp-image-1595" srcset="https://inokigeki.com/wp-content/uploads/d2440e6d7cd4db5b593a877f36b5718c.png 875w, https://inokigeki.com/wp-content/uploads/d2440e6d7cd4db5b593a877f36b5718c-500x293.png 500w, https://inokigeki.com/wp-content/uploads/d2440e6d7cd4db5b593a877f36b5718c-768x449.png 768w" sizes="(max-width: 875px) 100vw, 875px" /></a></figure>



<p>同じ手順で「<span class="marker-under">config.js</span>」、「<span class="marker-under">config-prefs.js</span>」もダウンロードします。</p>



<h2 class="wp-block-heading"><span id="toc2">多段タブ.zipをダウンロード</span></h2>



<p><a rel="noopener" target="_blank" href="https://u6.getuploader.com/script/search?q=%E5%A4%9A%E6%AE%B5%E3%82%BF%E3%83%96.zip">firefox用スクリプトアップローダー<span class="fa fa-external-link external-icon anchor-icon"></span></a>から、一番上にある「多段タブ.zip」をダウンロードします。</p>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/2f833a184de0ba41850d589943278c36.png"><img loading="lazy" decoding="async" width="1024" height="568" src="https://inokigeki.com/wp-content/uploads/2f833a184de0ba41850d589943278c36-1024x568.png" alt="" class="wp-image-1582" srcset="https://inokigeki.com/wp-content/uploads/2f833a184de0ba41850d589943278c36-1024x568.png 1024w, https://inokigeki.com/wp-content/uploads/2f833a184de0ba41850d589943278c36-500x277.png 500w, https://inokigeki.com/wp-content/uploads/2f833a184de0ba41850d589943278c36-768x426.png 768w, https://inokigeki.com/wp-content/uploads/2f833a184de0ba41850d589943278c36-120x68.png 120w, https://inokigeki.com/wp-content/uploads/2f833a184de0ba41850d589943278c36-160x90.png 160w, https://inokigeki.com/wp-content/uploads/2f833a184de0ba41850d589943278c36.png 1425w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/c28705d1cd8d38bb7c96f0f9086f00a0.jpg"><img loading="lazy" decoding="async" width="1024" height="1242" src="https://inokigeki.com/wp-content/uploads/c28705d1cd8d38bb7c96f0f9086f00a0-1024x1242.jpg" alt="" class="wp-image-1583" srcset="https://inokigeki.com/wp-content/uploads/c28705d1cd8d38bb7c96f0f9086f00a0-1024x1242.jpg 1024w, https://inokigeki.com/wp-content/uploads/c28705d1cd8d38bb7c96f0f9086f00a0-412x500.jpg 412w, https://inokigeki.com/wp-content/uploads/c28705d1cd8d38bb7c96f0f9086f00a0-768x932.jpg 768w, https://inokigeki.com/wp-content/uploads/c28705d1cd8d38bb7c96f0f9086f00a0.jpg 1257w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>少し待つと↓の画面が出てくるので、「ファイルを保存する」にチェックを入れ「OK」を押します。<br><span class="red">※デフォルトでは「アプリケーションで開く」にチェックが入っているので注意。</span></p>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/2325f10a40182f60bef37efe270526ac.png"><img loading="lazy" decoding="async" width="1024" height="536" src="https://inokigeki.com/wp-content/uploads/2325f10a40182f60bef37efe270526ac-1024x536.png" alt="" class="wp-image-1584" srcset="https://inokigeki.com/wp-content/uploads/2325f10a40182f60bef37efe270526ac-1024x536.png 1024w, https://inokigeki.com/wp-content/uploads/2325f10a40182f60bef37efe270526ac-500x262.png 500w, https://inokigeki.com/wp-content/uploads/2325f10a40182f60bef37efe270526ac-768x402.png 768w, https://inokigeki.com/wp-content/uploads/2325f10a40182f60bef37efe270526ac.png 1099w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>ダウンロードが終わったら、アドレスバーの右にあるダウンロードボタンを押し、「多段タブ.zip」を開きます。</p>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/0f20a88610243f3f023d3e2359f009cd.png"><img loading="lazy" decoding="async" width="1024" height="171" src="https://inokigeki.com/wp-content/uploads/0f20a88610243f3f023d3e2359f009cd-1024x171.png" alt="" class="wp-image-1585" srcset="https://inokigeki.com/wp-content/uploads/0f20a88610243f3f023d3e2359f009cd-1024x171.png 1024w, https://inokigeki.com/wp-content/uploads/0f20a88610243f3f023d3e2359f009cd-500x83.png 500w, https://inokigeki.com/wp-content/uploads/0f20a88610243f3f023d3e2359f009cd-768x128.png 768w, https://inokigeki.com/wp-content/uploads/0f20a88610243f3f023d3e2359f009cd.png 1079w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<h3 class="wp-block-heading"><span id="toc3">MultiRowTabLiteforFx.uc.js</span></h3>



<p>「多段タブ」ファイルが開くので、その中にある+マークが付いた方の多段タブフォルダを開きます。<br>今回は「多段タブ Firefox 89+」です。</p>



<p>ここで2つのことを決めなければなりません。</p>



<p>一つは、用意された6種類のスクリプトの中からどれを選ぶか。<br>「01～06 それぞれの組み合わせ.txt」を読んで好きなものを選びましょう。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/4125216b82dfab7e0a775f80d0073723.png"><img loading="lazy" decoding="async" width="860" height="435" src="https://inokigeki.com/wp-content/uploads/4125216b82dfab7e0a775f80d0073723.png" alt="" class="wp-image-1614" srcset="https://inokigeki.com/wp-content/uploads/4125216b82dfab7e0a775f80d0073723.png 860w, https://inokigeki.com/wp-content/uploads/4125216b82dfab7e0a775f80d0073723-500x253.png 500w, https://inokigeki.com/wp-content/uploads/4125216b82dfab7e0a775f80d0073723-768x388.png 768w" sizes="(max-width: 860px) 100vw, 860px" /></a></figure>



<p>とはいえ、「読んでもよく分からん！」という人はシンプルに、</p>



<ul class="wp-block-list">
<li>段数を無制限にしたいなら「01」</li>



<li>段数を制限したいなら「02」（デフォルトでは5段）</li>
</ul>



<p>を選ぶと良いと思います。<br>私は段数制限したいので「<span class="marker-under">02</span>」を選びました。</p>



<p>もう一つは、Proton UIにするかどうか。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/80c2ef78227c82857344efcdfdd0812e.png"><img loading="lazy" decoding="async" width="970" height="428" src="https://inokigeki.com/wp-content/uploads/80c2ef78227c82857344efcdfdd0812e.png" alt="" class="wp-image-1616" srcset="https://inokigeki.com/wp-content/uploads/80c2ef78227c82857344efcdfdd0812e.png 970w, https://inokigeki.com/wp-content/uploads/80c2ef78227c82857344efcdfdd0812e-500x221.png 500w, https://inokigeki.com/wp-content/uploads/80c2ef78227c82857344efcdfdd0812e-768x339.png 768w" sizes="(max-width: 970px) 100vw, 970px" /></a></figure>



<p>何やらFirefox 89から導入されたデザインらしいのですが、ユーザーからは「タブの境界が不明瞭になって見にくい」「メニューやブックマークの行間が広くなって使いにくい」等、とにかく評価は散々なもの…。</p>



<p>試しに「…Proton falseにする」「…Proton UIにする」を両方表示してみましたが、確かに「…Proton UIにする」の方はタブの余白が広かったり、表示が見切れていたり等デザインが崩れていたので、無難に「<span class="marker-under">…Proton falseにする</span>」を選んだ方が良いと思います。</p>



<p>お好みの「Proton」フォルダ→先ほど選んだ番号のフォルダを開きます。</p>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/498596ebebf51c6eff62c99c79929039.png"><img loading="lazy" decoding="async" width="1024" height="335" src="https://inokigeki.com/wp-content/uploads/498596ebebf51c6eff62c99c79929039-1024x335.png" alt="" class="wp-image-1617" srcset="https://inokigeki.com/wp-content/uploads/498596ebebf51c6eff62c99c79929039-1024x335.png 1024w, https://inokigeki.com/wp-content/uploads/498596ebebf51c6eff62c99c79929039-500x164.png 500w, https://inokigeki.com/wp-content/uploads/498596ebebf51c6eff62c99c79929039-768x251.png 768w, https://inokigeki.com/wp-content/uploads/498596ebebf51c6eff62c99c79929039.png 1283w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>中に「<span class="marker-under">MultiRowTabLiteforFx.uc.js</span>」というファイルがあります。<br>このファイルはあとで使いますので、この場所にあることを覚えておいてください。</p>



<h3 class="wp-block-heading"><span id="toc4">userChrome.css</span></h3>



<p>「多段タブ」フォルダに戻り、「userChrome.js用スクリプトを利用する方法」フォルダの中に「<span class="marker-under">userChrome.css</span>」があることを確認します。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/f90349b3fcd5c91eda04d9f1bd4178c6.png"><img loading="lazy" decoding="async" width="891" height="405" src="https://inokigeki.com/wp-content/uploads/f90349b3fcd5c91eda04d9f1bd4178c6.png" alt="" class="wp-image-1619" srcset="https://inokigeki.com/wp-content/uploads/f90349b3fcd5c91eda04d9f1bd4178c6.png 891w, https://inokigeki.com/wp-content/uploads/f90349b3fcd5c91eda04d9f1bd4178c6-500x227.png 500w, https://inokigeki.com/wp-content/uploads/f90349b3fcd5c91eda04d9f1bd4178c6-768x349.png 768w" sizes="(max-width: 891px) 100vw, 891px" /></a></figure>



<p>このファイルもこのあと使うので、フォルダを開いたままにしておきます。</p>



<h2 class="wp-block-heading"><span id="toc5">「chrome」フォルダに格納</span></h2>



<p>Firefox右上のハンバーガーメニュー（漢数字の三みたいなアイコン）をクリックし、「ヘルプ」→「他のトラブルシューティング情報」を開きます。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/177b0e414d63cfb87af620a9dfef98b6-1.png"><img loading="lazy" decoding="async" width="332" height="249" src="https://inokigeki.com/wp-content/uploads/177b0e414d63cfb87af620a9dfef98b6-1.png" alt="" class="wp-image-1646"/></a></figure>



<p>「アプリケーション基本情報」の真ん中ら辺にある「プロファイルフォルダー」欄の「Finderに表示」をクリックします。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/818c74809aa44443c5ab6913ed377b4e.png"><img loading="lazy" decoding="async" width="337" height="51" src="https://inokigeki.com/wp-content/uploads/818c74809aa44443c5ab6913ed377b4e.png" alt="" class="wp-image-1602"/></a></figure>



<p><br>開いたフォルダの中に「chrome」という名前のフォルダを新しく作ります。<br>もし既に「chrome」フォルダがあれば、それを使います。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/bb739679d62bd664cfb9ae876d8261cf.png"><img loading="lazy" decoding="async" width="764" height="433" src="https://inokigeki.com/wp-content/uploads/bb739679d62bd664cfb9ae876d8261cf.png" alt="" class="wp-image-1603" srcset="https://inokigeki.com/wp-content/uploads/bb739679d62bd664cfb9ae876d8261cf.png 764w, https://inokigeki.com/wp-content/uploads/bb739679d62bd664cfb9ae876d8261cf-500x283.png 500w, https://inokigeki.com/wp-content/uploads/bb739679d62bd664cfb9ae876d8261cf-120x68.png 120w, https://inokigeki.com/wp-content/uploads/bb739679d62bd664cfb9ae876d8261cf-160x90.png 160w, https://inokigeki.com/wp-content/uploads/bb739679d62bd664cfb9ae876d8261cf-320x180.png 320w" sizes="(max-width: 764px) 100vw, 764px" /></a></figure>



<p><br>先ほどダウンロードした、</p>



<ul class="wp-block-list">
<li><span class="marker-under">userChrome.css</span></li>



<li><span class="marker-under">userChrome.js</span></li>



<li><span class="marker-under">MultiRowTabLiteforFx.uc.js</span></li>
</ul>



<p>の3つのファイルを「chrome」フォルダに入れます。</p>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/e9ef77ff288757fb7b6ffe93e30660c9.png"><img loading="lazy" decoding="async" width="1024" height="438" src="https://inokigeki.com/wp-content/uploads/e9ef77ff288757fb7b6ffe93e30660c9-1024x438.png" alt="" class="wp-image-1648" srcset="https://inokigeki.com/wp-content/uploads/e9ef77ff288757fb7b6ffe93e30660c9-1024x438.png 1024w, https://inokigeki.com/wp-content/uploads/e9ef77ff288757fb7b6ffe93e30660c9-500x214.png 500w, https://inokigeki.com/wp-content/uploads/e9ef77ff288757fb7b6ffe93e30660c9-768x328.png 768w, https://inokigeki.com/wp-content/uploads/e9ef77ff288757fb7b6ffe93e30660c9.png 1036w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<h2 class="wp-block-heading"><span id="toc6">「Resources」フォルダに格納</span></h2>



<p>ここがWindowsと違って分かりにくく、一番躓くところかもしれません。</p>



<p>「Dock」→「アプリケーション」→一番下の「Finderで開く」をクリック。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/57cf248c4cded47d85e5e72f4ca5ccb0.png"><img loading="lazy" decoding="async" width="679" height="243" src="https://inokigeki.com/wp-content/uploads/57cf248c4cded47d85e5e72f4ca5ccb0.png" alt="" class="wp-image-1606" srcset="https://inokigeki.com/wp-content/uploads/57cf248c4cded47d85e5e72f4ca5ccb0.png 679w, https://inokigeki.com/wp-content/uploads/57cf248c4cded47d85e5e72f4ca5ccb0-500x179.png 500w" sizes="(max-width: 679px) 100vw, 679px" /></a></figure>



<p>「Firefox.app」を右クリック→「パッケージの内容を表示」をクリック。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/66c1c743653d1482db7c68d79eec3b82.png"><img loading="lazy" decoding="async" width="772" height="494" src="https://inokigeki.com/wp-content/uploads/66c1c743653d1482db7c68d79eec3b82.png" alt="" class="wp-image-1609" srcset="https://inokigeki.com/wp-content/uploads/66c1c743653d1482db7c68d79eec3b82.png 772w, https://inokigeki.com/wp-content/uploads/66c1c743653d1482db7c68d79eec3b82-500x320.png 500w, https://inokigeki.com/wp-content/uploads/66c1c743653d1482db7c68d79eec3b82-768x491.png 768w" sizes="(max-width: 772px) 100vw, 772px" /></a></figure>



<p>「Contents」→「Resources」フォルダ内に「<span class="marker-under">config.js</span>」を入れます。</p>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/fafda0777c987a79696378ef30c671af.png"><img loading="lazy" decoding="async" width="1024" height="525" src="https://inokigeki.com/wp-content/uploads/fafda0777c987a79696378ef30c671af-1024x525.png" alt="" class="wp-image-1610" srcset="https://inokigeki.com/wp-content/uploads/fafda0777c987a79696378ef30c671af-1024x525.png 1024w, https://inokigeki.com/wp-content/uploads/fafda0777c987a79696378ef30c671af-500x256.png 500w, https://inokigeki.com/wp-content/uploads/fafda0777c987a79696378ef30c671af-768x393.png 768w, https://inokigeki.com/wp-content/uploads/fafda0777c987a79696378ef30c671af.png 1179w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>同じ「Resources」フォルダ内の「defaults」→「pref」フォルダに「<span class="marker-under">config-prefs.js</span>」を入れます。</p>



<figure class="wp-block-image size-large"><a href="https://inokigeki.com/wp-content/uploads/85d64d51d7a746bb72bee772aec61ecc.png"><img loading="lazy" decoding="async" width="1024" height="457" src="https://inokigeki.com/wp-content/uploads/85d64d51d7a746bb72bee772aec61ecc-1024x457.png" alt="" class="wp-image-1611" srcset="https://inokigeki.com/wp-content/uploads/85d64d51d7a746bb72bee772aec61ecc-1024x457.png 1024w, https://inokigeki.com/wp-content/uploads/85d64d51d7a746bb72bee772aec61ecc-500x223.png 500w, https://inokigeki.com/wp-content/uploads/85d64d51d7a746bb72bee772aec61ecc-768x343.png 768w, https://inokigeki.com/wp-content/uploads/85d64d51d7a746bb72bee772aec61ecc.png 1353w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<h2 class="wp-block-heading"><span id="toc7">Firefoxを再起動</span></h2>



<p>ここまで終わったら、一旦Firefoxを終了して再び開きます。</p>



<p>無事、多段になっていたら成功です。お疲れさまでした。</p>



<h2 class="wp-block-heading"><span id="toc8">応用編</span></h2>



<p>ここからは応用編です。</p>



<h3 class="wp-block-heading"><span id="toc9">多段タブの段数を変更</span></h3>



<p>「<span class="marker-under">MultiRowTabLiteforFx.uc.js</span>」をテキストエディットで開き、<br><span class="bold">/* 段数(デフォルト5段) */</span><br>と書かれた行の数字を好きな数値に書き換えます。</p>



<p>例えば、3行にしたかったら「3」と書き換えます。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/6e3ca4b6f5c956dbc4a2426403986dd1.png"><img loading="lazy" decoding="async" width="951" height="637" src="https://inokigeki.com/wp-content/uploads/6e3ca4b6f5c956dbc4a2426403986dd1.png" alt="" class="wp-image-1621" srcset="https://inokigeki.com/wp-content/uploads/6e3ca4b6f5c956dbc4a2426403986dd1.png 951w, https://inokigeki.com/wp-content/uploads/6e3ca4b6f5c956dbc4a2426403986dd1-500x335.png 500w, https://inokigeki.com/wp-content/uploads/6e3ca4b6f5c956dbc4a2426403986dd1-768x514.png 768w" sizes="(max-width: 951px) 100vw, 951px" /></a></figure>



<h3 class="wp-block-heading"><span id="toc10">タブの横幅を固定</span></h3>



<p>「多段タブ」→「多段タブ Firefox 89+」→「タブの横幅固定.txt」に2通りの方法が記載されていますが、後者の「<span class="marker-under">userChrome.css</span>」に追記するやり方の方が簡単です。</p>



<p>「<span class="marker-under">userChrome.css</span>」をテキストエディットで開き、以下のコードを追記します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-file="userChrome.css" data-lang="CSS"><code>.tabbrowser-tab[fadein]:not([pinned]) {
        min-width: 100px !important; /* 最小値 デフォルト  76px */
        max-width: 100px !important; /* 最大値 デフォルト 225px */
}</code></pre></div>



<p>pxの数値はお好みで調整してください。<br>最小値・最大値をともに同じ数値にすると、横幅が固定されます。</p>



<figure class="wp-block-image size-full"><a href="https://inokigeki.com/wp-content/uploads/3dbb700c9b3e7cf92858cface688c1d3.png"><img loading="lazy" decoding="async" width="702" height="111" src="https://inokigeki.com/wp-content/uploads/3dbb700c9b3e7cf92858cface688c1d3.png" alt="" class="wp-image-1643" srcset="https://inokigeki.com/wp-content/uploads/3dbb700c9b3e7cf92858cface688c1d3.png 702w, https://inokigeki.com/wp-content/uploads/3dbb700c9b3e7cf92858cface688c1d3-500x79.png 500w" sizes="(max-width: 702px) 100vw, 702px" /></a></figure>



<h2 class="wp-block-heading"><span id="toc11">バージョンアップで不具合が発生したら</span></h2>



<p>Firefoxをバージョンアップした際、不具合が発生するときがあります（例えばタブの移動が出来なくなる等）。</p>



<p>そのときは、「多段タブ.zip」をダウンロードし直し、「chrome」フォルダ内の「<span class="marker-under">MultiRowTabLiteforFx.uc.js</span>」を新しいのに置き換えましょう。</p>



<p>手順は、『<strong><a href="https://inokigeki.com/firefox-multitab-mac#toc2">2.多段タブ.zipをダウンロード</a>〜3.「chrome」フォルダに格納</strong>』と同じです。</p>



<div class="wp-block-cocoon-blocks-caption-box-1 caption-box block-box has-border-color has-key-color-border-color"><div class="caption-box-label block-box-label box-label fab-pencil"><span class="caption-box-label-text block-box-label-text box-label-text">今回参考にさせてもらった記事</span></div><div class="caption-box-content block-box-content box-content">

<a rel="noopener" target="_blank" href="https://kamehiyo.com/firefox92-multitab/" title="Firefox92で多段タブ表示～新規用～" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://inokigeki.com/wp-content/uploads/cocoon-resources/blog-card-cache/d3b5e18739c2a3cb1c6c47c69b336b5b.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Firefox92で多段タブ表示～新規用～</div><div class="blogcard-snippet external-blogcard-snippet">この記事はFirefox92から初めて多段タブにしたい人用です。以前のバージョンで既に多段タブにしている方はこちらの記事をご覧ください。各ファイルを上げてくださっている方々に感謝感謝です。 zipフォルダをダウンロード こちらにアクセスして...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://kamehiyo.com/firefox92-multitab/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">kamehiyo.com</div></div></div></div></a>




<a rel="noopener" target="_blank" href="https://dev.macha795.com/firefox72-unread-tab-customize-enable/" title="【Firefox149まで】userchrome.cssでカスタマイズして未読タブ、選択タブの文字色を変える方法" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://inokigeki.com/wp-content/uploads/cocoon-resources/blog-card-cache/d9150bc8955643869d0d486c5644e32e.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">【Firefox149まで】userchrome.cssでカスタマイズして未読タブ、選択タブの文字色を変える方法</div><div class="blogcard-snippet external-blogcard-snippet">この記事ではFirefox149～72でuserChrome.css、userChrome.js、xx.uc.jsを使用したカスタマイズする方法について紹介します。userChromeなら標準機能や拡張機能で変更できない未読タブなどのフォン...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://dev.macha795.com/firefox72-unread-tab-customize-enable/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">dev.macha795.com</div></div></div></div></a>
</div></div>
]]></content:encoded>
					
					<wfw:commentRss>https://inokigeki.com/firefox-multitab-mac/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1348</post-id>	</item>
		<item>
		<title>【Cocoon】SNSシェアボタン・フォローボタンを丸く＆小型化【カスタマイズ】</title>
		<link>https://inokigeki.com/cocoon-customize-snsbutton</link>
					<comments>https://inokigeki.com/cocoon-customize-snsbutton#comments</comments>
		
		<dc:creator><![CDATA[I]]></dc:creator>
		<pubDate>Wed, 11 Sep 2019 21:11:31 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Cocoon]]></category>
		<category><![CDATA[カスタマイズ]]></category>
		<guid isPermaLink="false">https://inokigeki.com/?p=873</guid>

					<description><![CDATA[CocoonのSNSシェアボタンとフォローボタンをカスタマイズしました。 備忘録として残しておきます。 目次 変更前→変更後のデザインCocoon設定CSSでシェアボタンをカスタマイズCSSでフォローボタンをカスタマイズ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>CocoonのSNSシェアボタンとフォローボタンをカスタマイズしました。</p>



<p>備忘録として残しておきます。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-6" checked><label class="toc-title" for="toc-checkbox-6">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">変更前→変更後のデザイン</a></li><li><a href="#toc2" tabindex="0">Cocoon設定</a></li><li><a href="#toc3" tabindex="0">CSSでシェアボタンをカスタマイズ</a></li><li><a href="#toc4" tabindex="0">CSSでフォローボタンをカスタマイズ</a></li><li><a href="#toc5" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">変更前→変更後のデザイン</span></h2>



<p>変更前のデザイン。</p>



<figure class="wp-block-image"><a href="https://inokigeki.com/wp-content/uploads/e683416a81620b815215631c58e1cd21.png"><img loading="lazy" decoding="async" width="833" height="214" src="https://inokigeki.com/wp-content/uploads/e683416a81620b815215631c58e1cd21.png" alt="" class="wp-image-897" srcset="https://inokigeki.com/wp-content/uploads/e683416a81620b815215631c58e1cd21.png 833w, https://inokigeki.com/wp-content/uploads/e683416a81620b815215631c58e1cd21-500x128.png 500w, https://inokigeki.com/wp-content/uploads/e683416a81620b815215631c58e1cd21-768x197.png 768w" sizes="(max-width: 833px) 100vw, 833px" /></a><figcaption>パソコンでの表示</figcaption></figure>



<div class="wp-block-image"><figure class="aligncenter"><a href="https://inokigeki.com/wp-content/uploads/fc2cbeefdd05a4019d110878c35db4f7.png"><img loading="lazy" decoding="async" width="408" height="207" src="https://inokigeki.com/wp-content/uploads/fc2cbeefdd05a4019d110878c35db4f7.png" alt="" class="wp-image-898"/></a><figcaption>スマホでの表示</figcaption></figure></div>



<p>そのままのデザインではちょっと存在感があったのと、スマホでの表示だとシェアボタンが見切れるのが気になったので、</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box has-border-color has-key-color-border-color">
<ul class="wp-block-list"><li>アイコンのみの表示で小型化</li><li>丸形</li><li>一列に横並び</li></ul>
</div>



<p>この三点を目標にカスタマイズした結果、</p>



<figure class="wp-block-image"><a href="https://inokigeki.com/wp-content/uploads/91b99157d0f64bac1e4eea03ce1ffe69.png"><img loading="lazy" decoding="async" width="826" height="200" src="https://inokigeki.com/wp-content/uploads/91b99157d0f64bac1e4eea03ce1ffe69.png" alt="" class="wp-image-884" srcset="https://inokigeki.com/wp-content/uploads/91b99157d0f64bac1e4eea03ce1ffe69.png 826w, https://inokigeki.com/wp-content/uploads/91b99157d0f64bac1e4eea03ce1ffe69-500x121.png 500w, https://inokigeki.com/wp-content/uploads/91b99157d0f64bac1e4eea03ce1ffe69-768x186.png 768w" sizes="(max-width: 826px) 100vw, 826px" /></a></figure>



<p>こんな感じのデザインになりました。</p>



<h2 class="wp-block-heading"><span id="toc2">Cocoon設定</span></h2>



<p>まずは「Cocoon設定」→「SNSシェア」で以下のように設定し保存します。</p>



<figure class="wp-block-image"><a href="https://inokigeki.com/wp-content/uploads/7377b07e0381226fd41348d6d03950e0.png"><img loading="lazy" decoding="async" width="876" height="651" src="https://inokigeki.com/wp-content/uploads/7377b07e0381226fd41348d6d03950e0.png" alt="" class="wp-image-885" srcset="https://inokigeki.com/wp-content/uploads/7377b07e0381226fd41348d6d03950e0.png 876w, https://inokigeki.com/wp-content/uploads/7377b07e0381226fd41348d6d03950e0-500x372.png 500w, https://inokigeki.com/wp-content/uploads/7377b07e0381226fd41348d6d03950e0-768x571.png 768w" sizes="(max-width: 876px) 100vw, 876px" /></a></figure>



<p>「カラム数」はシェアボタンの数によって変えてください。<br>このサイトではシェアボタンを5つ表示しているのでカラム数を5列にしています。</p>



<p>「ロゴ・キャプションの配置」は<span class="bold-red">左右</span>にしてください。</p>



<h2 class="wp-block-heading"><span id="toc3">CSSでシェアボタンをカスタマイズ</span></h2>



<p>まずはアイコン横の文字を消します。</p>



<p>以下のコードを、WordPress管理画面の左サイドバーにある「外観」→「テーマエディター」Cocoon Childのstyle.cssに貼り付けます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-file="style.css" data-lang="CSS"><code>#main .button-caption {
	display: none; /*キャプション非表示*/
}</code></pre></div>



<p>デザインは以下のコード。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-file="style.css" data-lang="CSS"><code>/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}</code></pre></div>



<p>コメントアウトでそれぞれ何を設定しているか補足してあるので、多少は分かりやすくなっているかと思います。</p>



<p>ボタンの間隔、大きさなどはお好みで変更してください。</p>



<h2 class="wp-block-heading"><span id="toc4">CSSでフォローボタンをカスタマイズ</span></h2>



<p>次にフォローボタンです。</p>



<p>基本的には先ほどのコードをshareからfollowに変えるだけなので、コード自体はシェアボタンのとほぼ同じです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-file="style.css" data-lang="CSS"><code>/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}</code></pre></div>



<p>こちらもお好みでコードを変えてください。</p>



<h2 class="wp-block-heading"><span id="toc5">まとめ</span></h2>



<p>以上のコードをまとめるとこうなります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-file="style.css" data-lang="CSS"><code>/*---SNSボタンを丸くする---*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}</code></pre></div>



<p>コピペして自分好みにカスタマイズしてみてください。</p>



<div class="wp-block-cocoon-blocks-caption-box-1 caption-box block-box has-border-color has-key-color-border-color"><div class="caption-box-label block-box-label box-label fab-pencil"><span class="caption-box-label-text block-box-label-text box-label-text">今回参考にさせてもらった記事</span></div><div class="caption-box-content block-box-content box-content">
<p></p>




<a rel="noopener" target="_blank" href="https://web-ashibi.net/archives/2875" title="【Cocoon】サイドバーのSNSフォローボタンをカスタマイズ" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://inokigeki.com/wp-content/uploads/cocoon-resources/blog-card-cache/77189b2dd6fbb374d937220e7c33e86d.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">【Cocoon】サイドバーのSNSフォローボタンをカスタマイズ</div><div class="blogcard-snippet external-blogcard-snippet">WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーにウィジェットで表示する「SNSフォローボタン」のカスタマイズをしてみました。サイドバーにプロフィールボックスを置いてる人は必要ないですが、プロフィールじゃな</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://web-ashibi.net/archives/2875" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">web-ashibi.net</div></div></div></div></a>




<a rel="noopener" target="_blank" href="https://unity-right.com/sns-share/" title="SNSシェアボタンを丸くして横1列にするカスタマイズ【Cocoon】" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://inokigeki.com/wp-content/uploads/cocoon-resources/blog-card-cache/75465c1c7ced88a423806f35618bc2e8.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">SNSシェアボタンを丸くして横1列にするカスタマイズ【Cocoon】</div><div class="blogcard-snippet external-blogcard-snippet">Cocoonのsnsシェアボタンをオシャレにカスタマイズ。形を四角から丸形に、2列ではなく1列横並びに。ロゴマークの大きさやボタン同士の間隔・右寄せ中央寄せなどのCSSコード。順をおって分かりやすく説明分入れました。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://unity-right.com/sns-share/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">unity-right.com</div></div></div></div></a>
</div></div>
]]></content:encoded>
					
					<wfw:commentRss>https://inokigeki.com/cocoon-customize-snsbutton/feed</wfw:commentRss>
			<slash:comments>6</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">873</post-id>	</item>
	</channel>
</rss>
