開発

「STINGER PLUS2」のオリジナル子テーマを無料配布!PCのトップと一覧をカード型デザインに

更新日:

STINGER PLUS2 Child Card

WordPressをインストールしてブログをはじめようとする時に悩ましいのがテーマの選択です。できれば有料のテーマを使いたいところですが、最初はコストをかけずに様子をみたいという人も多いと思います。

そこで無料のテーマを探してみると、やはり知名度が高くSEOにも強いとされているSTINGERが無難な選択となります。

STINGER PLUS+2ダウンロード

実際に「STINGER PRO」のお試し版である「STINGER PLUS2」をテーマに設定してみると最近流行のカード型に比べてやや古い印象を受けます。せっかく無料で素晴らしいテーマなので何とかカード型にできないものだろうか、ということでカスタマイズすることにしました。当サイトをカスタマイズする際に使用したファイルを子テーマをとしてダウンロードできるようにしています。

「STINGER PLUS2」のPCトップと一覧ページをカード型に変更します。サイドメニューも若干変更していますのでお好みで調整してください。スマートフォンと関連記事などの表示は初期状態の方が一覧性がよかったため、今回は特に変更していません。

※カードに「投稿日」「更新日」を表示すると、レイアウトが崩れることが発覚していますので日付を表示したい方はご注意ください(修正したいとは思っています)

デモは当サイトをご覧ください。左上のロゴマークからトップページに遷移できます。一覧ページはメニュー項目を選択するとご覧になれます。

有料テーマを使う人は「AFFINGER5」や「STINGER PRO2」を入れて子テーマを「JET」にすることでデザインや機能的にも優れたブログを構築することができます。

また、単体でカード型のテーマが導入できるSANGOもおしゃれなテーマとして人気です。

どうしても無料テーマにこだわる人には話題のCocoonがおすすめです。スタイリッシュかつ機能も豊富です。

728_90

アイキャッチ画像について

アイキャッチ画像の縦横比につきましては4:3を基準としています。画像をカード幅にいっぱいに広げたうえで、高さが足りない部分は空白、はみ出した部分は自動的にトリミングされます。アイキャッチ画像のサイズは640×480を想定しています。

カード部分のアイキャッチ画像は従来のサムネイルでは解像度が足りなかったため、一回り大きなものに変更しています。それによって読み込みが多少重くなる可能性がありますのでご注意ください。

mixhost

メニュー

子テーマに含まれているのはメニューの高さ変更とフォントサイズの調整のみとなります。メニューをブラウザの幅いっぱいに広げ、グラデーションを解除するためには外観→カスタマイズ→追加 CSSから下記のようなコードを入れてください。

#st-menuwide {
background: #4fafe7;
border: 1px solid #4fafe7;
}
#st-menuwide ul li {
border-right-color: #fff;
}
#st-menubox {
background: #4fafe7;
}

上記にはメニュー周りの境界線を変更するコードも含まれています。色部分はご自身のサイトに合わせてカスタマイズしてください。

使用方法

必ず「STINGER PLUS2」の親テーマをインストールしたうえで「STINGER PLUS2 Child Card」をインストールして有効にしてください。
親テーマは「バージョン: 20171207」に対応しています。
問題が生じた場合は「STINGER PLUS2 Child」を有効にすれば元に戻りますが、念のためバックアップをとってから作業してください。

WordPress専用サーバー

ダウンロード

下記からダウンロードしてください。ダウンロードしたZIPファイルを解凍せずにWordPressのテーマアップロードからファイルを指定してください。
※ダウンロードする際に警告が表示された場合は矢印をクリックして継続してください。

免責事項

・「STINGER PLUS2」の子テーマ「STINGER PLUS2 Child Card」は当サイトをカスタマイズするための副産物として生み出されたものです。「STINGER PLUS2」非公式となりますのでご注意ください。
・当ページに記載している機能は100%保障するものではありません。ご自身でのカスタマイズが必要になる場合がありますのであらかじめご了承ください。
・「STINGER PLUS2 Child Card」を使用したことによって生じた如何なる不具合、障害、損害、その他のトラブルに関しては、当サイトの管理人、および関係者は一切の責任を負いません。

-開発
-

Copyright© Workerブログ|仕事を続けるための工夫 , 2020 All Rights Reserved Powered by STINGER.