PS4 PS5 ゲーム

【CoD:BOCW】エイムレスポンス曲線の設定はどれがおすすめ?

「CoD:BOCW(コールオブデューティ・ブラックオプスコールド・ウォー)」の設定で調整できる「エイムレスポンス曲線タイプ」についてまとめました。 今作では「スタンダード」、「直線」、「ダイナミック」の3パターンの設定があるので、それぞれの特徴やおすすめ設定など参考になればと思います。   この記事には「おすすめの設定」も紹介していますが、プレイスタイルや感度によっても変わるので、実際にカスタムマッチなどで試しながら調整してみてください。 エイムレスポンス曲線タイプとは? スタンダード、直線、ダ ...

PS5 ゲーム 周辺機器

PS5で120fps出せるモニターと出せないモニター一覧

このブログでは「PS5に対応したモニターの選び方」として、リフレッシュレートや解像度などからおすすめのモニターをピックアップして紹介していますが、今回はその中でも「PS5で120fps出せるモニター」というところに焦点をおいてまとめています。   というのも、フルHDで120Hz以上に対応しているモニターを使用していても、PS5では120fpsでのプレイができないという事例が出てきました。   モニターのメーカーさんもこの内容については明確な回答ができていないような状況だったので、こち ...

ガジェット ゲーム

【モバイルモニター M505E】リモートワークやSwitchなどにおすすめ!(レビュー)

日本政府が推奨しているリモートワークという働き方がどんどん増えている状況もあり、仕事のためにモニターを用意するなど作業環境を整える方も多くなっているようです。 そんなタイミングで今回はGeChicのモバイルモニター「On-Lap M505E」を提供いただいたので、実際に様々な場面で利用したレビューを紹介しています。   実際に手元に届いたタイミングで第一に思ったことは、「リモートワーク以上にNintendo Switchに最適では?」ということ。 どうしても楽しい方に思いが動いてしまいそうですが ...

PS5 インターネット

【PS5をIPv6でプレイする】ルーターやプロバイダなど必要な設定、簡単な申込み方法について

PS5をIPv6の通信でプレイするためにはいくつかパスしなければならない項目があります! これまでPS4でIPv6でプレイされている方はとくに問題ないと思いますが、PS5を購入する機会にネット回線を見直すこともあると思うので、今回はルーターやプロバイダなどを中心に必要なものや、簡単な申込み方法などまとめてみました。 目次 PS5でIPv6をプレイするために必要なこと プロバイダへ申込み方法について 「IPv4 over IPv6」とは おすすめのプロバイダはある? ・ドコモ光の場合 ・auひかりの場合 ・ ...

インターネット

【PS5で高速通信】おすすめの光回線選びについて

PS5をプレイされる方で、もっとネット回線を速くするために光回線を見直してみようと考えられている方もいらっしゃるかと思います。 高速通信を実現するためには様々な方法がありますが、今回は根本的な部分である光回線に注目してまとめてみました。   現在自分が使っている回線がどうなのか、もう少しネット回線が速くなるのかなどについて参考になればと思いますのでぜひ読んでみて下さい。 PS5におすすめな光回線があるのかについても書いています。 目次 おすすめの光回線選びについて 選ぶポイント ・通信速度の速い ...

CoD PS4 PS5 ゲーム

【CoD:BOCW】視野角のおすすめ設定と「エイム視野角(連動・個別)」について

「Call of Duty:Black Ops Cold War(コール オブ デューティ ブラックオプス コールドウォー)」(以下CoD:BOCW)が発売されたので、改めて設定面を調整しました。 今回はその中の「視野角」について紹介しています。 視野角はどれくらいがおすすめなのか、新たに設定できる「エイム視野角」の連動と個別の違いなども画像を合わせて書いているので読んでみてください。 目次 視野角ついて ・PS4では高い視野角でのプレイはおすすめしない ・視野角の違いとメリット・デメリット エイム視野角 ...

WordPress

[WordPress]トップページの記事一覧をカテゴリー2列表示させるやり方

更新日:

自分のブログデザインを大きく変える際に行った、「トップページの記事一覧をカテゴリー別で表示させ、2列の横並びにする」というやり方をこちらに記載しています。

最近このブログのようにカテゴリーをトップページに表示させているブログをよく見かけますね。

CSSをイジったり結構難しいイメージを持たれそうですが、実際やってみるとそんなことはなく、メチャクチャ簡単です。

 

ただ、注意点としては、WordPressのテーマにWING(STINGER PRO2版やAFFINGER5)などを使っている方が簡単にできるというところなので、このテーマではない方は当てはまりません。

参考:▶WordPressテーマ 「WING(AFFINGER5)」

参考にできる部分もあるとも思うので、是非読んでみていただきたい。

カテゴリーを横並び2列にするやり方

【完成イメージ】

PC表示で「横並びのカテゴリー別の記事一覧」を作成するためには、記事を書く際の編集画面で行うので、新規追加などから編集画面を表示します。

補足

こちらのやり方はスマホ表示でもカテゴリー別に表示されますが、横2列での表示にはならないようにしています。
スマホでも横2列にしたい場合は[タグ]→[レイアウト]→[全サイズ左右50%]にすることで可能です。
※文字サイズや画像サイズなど調整する必要があるので、そちらのカスタマイズができない方は非推薦!

それではやり方の方を紹介していきます!

 

1. 横2列表示の領域を作る

上の用に記事編集画面の[タグ]→[レイアウト]→[PCとTab左右50%]で2列横並びの左右対称の領域を作ることができます。

【画像】

このような左右対称サイズの領域が作れるので、そこへカテゴリー別の記事一覧をそれぞれ詰め込んでいく形です。

2. カテゴリー別の記事一覧を作成

カテゴリーのバナーを作る

ブログ

まず先に上のようなカテゴリー記事の名称バナー的なものを作っておきます。
(左右の領域へそれぞれ直接作っても問題ないありません。)

【画像】

編集画面から[ボックスデザイン]→[バナー風ボックス]→[基本]で下のようなコードが出てきます。

【画像】

それぞれ自分で簡単に編集できるので下の項目を参考に編集してみてください。
(※項目は省いている部分もあります。)

コード内容
st-flexbox url=""""内にURLを入れることでそのページへ飛べるようになる
title="タイトル""タイトル"の部分は好みの文字に変えられる
width=""
height=""
width=""に数値を入れると横幅が調整できる
height=""に数値を入れると縦幅が調整できる
color="#fff" fontsize=""文字の色(カラーコード)と大きさ(数値)を変更できる
bgcolor=""バナー背景の色を変更できる
backgroud_image=""画像URLを入れることでバナー背景を画像で表示できる

上の設定だけである程度簡単なバナーの作成はできると思います。

作成したそれぞれの名称バナーを左右の領域へ入れておきます。

 

 記事一覧の作成

カテゴリー記事一覧は[タグ]→[記事一覧]→[カテゴリー一覧]から作成していきます。


作成すると上のようなコードができます。

記事一覧に置きたいカテゴリーを選ぶには、上のコードにある「st-catgroup cat=""」の""部分に数字を入れて指定します。

ダッシュボードの[投稿]にある[カテゴリー]のページ開き、自分が置きたいカテゴリー一覧のIDの数字を見つけて入れます。

「page=""」部分には一覧に表示したい数の数字を入力することで表示させる数を設定できます。

デフォルトであれば“0”を入れることで新着記事を表示させることも出来ます。

 

4. カテゴリー別の横並び2列完成コード

今回は噛み砕いて説明していますが、実際は表示領域へ直入れしながら編集できるため、わざわざ別々で作成して行く必要はありません。

作成したコードは下のような形です。

【画像】

上のコードで下のような2列横並びのカテゴリー別の記事一覧が表示されます。
(スマホでは縦にカテゴリ記事が表示されます)

WordPress

WordPress ブログ

インデックス登録のリクエストができない場合の別の方法

今現在「Google Search Console」の「イン ...

WordPress ブログ

WordPressの投稿画面(編集画面)にタグがないときの対処法(初心者向け)

WordPressで投稿する際「タグ(クイックタグ)」の項目 ...

WordPress ブログ

【簡単なWordPressブログの開設手順】読みながらやれば終わるよ!

アフィリエイトを始めるにあたってブログを立ち上げる必要なこと ...

ゲーム

PS4 PS5 ゲーム

【CoD:BOCW】エイムレスポンス曲線の設定はどれがおすすめ?

「CoD:BOCW(コールオブデューティ・ブラックオプスコー ...

PS5 ゲーム 周辺機器

PS5で120fps出せるモニターと出せないモニター一覧

このブログでは「PS5に対応したモニターの選び方」として、リ ...

ガジェット ゲーム

【モバイルモニター M505E】リモートワークやSwitchなどにおすすめ!(レビュー)

日本政府が推奨しているリモートワークという働き方がどんどん増 ...

「もっとみる」というリンクがあってもいいですね。

 

トップページへの表示の仕方

トップページに表示するためにはいくつか方法がありますが、一番簡単な[STINGER PRO管理]から入れる方法を説明しておきます。

トップページには新着記事一覧がすでにあると思います。

そちらの記事一覧を消す事もできますが、自分のブログでは消していません。
(新着記事一覧の2ページ以降を見れるようにしたいので)

 

すでにある新着記事一覧を削除すると、2ページ目以降の記事一覧が見れなくなるようので、自身の判断でお願いします。

[STINGER PRO管理]を開き[トップページ]を開きます。

[トップページ]画面の下の方へ「トップページのコンテンツ内の新着記事一覧を非表示にする」というのがあるので、そちらにチェックを付けて保存します。

これで非表示にすることが出来るので、同じく[トップページ]の挿入コンテンツという部分へ、先程自身が作ったコードをコピペして保存。

これで上手く反映していればOKです。

 

以上がカテゴリーを2列横並び表示にするやり方になります。

このやり方以外ではCSSをイジってやる方法もありますが、CSSをあまり触らない方にとっては時間もかかるしむしろ無謀とも言える作業かもしれません。

僕が使っているテーマとマッチする方であればめちゃくちゃ簡単に作れるので、もしこういったデザインにしたい方は試してみてください。

 

これらは記事の編集画面で出来るため、作成時にデザインが崩れる心配もない状態で作業できるので超便利です。

WINGを使っている人に限るのでそこには依存してしまいますが、同じような機能がついているテーマであれば応用して作ることも出来るのではないかなと思っています。
WordPressテーマ 「WING(AFFINGER5)」

以上です!

-WordPress

© 2020 Frontier9 Powered by STINGER