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

WHITE TIGERのエディタ・文字装飾などの使い方

WHITE TIGERは基本的にシンプルなので、材料があまりありません。逆に言えば見にくい記事にならないので初心者向けです。

記事投稿の前に初期設定は済ませておいてくださいね。

White-Tiger初期設定
White-Tiger初期設定
White-Tigerの初期設定です。ホントに簡単に終わってしまうので、最初に設定しておいてください。以下の三点の作業だけです。 レイアウト OGP・Twitterカードアクセス解析 テーマ変更の場合 ※テーマ変更の場合はサムネイルサイズが崩れますので、必ず再生成を行ってください。 設定ページにアクセス 管理画面左の項目から「White Tiger設定」をクリックしてください。 すると以下の画像のように設定ページが開きます。赤枠で囲った三項目を設定していきましょう。 レイアウト設定 記事タイプ・サイドバー まず、レイアウトの設定は好みの記事一覧タイプとサイドバーの位置を選んでください。 ロゴ画像 ロゴ画像にする場合は「画像を選択」をクリックしてください。 後は、アップロードするかメディアライブラリの画像を選択すれば、タイトルと置き換わります。 カラー設定 カラー設定はお好みで変更してください。最後に設定を保存でデータベースに保存されます。 OGP・Twitterカードの設定 まず、OGPのタブを選択します。 OGPタグを有効にするFacebookアプリのIDを入力Twitterのアカウントを入力Twitterカードの種類を選択ホームのイメージを選択 最後は忘れずに設定を保存してください。 アクセス解析 アクセス解析はGoogleアナリティクス、タグマネージャー、サーチコンソールが設定できます。こちらはスクリプトを埋め込んであるので、入力するだけです。 エディタの説明はこちらから確認をお願いします。

さてエディタの使い方ですが、文字だけだと伝えにくいこともあったのでgif動画像で紹介します。

アンダーマーカー

アンダーマーカーはもともとストロングで囲っています。強調文字なのでHTML的に正解だと思います。

使い方はいたって簡単です。以下のように文字を選択してスタイルからアンダーマーカーをクリックするだけです。

ボックス

ボックスもマーカーと同じように使えます。

このボックス「ぴよこボックス」については以下の記事を参考に追加してみてください。
ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞ
ぴよこボックスが可愛過ぎるので紹介!投稿の補足情報などにどうぞ
どうも!柄にもなく可愛いの作りました。気持ち悪いとか言わないでね。今回ぴよこをお借りしたイラストやさんがぴよたそです。 今回の完成イメージはこんなやつですん(テーマ配布終了のお知らせで使用) ※ベータ版の配布は終了しました。これから完成版を発表しようと思いますので、今しばらくお待ちください。 けんじ ジャガイモみたいでかわいい!! こちらのサイトのイラストを使ってボックスを使ったら「あら!素敵だわ!!なシリーズの紹介」スタートです。 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は内部リンクをブログカードにできます。以下簡単な説明です。

プレビューするとこのような表示になります。

カラム

カラム操作もできます。画像でも文字でも二分割にします。

吹き出し

吹き出しはユーザープロフィールの画像がデフォルトで表示されるようになっています。

もちろん画像を変更することもできます。

キーボード風

あとおまけでキーボード風のスタイルもあります。

黒色も用意しましたのでお好みでご使用ください。

とりあえず、このぐらいあれば普通に書く分には問題ないかなと思います。

スポンサーリンク

この記事をかいた人

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