新着記事と人気記事をタブ切り替えで設置する【Cocoonウィジェット】

新着記事と人気記事をタブ切り替えで設置する【Cocoonウィジェット】ブログカスタマイズ

Cocoonはショートコードで新着記事や人気記事を簡単に呼び出せます。

普通に呼び出して縦に並べるのも良いですが、コンパクトに設置したいこともあります。

今回はタブ切り替えによって新着記事と人気記事を一つの場所に配置する方法を紹介します。

そらしど
そらしど

タブ切り替えはCocoon設定のフロントページタイプ「タブ一覧」のようなイメージです。

広告
そらしど

本業はWebプログラマー。
Cocoonのデザインをカスタマイズやブログノウハウを紹介しています。
気まぐれに遊べるおもちゃも作ってます。
リクエストは無料なので、気軽に投稿してください!
趣味はお昼寝です。
詳しいプロフィールはこちら

フォロー

完成イメージ

完成イメージ

以下のようになります。

記事一覧のデザインはCocoonショートコードのオプションから変更可能です。

カスタマイズ手順

カスタマイズ手順

CSSとHTMLを利用します。順番に解説します。

そらしど
そらしど

HTMLはテンプレートに登録すると何度か使うのに楽です。

CSSの設定手順

カスタマイズ手順
  • WordPress管理画面でstyle.cssエディタを開く

  • CSSをコピーする
  • style.cssに貼り付ける
  • 保存を押す

WordPress管理画面からテーマエディターを使って直接style.cssを編集する手順です。

テーマエディターの使用には注意が必要です。可能であればFTPソフトを使いましょう。

WordPress管理画面でstyle.cssエディタを開く

まず普段通りにWordPressにログインしてください。

次の順番で画面を移動してください。

画面遷移

外観→テーマエディタ→style.css

外観にマウスを当てるとサブメニューが出ます。テーマエディタを選択してください。

子テーマ(Cocoon-child)のstyle.cssを開いてください。(画像付きの手順

CSSをコピーする

以下のCSSをコピーしてください。Copyボタンを押すと簡単にコピーできます。

/* タブ切り替え 新着記事-人気記事 開始 */
.tab-wrap {
	background: #F9FFFF;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}

.tab-label {
	color: Gray;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	border-bottom: 3px solid #ddd;
}

.tab-label:hover {
	background: rgba(100, 100, 100,.1);
}

.tab-switch:checked + .tab-label {
	color: #545454;
}

.tab-label::after {
	background: #545454;
	bottom: -3px;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}

.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	height:0;
	opacity:0;
	padding: 0 10px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}

.tab-switch {
	display: none;
}
/* タブ切り替え 新着記事-人気記事 終了 */
Copy

style.cssに貼り付ける

先ほど開いたテーマエディタのstyle.cssに貼り付けます。

貼り付ける場所はファイル内の任意の場所ですが、他のコードの間に貼り付けないように注意してください。(画像付きの貼り付け箇所例

保存する

画面下部にあるファイルを更新ボタンを押してください。

緑色の枠で「ファイルの編集に成功しました。」と表示されたら完了です。

ファイルの編集に成功しました。

HTMLの設定手順

カスタマイズ手順
  • HTMLをコピーする

  • カスタムHTMLに貼り付ける

HTMLをコピーする

以下のHTMLをコピーしてください。Copyボタンを押すと簡単にコピーできます。

<div class="tab-wrap">
    <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">新着記事</label>
    <div class="tab-content">[new_list count=5 type=2 arrow=1]
    </div>
    <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">人気記事</label>
    <div class="tab-content">[popular_list days=30 rank=1 count=5 type=2 arrow=1]
    </div>
</div>
Copy

カスタムHTMLに貼り付ける

「カスタムHTML」ブロックに貼り付けてください。

ブロックのプレビューではCSSやショートコードが反映されません。プレビューを見たい時はページ全体をプレビューしてください。

当サイトで掲載しているソースコードについて

この記載はプライバシーポリシーからの抜粋です。

著作権およびライセンス

ブログに掲載されている、ブログ管理者(そらしど)が本来権利を有するソースコードについては、ライセンスをCC0とします。

商用・非商用を問わず自由に利用していただいて構いません。その際の連絡も不要です。

免責事項

当サイトに掲載しているカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についても当サイトはその責任を負いかねます。何卒ご理解、ご了承の上、当サイトをご活用いただきますようお願い申し上げます。

まとめ

新着記事と人気記事をタブ切り替えで設置する方法を紹介しました。

更にカスタマイズすると、タブを3つにしたり中身のコンテンツを変えたりと色んな使い方ができます。

SWELLではHTMLやCSSを必要とせず再現できます。簡単に設置したい場合はテーマやプラグインを調べてみましょう。

分からないことや質問があれば下記から気軽に連絡ください。

そらしど
そらしど

最後まで読んでいただきありがとうございました。


1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

ブログカスタマイズ関連のおすすめ記事

コメント

タイトルとURLをコピーしました