MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

初心者に優しい!!無料WordPressテーマWHITE TIGERの紹介

ベータ版の配布終了から大変長らくお待たせいたしました!!誰でも簡単に使えるテーマでありたい。そう願いを込めて前回よりも格別シンプルに生まれ変わりました!!当然無料なので、スタートテーマに良かったら使ってみてください。

2カラムでシンプル!ほぼ初心者専用という新感覚のテーマです。これからブログを始められる方、もしくは始めたばかりの初心者の方にはオススメ!!

けんじ

僕でも分かる範囲ならば全力でサポートさせていただきますので、分からない事や要望をお聞かせいただければと思います。

無料WordPressテーマWHITE-TIGERの完成版の発表です。以下テーマの特徴を簡単に説明させていただきます。

今までガツガツカスタマイズされてきた方や有料テーマをお使いの方には少し物足りない内容かも知れません。

様々な端末に対応したレスポンシブデザイン

パソコンデザイン

タブレット端末デザイン

スマホデザイン

横向きも見やすく調整しました。

選べる4種類の記事一覧タイプ

これらは指先ひとつでチェンジできます。

プラグインなしで取り組んだ機能

とにかく気軽に簡単に始めて頂きたいので最低限の取り組みをさせて頂きました。

目次の自動表示

見出しから目次を自動表示されますので初めての方でも意識した書き方ができると思います。目次は最初のh2手前に表示されます。

閉じていると意味がないと判断したので開閉式はやめました。

オリジナルのシェアボタンを配備

デフォルトで記事上のアイキャッチ画像の下と記事下に二箇所表示されます。

公式のシェアボタンでも良いのですが、公式ボタンが読み込みが遅いゆえページビューにも響いてきます。なのでデザインはよくある主流のものですが最低限のボタンを用意させて頂きました。

※シェアカウントについて
SNS Count Cacheに対応していますので、インストールして有効化すればシェアカウントを高速で取得する事ができます。

プロフィールの表示

White-Tigerではデフォルトで記事下にユーザープロフィールを表示できるようになっております。

ウィジェットでPHP使えば簡単にサイドバーにも表示できます。

以下を参考に設定してみてください。

PHPがウィジェットで使えるWordPressプラグインがヤバい!!です。
PHPがウィジェットで使えるWordPressプラグインがヤバい!!です。
こんなプラグインあったの!?もっと早く教えてよぉ~眼鏡市場さん。 全米が泣くぐらいグレートなプラグインだわ\(^_^)/ステキ! ていうのはね、以前にユーザープロフィールをサイドバーに表示する方法を書いたのです。 そいで、ウィジェットにしてしまおうとfunctions.phpをいじってたのですが、コレが結構めんどくさいんですよね。 なのでめんどくさがりのケンちゃんは考えました。 けんじ そうだ!!ショートコードで呼び出そう。 でもその後すぐに、php使えるプラグインあるよって教えてもらったんです。(早く教えてほしかった。 そろそろ本題に入りますw プラグインのインストール もうこれは、毎度おなじみのパターンなのでサクッとカリッと割愛させていただきます。 プラグイン名「PHP Code Widget」で検索してインストールしてください。 んで、プラグインを有効化すると外観のウィジェットに「PHPコード」が追加されています。それを使います。 使い方は簡単で、そのまま打ち込むべし!! です。 ここでお開きはあまりにも早いので、とりあえず冒頭の方でも私がほざいてたプロフィールを表示してみます。 サイドバーにプロフィールを表示する HTMLでやればいいかも知れませんが、ユーザー設定のプロフィールがせっかく有るので、それを表示した方が賢明かなと思います。 とりあえず、ソースはこちらに載っているので割愛させていただきます。 まず、外観のウィジェットを開き、ナウいウィジェットのPHPコードをサイドバーにパイルダーオン(設置)します。 これでホントにそのまま書いちゃってオッケーです。書きます。 当然ですがこうなります。画像使いまわしで、さーせん\(^_^)/ これだと好きな場所に表示できるので便利です。 スマホとパソコンで違う表示にしたい場合の条件分岐なんかも、こんな感じで書いてやれば余裕ですね。 <?php if ( wp_is_mobile() ) : ?> // スマホで表示させたい内容 <?php else: ?> // PCで表示させたい内容 <?php endif; ?> あと、アドセンスのポリシー違反にかかりそうな記事の時に条件分岐使えますね。カテゴリー別にするにはイイ感じ。やった!!ワイン以外のおしゃけも、みんな大好き喫煙系の記事なんかが書き放題でやんす。 条件分岐タグはWordPress Codexに載っているので参考にしてみてね。 こちらからは以上でございやす。(^ω^)ノシ

ブログカード(内部リンク)

こういった内部リンクのブログカードがショートコード一発で表示できます。

初心者に優しい!!無料WordPressテーマWHITE TIGERの紹介
初心者に優しい!!無料WordPressテーマWHITE TIGERの紹介
ベータ版の配布終了から大変長らくお待たせいたしました!!誰でも簡単に使えるテーマでありたい。そう願いを込めて前回よりも格別シンプルに生まれ変わりました!!当然無料なので、スタートテーマに良かったら使ってみてください。 2カラムでシンプル!ほぼ初心者専用という新感覚のテーマです。これからブログを始められる方、もしくは始めたばかりの初心者の方にはオススメ!! けんじ 僕でも分かる範囲ならば全力でサポートさせていただきますので、分からない事や要望をお聞かせいただければと思います。 無料WordPressテーマWHITE-TIGERの完成版の発表です。以下テーマの特徴を簡単に説明させていただきます。 今までガツガツカスタマイズされてきた方や有料テーマをお使いの方には少し物足りない内容かも知れません。 様々な端末に対応したレスポンシブデザイン パソコンデザイン タブレット端末デザイン スマホデザイン 横向きも見やすく調整しました。 選べる4種類の記事一覧タイプ これらは指先ひとつでチェンジできます。 プラグインなしで取り組んだ機能 とにかく気軽に簡単に始めて頂きたいので最低限の取り組みをさせて頂きました。 目次の自動表示 見出しから目次を自動表示されますので初めての方でも意識した書き方ができると思います。目次は最初のh2手前に表示されます。 閉じていると意味がないと判断したので開閉式はやめました。 オリジナルのシェアボタンを配備 デフォルトで記事上のアイキャッチ画像の下と記事下に二箇所表示されます。 公式のシェアボタンでも良いのですが、公式ボタンが読み込みが遅いゆえページビューにも響いてきます。なのでデザインはよくある主流のものですが最低限のボタンを用意させて頂きました。 ※シェアカウントについてSNS Count Cacheに対応していますので、インストールして有効化すればシェアカウントを高速で取得する事ができます。 プロフィールの表示 White-Tigerではデフォルトで記事下にユーザープロフィールを表示できるようになっております。 ウィジェットでPHP使えば簡単にサイドバーにも表示できます。 以下を参考に設定してみてください。 ブログカード(内部リンク) こういった内部リンクのブログカードがショートコード一発で表示できます。 ブログカードのボタンをクリックしてブログカードにしたいURLと置き換えるだけです。 厳選されたウィジェットエリア 多すぎるのも初心者の方にとっては難しいテーマに感じてしまいます。なので今回は最も収益の高い位置だけに厳選させて頂きました。 初心者にありがちな広告だらけを避けました。 あまり増やすのは、クリック単価の減少とページの読み込みスピードの低下は避けられませんのでオススメは出来ませんが、希望が有れば追加はさせていただきます。 SEOを意識 無駄な重複コンテンツをインデックスさせない このテーマでは、タグや日付、検索結果などインデックスには、不必要なページを避けるためにnoindexに設定しております。 特に重要な1ページ目だけをindexさせ2ページ3ページ以上の同じ記事をインデックスさせないようにしております。 アクセス解析コードの導入が簡単に出来る プラグインを別途導入しなくても設定からGoogleアナリティクスのトラッキングコードやサーチコンソールのサイト所有権を貼るだけでご使用いただけます。 始めたばかりの僕もこれには結構泣かされました。面倒なスクリプトをテンプレートに貼らなくても簡単にご使用いただけるよう配慮いたしました。 OGP・Twitter Cardsがデフォルトで対応 デフォルトで出力されますので、特にプラグインの必要もございません。 設定もいたって簡単です。 記事毎にno-indexなどのメタ設定が出来る 記事毎にメタ設定ができるカスタムフィールドを完備しました。 こちらはMORIAWASE(モリアワセ)を運営されているシェフ (@chef_moriawase)さんのこころよい対応で以前よりもグレードアップしたものです。 関連記事の表示 もちろん関連記事もプラグインなしで表示できます。デザインは今流行りのタイプにしました。 WHITE TIGERのメリット・デメリット メリット このテーマのメリットはとにかく設定が少なくて楽。ブログを書く材料も厳選されていて迷わず書き出せる。始めたての初心者にはもってこいです。あと他のテーマとの違い・強味はフォーラムに書き込んでいただけたら、ある程度はサポートできます。 あと、スクリプトはレンダリングブロックを避け、HTMLを圧縮してます。プラグインなどを省けば結構高速表示します。 これは.htaccessで圧縮・キャッシュし子テーマでCSSを圧縮・キャッシュを適用したときの画像です。 デメリット デメリットですが、設定が少ないだけに細かいところがカスタマイズ出来ない。ブログを書く材料が厳選されてるので、投稿にオシャレなどをこだわる方には不向き。 素人作の無料テーマなので完ぺきでは無い。こういったところでしょうか。 ぴよこボックスについて 最近作ったひよこのボックスはエディタにスタイル選択ボックスに組み込んでいます。 こちらから画像をダウンロードしてURLを入れていただいたら使えるようになっています。 WHITE TIGERのダウンロード 親テーマのダウンロード white-tigerのダウンロード 子テーマのダウンロード white-tiger-childのダウンロード ダウンロードしたZIPファイルをWordPress管理画面からZIPファイルのままアップロードしてください。 ※おきまりですが、※WHITE-TIGERを使用したことにより損害が生じた場合は責任を負えませんので、使用は自己責任でお願いいたします。 初期設定やエディタの説明はこちらから確認ください。 また、修正や機能追加などがあればバージョンアップを考えております。

ブログカードのボタンをクリックしてブログカードにしたいURLと置き換えるだけです。

厳選されたウィジェットエリア

多すぎるのも初心者の方にとっては難しいテーマに感じてしまいます。なので今回は最も収益の高い位置だけに厳選させて頂きました。

初心者にありがちな広告だらけを避けました。

あまり増やすのは、クリック単価の減少とページの読み込みスピードの低下は避けられませんのでオススメは出来ませんが、希望が有れば追加はさせていただきます。

SEOを意識

無駄な重複コンテンツをインデックスさせない

このテーマでは、タグや日付、検索結果などインデックスには、不必要なページを避けるためにnoindexに設定しております。

特に重要な1ページ目だけをindexさせ2ページ3ページ以上の同じ記事をインデックスさせないようにしております。

アクセス解析コードの導入が簡単に出来る

プラグインを別途導入しなくても設定からGoogleアナリティクスのトラッキングコードやサーチコンソールのサイト所有権を貼るだけでご使用いただけます。

始めたばかりの僕もこれには結構泣かされました。面倒なスクリプトをテンプレートに貼らなくても簡単にご使用いただけるよう配慮いたしました。

OGP・Twitter Cardsがデフォルトで対応

デフォルトで出力されますので、特にプラグインの必要もございません。

設定もいたって簡単です。

記事毎にno-indexなどのメタ設定が出来る

記事毎にメタ設定ができるカスタムフィールドを完備しました。

こちらはMORIAWASE(モリアワセ)を運営されているシェフ (@chef_moriawase)さんのこころよい対応で以前よりもグレードアップしたものです。

関連記事の表示

もちろん関連記事もプラグインなしで表示できます。デザインは今流行りのタイプにしました。

WHITE TIGERのメリット・デメリット

メリット

このテーマのメリットはとにかく設定が少なくて楽。ブログを書く材料も厳選されていて迷わず書き出せる。始めたての初心者にはもってこいです。あと他のテーマとの違い・強味はフォーラムに書き込んでいただけたら、ある程度はサポートできます。

あと、スクリプトはレンダリングブロックを避け、HTMLを圧縮してます。プラグインなどを省けば結構高速表示します。

これは.htaccessで圧縮・キャッシュし子テーマでCSSを圧縮・キャッシュを適用したときの画像です。

デメリット

デメリットですが、設定が少ないだけに細かいところがカスタマイズ出来ない。ブログを書く材料が厳選されてるので、投稿にオシャレなどをこだわる方には不向き。

素人作の無料テーマなので完ぺきでは無い。こういったところでしょうか。

ぴよこボックスについて

最近作ったひよこのボックスはエディタにスタイル選択ボックスに組み込んでいます。

こちらから画像をダウンロードしてURLを入れていただいたら使えるようになっています。

ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞ
ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞ
どうも!柄にもなく可愛いの作りました。気持ち悪いとか言わないでね。今回ぴよこをお借りしたイラストやさんがぴよたそです。 今回の完成イメージはこんなやつですん(テーマ配布終了のお知らせで使用) ※ベータ版の配布は終了しました。これから完成版を発表しようと思いますので、今しばらくお待ちください。 けんじ ジャガイモみたいでかわいい!! こちらのサイトのイラストを使ってボックスを使ったら「あら!素敵だわ!!なシリーズの紹介」スタートです。 Photo by Tim Umphreys on Unsplash 著作権的なアレ 個人的に使うとかブログなどで紹介する分には問題ないようですが、再配布がダメな感じだったので問い合わせました。以下ぴよたそ様の利用規約の気になるところです。 商用利用の方:素材の再配布、転売等は以下をご参考に商用利用や素材を加工しての利用はもちろんOK。クレジットの記載も不要で、何点ご利用頂いても大丈夫です。ただし未加工(もしくはほぼ手が加わっていない)イラストの著作権の主張、転売はご遠慮ください。(何に使ってもらってもOKですが、元イラストの著作権は放棄しておりません) ぴよたそ利用規約 | ゆるくてかわいい無料イラスト素材屋「ぴよたそ」 お問い合わせの結果、結論的に言うと、パーツとして作成したものを配布してユーザーに利用していただくものは再配布としないとの許可を得ました。 お問い合わせのメール内容です。 ということで、ぴよこボックスのパーツとして配布できるようです。次回配布予定のテーマにも組み込む予定です。 あ、あとぴよこボックスってなんやねん!震えるぅ~。そう思った方も300人はいてると思いますが、僕が勝手に命名しただけでやんす。 ぴよこボックスのスタイル とりあえず、5種類の紹介です。 ごめんね的なやつ ケンちゃんが気に入って使ってるやつですね。ごめんねと書けば何となく許してしまう的な感じです。 <div class="piyo-info piyo-info_sorry">ここが文章ですよ。</div> .piyo-info_sorry { background: #fffcdd; border: 1px solid #ff9658; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_sorry:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 補足説明てきな さっきも出て来ましたが、投稿の補足説明なんかに使えそうなやつです。ていうか使って下さい。 <dip class="piyo-info piyo-info_suppleme">ここが文章ですよ。</dip> .piyo-info_suppleme { background: #f5fcff; border: 1px solid #00acee; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_suppleme:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } ここ注目てきな アテンションプリーズ!ってやつです。functions.phpの編集は危険なので、バックアップは必ずとっておいてね。みたいな使い方でしょうか。 <div class="piyo-info piyo-info_attention">ここが文章ですよ。</div> .piyo-info_attention { background: #ffe9e9; border: 1px solid #bf0000; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_attention:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 何でもいけそうなやつ ただただ無表情です。逆に何でもOKなオールマイティー。文中で本題からずれたときにでも使えちゃう。ザキヤマてきなやつ。 <div class="piyo-info piyo-info_nature">ここが文章ですよ。</div> .piyo-info_nature { background: #f0fff0; border: 1px solid #7c7; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_nature:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 寝てるやつ よくわからんけど、たまにはゆっくり休んでもいいよね。ブログばっかやってると肩こっちゃうよ的な? <div class="piyo-info piyo-info_sleeping">ここが文章ですよ。</div> .piyo-info_sleeping { background: #fbfbfb; border: 1px solid #666; padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info_sleeping:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; background-image: url(ここに画像のURLを入れてください。); width: 100px; height: 100px; background-size: cover; background-position: center; } 全部まとめる場合 因みに全部まとめるとこんな感じでCSSは省略できます。 .piyo-info { padding: 25px 20px 25px 125px; border-radius: 4px; position: relative; display: block; margin: 1em 0; } .piyo-info:before { position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; content: ""; display: inline-block; width: 100px; height: 100px; background-size: cover; background-position: center; } /*sorry*/ .piyo-info_sorry { background: #fffcdd; border: 1px solid #ff9658; } .piyo-info_sorry:before { background-image: url(ここにURLを入れてください。); } /*補足*/ .piyo-info_suppleme { background: #f5fcff; border: 1px solid #00acee; } .piyo-info_suppleme:before { background-image: url(ここにURLを入れてください。); } /*attention*/ .piyo-info_attention { background: #ffe9e9; border: 1px solid #bf0000; } .piyo-info_attention:before { background-image: url(ここにURLを入れてください。); } /*nature*/ .piyo-info_nature { background: #f0fff0; border: 1px solid #7c7; } .piyo-info_nature:before { background-image: url(ここにURLを入れてください。); } /*sleeping*/ .piyo-info_sleeping { background: #fbfbfb; border: 1px solid #666; } .piyo-info_sleeping:before { background-image: url(ここにURLを入れてください。); } ちょっとした文字をキャプションみたいに入れても可愛いです。 スタイルはこんな感じです。適当に変更して使ってね。 .piyo-info.piyo-info_attention:after { content: "注目!!"; top: -12px; left: -13px; font-weight: bold; position: absolute; transform: rotate(-17deg); color: #bf0000; font-size: 21px; background: #ffffff; border: 1px solid #bf0000; padding: 1px 6px; border-radius: 4px; } 画像のURL確認 まず以下の画像をダウンロードしてください ぴよこボックスの素材ダウンロード あくまでもこのパーツとしてです。画像は圧縮リサイズ済みです。 で、ZIPなので解凍してWordPressのメディアに新規追加します。 アップロードが終わったら、ライブラリから編集をクリックします。 右側を見れば確認できるのでURLをコピーします。 後は、コピーしたURLをCSSのurl(ここに入れます)にいれてください。 WordPressの場合は、タグ登録しておくと便利です。こちらで説明してるので参考にしてみてね。 公式ぴよたそのシブタク🐣(@pochimin02)さんからツイート頂きました。Yes!✌Yes!✌でもケンちゃんSNSの使い方わからない…(泣)逆輸入的な感じ。 おお!ぴよたそのご紹介ありがとうございます~。ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞhttps://t.co/67bDd44e71 — シブタク🐣 (@pochimin02) 2018年8月27日 以上!!ひよこのお祭りでした。(`・ω・´)ゞ

WHITE TIGERのダウンロード

親テーマのダウンロード

white-tigerのダウンロード

子テーマのダウンロード

white-tiger-childのダウンロード

ダウンロードしたZIPファイルをWordPress管理画面からZIPファイルのままアップロードしてください。

※おきまりですが、※WHITE-TIGERを使用したことにより損害が生じた場合は責任を負えませんので、使用は自己責任でお願いいたします。

初期設定やエディタの説明はこちらから確認ください。

White-Tiger初期設定
White-Tiger初期設定
White-Tigerの初期設定です。ホントに簡単に終わってしまうので、最初に設定しておいてください。以下の三点の作業だけです。 レイアウト OGP・Twitterカードアクセス解析 テーマ変更の場合 ※テーマ変更の場合はサムネイルサイズが崩れますので、必ず再生成を行ってください。 設定ページにアクセス 管理画面左の項目から「White Tiger設定」をクリックしてください。 すると以下の画像のように設定ページが開きます。赤枠で囲った三項目を設定していきましょう。 レイアウト設定 記事タイプ・サイドバー まず、レイアウトの設定は好みの記事一覧タイプとサイドバーの位置を選んでください。 ロゴ画像 ロゴ画像にする場合は「画像を選択」をクリックしてください。 後は、アップロードするかメディアライブラリの画像を選択すれば、タイトルと置き換わります。 カラー設定 カラー設定はお好みで変更してください。最後に設定を保存でデータベースに保存されます。 OGP・Twitterカードの設定 まず、OGPのタブを選択します。 OGPタグを有効にするFacebookアプリのIDを入力Twitterのアカウントを入力Twitterカードの種類を選択ホームのイメージを選択 最後は忘れずに設定を保存してください。 アクセス解析 アクセス解析はGoogleアナリティクス、タグマネージャー、サーチコンソールが設定できます。こちらはスクリプトを埋め込んであるので、入力するだけです。 エディタの説明はこちらから確認をお願いします。
WHITE TIGERのエディタ・文字装飾などの使い方
WHITE TIGERのエディタ・文字装飾などの使い方
WHITE TIGERは基本的にシンプルなので、材料があまりありません。逆に言えば見にくい記事にならないので初心者向けです。 記事投稿の前に初期設定は済ませておいてくださいね。 さてエディタの使い方ですが、文字だけだと伝えにくいこともあったのでgif動画像で紹介します。 アンダーマーカー アンダーマーカーはもともとストロングで囲っています。強調文字なのでHTML的に正解だと思います。 使い方はいたって簡単です。以下のように文字を選択してスタイルからアンダーマーカーをクリックするだけです。 ボックス ボックスもマーカーと同じように使えます。 このボックス「ぴよこボックス」については以下の記事を参考に追加してみてください。 ブログカード(内部リンク) White-Tigerは内部リンクをブログカードにできます。以下簡単な説明です。 プレビューするとこのような表示になります。 カラム カラム操作もできます。画像でも文字でも二分割にします。 吹き出し 吹き出しはユーザープロフィールの画像がデフォルトで表示されるようになっています。 もちろん画像を変更することもできます。 キーボード風 あとおまけでキーボード風のスタイルもあります。 黒色も用意しましたのでお好みでご使用ください。 とりあえず、このぐらいあれば普通に書く分には問題ないかなと思います。

また、修正や機能追加などがあればバージョンアップを考えております。

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。