STORK19カスタム

STORK19のスマホ画面の表示を1列から2列に変える方法

STORK19を実際に触っていると、基本的な機能はバッチリ備わっていることが分かりました。と、言っても、僕自身は大した機能は使ってないので、色んな機能が備わっている必要がないのかもしれませんね(汗)

 

その中で、気になるカスタムを見つけたので、この記事で解説します。僕が気になったカスタムはスマホ画面の見え方です。

 

通常だと、スマホでの見え方は、1列で表示されます。でも、簡単な作業で2列表示が出来るんです。この記事では、スマホ画面の見え方を2列にする方法を解説します。

 

是非、最後まで読んでくださいね。

 

 

 

スマホでもPCのような画面表示にしたい

もしかしたら、あなたもスマホの画面もPCの様に表示したい・・・と思ったことはありませんか?過去の僕は、他のテーマを使っていた頃にずっと思っていました(笑)

 

でも、当時はやり方が分からなかったので諦めていました。ですが今回、取り入れたSTORK19には、スマホでの表示を変える方法があったのです。

 

カスタム前のスマホ画面

 

至ってシンプルですよね。字も大きくて見やすいです。本来なら、この画面でも問題ないのですが・・・でも、パソコンと同じ画面をスマホで見てみたいとの思いが強くなりました。

 

実際に簡単カスタムをすると、こんな感じになりました。

 

ブログ記事が2列表示になることで、パソコンの画面と同じ見え方になりました。サイドバーは記事の下に表示されます。では、次項で、カスタムの手順を解説しますね。

 

 

 

スマホ表示2列化作業手順

最初に準備が必要です。準備といっても、パソコンでの表示を「カード型」に設定するだけです。では早速、作業してみましょう。

 

①ダッシュボードにアクセスします。

 

②ダッシュボードの左サイドバーより「外観」⇒「カスタマイズ」をクリックします。

 

③画面が切り替わります。

 

④「記事一覧レイアウト設定」ボタンをクリックします。

 

⑤設定画面に切り替わります。

 

1.[PC]トップページ記事レイアウトの項目の「カード型」にチェックをいれます。

2.入力完了後「公開」ボタンをクリックします。

 

ここまでの作業で準備は完了です。続いてスマホ表示の設定に入ります。

 

 

 

スマホで2列表示する設定

設定と言っても、作業そのものはすごく簡単なので安心してくださいね。

 

①ダッシュボードにアクセスします。

 

②カスタマイズ画面に入り替わります。

 

③CSS欄(赤枠)に次のコードを貼りつけます。(コピペ可)

@media only screen and (max-width: 480px) {
.archives-list.card-list .post-list {
width: calc(50% - .5em);
}
.archives-list.card-list a {
padding: .5em;
}
.archives-list.card-list a .eyecatch {
margin: -.5em -.5em .5em;
}

/*投稿タイトルのフォントサイズを調整*/
.archives-list.card-list a .entry-title {
font-size: 85%;
}
}

 

④最後に「公開」ボタンをクリックします。

 

 

ここまでの作業で、スマホでの表示が2列になりました。あなたにスマホで確認してみてくださいね。

 

 

 

STORK19ならではのカスタマイズ

たかが、スマホの表示・・・ですが、この辺りのカスタムは好きな人にはたまらないと思います。他の有料・無料テーマでもスマホ表示のカスタマイズは見たことがありませんでした。

 

今回の作業で初体験です(笑)他にも、面白そうなカスタム・他のテーマと差別化できそうな機能・カスタムがあれば、随時お伝えしますね。

 

WordPressのテーマ「STORK19」

 

<a href="https://px.a8.net/svt/ejp?a8mat=2ZL6YN+D15UQA+3PSE+64JTD" rel="nofollow">
<img src="https://www23.a8.net/svt/bgt?aid=180707711788&amp;wid=013&amp;eno=01&amp;mid=s00000017339001029000&amp;mc=1" alt="" width="728" height="410" border="0" /></a>
<img src="https://www17.a8.net/0.gif?a8mat=2ZL6YN+D15UQA+3PSE+64JTD" alt="" width="1" height="1" border="0" />

 

 

今回のまとめ

今回は「STORK19のスマホ画面の表示を1列から2列に変える方法」をテーマに解説しました。作業手順も図解入りでお伝えしました。いかがでしたか?

 

STORK19はモバイルファーストに対応したテーマです。スマホでの見え方にも拘ったのでしょうね。カスタムも簡単なので、STORK19ユーザーで、まだ試していない人・・・この機会に是非、試してくださいね。

 

 

 

編集後記

過去に、2列表示のテーマを使ったことがあるのですが、スマホで表示すると1列表示にしかなりませんでした。どことなく残念な気持ちになったことを思い出しました(笑)

 

WordPressは常に進化しています。今、欲しい機能がなかったとしても、いつか新たな機能に出会えそうですね。もし、あなたがまだ、WordPressを始めていないのであれば、この機会に始めてみませんか?

 

使っているだけでワクワクできるブログサービスは滅多にないので、お勧めしておきますね。

 

 

では、今日も素敵な情報発信がんばりましょう。最後まで読んで頂きありがとうございました。このブログの感想・ご意見・質問・相談は コチラ からお願いしますね。

 

 

にほんブログ村 小遣いブログ ブログアフィリエイトへ

あなたの応援に感謝します♪

-STORK19カスタム

Copyright© ブログ武器 Ver.2 , 2020 All Rights Reserved Powered by AFFINGER5.