wordpressのサイドバーのカテゴリーをCSSでカスタマイズして2行で表示する方法
CODE2021.05.12

きつね
WordPressのサイドバーに写真2列でカテゴリーを表示したい…CSSを教えて
CSSの「Flexbox」というコードを利用したらできたので覚書です。
こんな感じで、右におすすめのカテゴリーを2列にして表示ができます。
ブログをはじめて10か月。HTMLとCSS、Javascriptを最近かじりはじめ、ようやくコーディングがどういうものなのか理解しはじめました。
「英語とスぺ語で生活してるから、横文字でもきっと大丈夫…(実はアルファベットが超苦手です。)」と思って挑戦したんですが、正直、難しくて苦手意識が否めないです。たぶん、センスとかない方です。
ですが、コードがうまくいった瞬間のアドレナリンがすごいので、将来的に使えるレベルになるまでやろうと思います。
この記事では、サイドバーのカテゴリーを写真2列で表示する方法をご紹介します。
需要は低いかもしれませんが、私のように「サイドバーに写真2列でカテゴリーを表示したい」と思う方がいれば、お役に立てれば幸いです。
ちなみに、このサイトletologはCocoonを利用しています。Cocoonは、もともとがシンプルなのでアレンジが多様にききますね。CSSのトライ&エラーをするにはもってこいかと思います。
wordpressのサイドバーのカテゴリーをCSSでカスタマイズして2行にする方法
作業は以下のとおりです。
- 写真を選び、大きさを整える
- 写真をウィジェットで呼び出せるようにする
- ウィジェットでサイドバーにHTMLを書き込む
- CSS追加編集にCSSコードを追加する
ちょっと工程がありますが、かっこいいウェブページ頭にを思い描きつつ、1つ1つやっていきましょう。
HTMLを編集する
まずはHTMLの編集です。
HTMLの行程としては、「利用する写真とデザインを決めて大きさを整える」→「サイドバーに書き込む」作業となります。
写真とリンクだけ先につくる
まずは利用したい写真をご自身のフォルダから選択してください。
写真を決めたら、「800×533」の大きさにして保存しておきます。
次の作業は、普通の「記事作成画面」でおこないます。Wordpressの管理画面で「新規追加」を押して、新しい画面を開きます。
「+」から「画像」ボタンを押し、サイドバーに利用したい写真を選択し、画像を選択します。

ここで画像にリンクも挿入します。画像にリンクを追加してください。
カテゴリーに表示したい「カテゴリーの種類」は4つ~6つほどが適当かと思います。もちろん、もっと増やしても問題ありません。
必要な数の写真とリンクは、ぜんぶ並べたい順に新規の記事画面に並べてください。
全部の写真の選択とリンクの挿入が終わったら、右上の「…」マークを押し、コードエディターに切り替えます。
すると、中央の編集画面にHTMLのコードが表示されますので、全選択してコピーしておいてください。
これで、「写真の選択」と「リンクの設定」が終わりました。
ウィジェットでサイドバーにリンクを入れ込む
続いて、サイドバーに実際に写真を入れ込んでいきます。
外観>ウィジェットを開きます。
そして、真ん中の「利用できるウィジェット」選択肢から「カスタムHTML」をつかみ、右のサイドバーのカテゴリーを入れたい場所に入れ込みます。
すると、入れたカスタムHTMLがひらきます。まずは「カテゴリー名に表示したい名前」をタイトルに入れましょう。
そして、「内容」に先ほど「新規作成画面」で作ったコードをペーストします。
コードを見てみると、ペーストしたコードは、写真ごとに分かれているのがわかると思います。
写真それぞれに、「並べるアイテムマーク」をつける
これら1枚1枚の写真の前後に「これが表示したいアイテムですよ」というのがわかるようにする目印のコードを書き入れます。
それぞれの写真のコードの「一番最初の行」と「最後の行」に書き入れてください。
それぞれの写真の前後に入れるコード
●写真のまえ:
<div class="item">
●写真のあと:
</div>
以下が具体例です。A~Eがそれぞれの写真のコードだと思ってください。前後に上記のコードが入っています。コピペしてご利用ください。
See the Pen GRWoBGw by LETOLOG (@LETOLOG) on CodePen.
エラーが出たら、余計な余白がある可能性があります。半角スペースは2つ以上は入れないようにします。
アイテム全体にCSSで指定するためのコードを入れる
CSSで出された命令が、HTML側で受けつけられるようにするための目印の言葉を入れこみます。
このコードは、コード全体の「最初」と「最後」だけに1度だけ書き入れます。
全体コードの前後を囲むコード
以下のとおり、全体コードの最初と最後だけにコードを入れます。コピぺ可です。
See the Pen GRWoBGw by LETOLOG (@LETOLOG) on CodePen.
●コードの最初:
<div class="picture-container">
※このクラスで指定する名前(”picture-container”の部分★)が、CSSのコードを指定する際に必要となる名前です。ご自身で好きな名前をつけていただいて構いませんが、わかりやすいものにしましょう。
●コードの最後:
</div>
1度この状態で実際のサイトの状態を確認してみてください。大きな写真が縦に並んでいるのが確認できればOKです。
写真の大きさを調整する
続いて、大きすぎる写真の大きさを小さく調整します。ちなみに、もともと小さければ調整の必要もありません。
このコードを、それぞれの写真の [alt=””]のあとに半角スペースを1ついれ、そのあとに入れてください。(同じコード内であればどこでもOKですが、便宜上altを指定しています。)
入れ込む2つのコード
写真の大きさを調整する:
See the Pen xxqZJNp by LETOLOG (@LETOLOG) on CodePen.
※ここでは、当サイトで利用している大きさを使っています。数字は変更可能です。
写真の角を丸くする:
style="border-radius:15px;"
See the Pen gOmPjJy by LETOLOG (@LETOLOG) on CodePen.
(なぜかどうしてもCodepenの画面で最後の[“]が表示されないので、上に記載しています。[“]は必要です。)
※写真の丸みは、上記のピクセル数を変更すれば変えられます。
それぞれのコードの間には、「半角スペース」1つが必要です。
CSSを編集する
続いて、CSSでHTMLに向け、サイトへのデザインの指示をだします。
ウィジェット >「ライブレビューで管理」を開きます。
追加CSSに以下を書き込みます。この”picture-container”の部分が、先ほど★の部分で記入した名前になります。(「.」は必要なので、漏れないようにお気をつけください。)
See the Pen GRWoBGw by LETOLOG (@LETOLOG) on CodePen.
コピペ可です。このCSSでは、以下の内容を指定しています。
- 画像の大きさにより、横並びにしたり縦にしたり、並べ方を柔軟にする。
- サイドバーのコンテンツ内でのみ自在に表示
- それぞれの画像を等間隔で見栄えよく表示
それぞれの写真の間隔を引きのばしたり、1つを大きくしたりすることも可能です。柔軟にコードの中身を変える方法はこちらのページからご確認いただけます。
CSSのコードを調べていると、この方のwebcreatorboxのサイトによくあたります。すごい方です。
さて、ご自身のページを開いて確認してみてください。どうでしょう、以下のように2列になっていますでしょうか?
本当にお疲れ様でした。
エラーが出る場合は、コードに余計な余白が入っている場合か「;」の漏れなどが多いです。
wordpressのサイドバーのカテゴリーをCSSでカスタマズして2行で表示→できたら魔法のようでうれしい
というわけで、サイドバーのカテゴリーを2行にする方法でした。
もちろん、写真じゃなくてもテキストでも大丈夫ですよ。
どなたかのお役に立てればと思います。
"+e+""+"script"+">"},v=function(e){e.write(d("")),e.close();var t=e.parentWindow.Object;return e=null,t},h=function(){try{r=new ActiveXObject("htmlfile")}catch(o){}var e,t;h="undefined"!=typeof document?document.domain&&r?v(r):((t=u("iframe")).style.display="none",s.appendChild(t),t.src=String("javascript:"),(e=t.contentWindow.document).open(),e.write(d("document.F=Object")),e.close(),e.F):v(r);for(var n=a.length;n--;)delete h.prototype[a[n]];return h()};c[f]=!0,e.exports=Object.create||function(e,t){var n;return null!==e?(l.prototype=o(e),n=new l,l.prototype=null,n[f]=e):n=h(),void 0===t?n:i.f(n,t)}},17840:function(e,t,n){var r=n(7493),o=n(51010),i=n(86385),a=n(83875),c=n(29580),s=n(60667);t.f=r&&!o?Object.defineProperties:function(e,t){a(e);for(var n,r=c(t),o=s(t),u=o.length,p=0;u>p;)i.f(e,n=o[p++],r[n]);return e}},86385:function(e,t,n){var r=n(7493),o=n(67548),i=n(51010),a=n(83875),c=n(383),s=TypeError,u=Object.defineProperty,p=Object.getOwnPropertyDescriptor,f="enumerable",l="configurable",d="writable";t.f=r?i?function(e,t,n){if(a(e),t=c(t),a(n),"function"==typeof e&&"prototype"===t&&"value"in n&&d in n&&!n.writable){var r=p(e,t);r&&r.writable&&(e[t]=n.value,n={configurable:l in n?n.configurable:r.configurable,enumerable:f in n?n.enumerable:r.enumerable,writable:!1})}return u(e,t,n)}:u:function(e,t,n){if(a(e),t=c(t),a(n),o)try{return u(e,t,n)}catch(r){}if("get"in n||"set"in n)throw s("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},66012:function(e,t,n){var r=n(7493),o=n(79611),i=n(81513),a=n(69199),c=n(29580),s=n(383),u=n(24792),p=n(67548),f=Object.getOwnPropertyDescriptor;t.f=r?f:function(e,t){if(e=c(e),t=s(t),p)try{return f(e,t)}catch(n){}if(u(e,t))return a(!o(i.f,e,t),e[t])}},87994:function(e,t,n){var r=n(18794),o=n(48869).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return r(e,o)}},89612:function(e,t){t.f=Object.getOwnPropertySymbols},12654:function(e,t,n){var r=n(24792),o=n(75277),i=n(30744),a=n(50466),c=n(25115),s=a("IE_PROTO"),u=Object,p=u.prototype;e.exports=c?u.getPrototypeOf:function(e){var t=i(e);if(r(t,s))return t[s];var n=t.constructor;return o(n)&&t instanceof n?n.prototype:t instanceof u?p:null}},32010:function(e,t,n){var r=n(88697);e.exports=r({}.isPrototypeOf)},18794:function(e,t,n){var r=n(88697),o=n(24792),i=n(29580),a=n(37190).indexOf,c=n(47505),s=r([].push);e.exports=function(e,t){var n,r=i(e),u=0,p=[];for(n in r)!o(c,n)&&o(r,n)&&s(p,n);for(;t.length>u;)o(r,n=t[u++])&&(~a(p,n)||s(p,n));return p}},60667:function(e,t,n){var r=n(18794),o=n(48869);e.exports=Object.keys||function(e){return r(e,o)}},81513:function(e,t){"use strict";var n={}.propertyIsEnumerable,r=Object.getOwnPropertyDescriptor,o=r&&!n.call({1:2},1);t.f=o?function(e){var t=r(this,e);return!!t&&t.enumerable}:n},22412:function(e,t,n){var r=n(88697),o=n(83875),i=n(75017);e.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var e,t=!1,n={};try{(e=r(Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set))(n,[]),t=n instanceof Array}catch(a){}return function(n,r){return o(n),i(r),t?e(n,r):n.__proto__=r,n}}():void 0)},17141:function(e,t,n){var r=n(79611),o=n(75277),i=n(52786),a=TypeError;e.exports=function(e,t){var n,c;if("string"===t&&o(n=e.toString)&&!i(c=r(n,e)))return c;if(o(n=e.valueOf)&&!i(c=r(n,e)))return c;if("string"!==t&&o(n=e.toString)&&!i(c=r(n,e)))return c;throw a("Can't convert object to primitive value")}},31561:function(e,t,n){var r=n(22773),o=n(88697),i=n(87994),a=n(89612),c=n(83875),s=o([].concat);e.exports=r("Reflect","ownKeys")||function(e){var t=i.f(c(e)),n=a.f;return n?s(t,n(e)):t}},74443:function(e){e.exports=function(e){try{return{error:!1,value:e()}}catch(t){return{error:!0,value:t}}}},35182:function(e,t,n){var r=n(98363),o=n(25988),i=n(75277),a=n(86291),c=n(56429),s=n(52280),u=n(47923),p=n(21178),f=n(11197),l=o&&o.prototype,d=s("species"),v=!1,h=i(r.PromiseRejectionEvent),m=a("Promise",(function(){var e=c(o),t=e!==String(o);if(!t&&66===f)return!0;if(p&&(!l.catch||!l.finally))return!0;if(f>=51&&/native code/.test(e))return!1;var n=new o((function(e){e(1)})),r=function(e){e((function(){}),(function(){}))};return(n.constructor={})[d]=r,!(v=n.then((function(){}))instanceof r)||!t&&u&&!h}));e.exports={CONSTRUCTOR:m,REJECTION_EVENT:h,SUBCLASSING:v}},25988:function(e,t,n){var r=n(98363);e.exports=r.Promise},11621:function(e,t,n){var r=n(83875),o=n(52786),i=n(29269);e.exports=function(e,t){if(r(e),o(t)&&t.constructor===e)return t;var n=i.f(e);return(0,n.resolve)(t),n.promise}},99581:function(e,t,n){var r=n(25988),o=n(8662),i=n(35182).CONSTRUCTOR;e.exports=i||!o((function(e){r.all(e).then(void 0,(function(){}))}))},12423:function(e){var t=function(){this.head=null,this.tail=null};t.prototype={add:function(e){var t={item:e,next:null};this.head?this.tail.next=t:this.head=t,this.tail=t},get:function(){var e=this.head;if(e)return this.head=e.next,this.tail===e&&(this.tail=null),e.item}},e.exports=t},94088:function(e,t,n){var r=n(79611),o=n(83875),i=n(75277),a=n(79159),c=n(99749),s=TypeError;e.exports=function(e,t){var n=e.exec;if(i(n)){var u=r(n,e,t);return null!==u&&o(u),u}if("RegExp"===a(e))return r(c,e,t);throw s("RegExp#exec called on incompatible receiver")}},99749:function(e,t,n){"use strict";var r,o,i=n(79611),a=n(88697),c=n(28967),s=n(58083),u=n(97047),p=n(53580),f=n(51569),l=n(20821).get,d=n(41669),v=n(1638),h=p("native-string-replace",String.prototype.replace),m=RegExp.prototype.exec,y=m,g=a("".charAt),w=a("".indexOf),b=a("".replace),x=a("".slice),O=(o=/b*/g,i(m,r=/a/,"a"),i(m,o,"a"),0!==r.lastIndex||0!==o.lastIndex),k=u.BROKEN_CARET,P=void 0!==/()??/.exec("")[1];(O||P||k||d||v)&&(y=function(e){var t,n,r,o,a,u,p,d=this,v=l(d),S=c(e),E=v.raw;if(E)return E.lastIndex=d.lastIndex,t=i(y,E,S),d.lastIndex=E.lastIndex,t;var R=v.groups,T=k&&d.sticky,M=i(s,d),A=d.source,j=0,_=S;if(T&&(M=b(M,"y",""),-1===w(M,"g")&&(M+="g"),_=x(S,d.lastIndex),d.lastIndex>0&&(!d.multiline||d.multiline&&"\n"!==g(S,d.lastIndex-1))&&(A="(?: "+A+")",_=" "+_,j++),n=new RegExp("^(?:"+A+")",M)),P&&(n=new RegExp("^"+A+"$(?!\\s)",M)),O&&(r=d.lastIndex),o=i(m,T?n:d,_),T?o?(o.input=x(o.input,j),o[0]=x(o[0],j),o.index=d.lastIndex,d.lastIndex+=o[0].length):d.lastIndex=0:O&&o&&(d.lastIndex=d.global?o.index+o[0].length:r),P&&o&&o.length>1&&i(h,o[0],n,(function(){for(a=1;a
b)","g");return"b"!==e.exec("b").groups.a||"bc"!=="b".replace(e,"$c")}))},96411:function(e){var t=TypeError;e.exports=function(e){if(null==e)throw t("Can't call method on "+e);return e}},57323:function(e,t,n){"use strict";var r=n(22773),o=n(86385),i=n(52280),a=n(7493),c=i("species");e.exports=function(e){var t=r(e),n=o.f;a&&t&&!t[c]&&n(t,c,{configurable:!0,get:function(){return this}})}},60878:function(e,t,n){var r=n(86385).f,o=n(24792),i=n(52280)("toStringTag");e.exports=function(e,t,n){e&&!n&&(e=e.prototype),e&&!o(e,i)&&r(e,i,{configurable:!0,value:t})}},50466:function(e,t,n){var r=n(53580),o=n(34524),i=r("keys");e.exports=function(e){return i[e]||(i[e]=o(e))}},49415:function(e,t,n){var r=n(98363),o=n(62359),i="__core-js_shared__",a=r[i]||o(i,{});e.exports=a},53580:function(e,t,n){var r=n(21178),o=n(49415);(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.23.1",mode:r?"pure":"global",copyright:"© 2014-2022 Denis Pushkarev(zloirock.ru)",license:"https:タイトルとURLをコピーしました
letlog
人気記事