格ゲーのコマンドって矢印がかけないんですよね。そうブログとかで書くと斜めとかがいろいろ変わるんですよね。ほんと文字に統一性がなくなる。
そこで思ったんですよね。文字回転させればよくね??と。
画像を使うのもいいんですが重くなったり作業がめんどくさくなったり。
今回はwordpressで使えるショートコードまで書きました。私は専門じゃないのでわかる方もっときれいにしてください。
基本的に自分用なのでwordpressのことしか考えていませんが、テーマなど関係なく行けるとは思います。
がんがん発展させて下さい!ではさくっと紹介!!
まずはソース公開!
最初はCSS。これはIMEの矢印も、アイコンフォントの矢印も共通です。
純粋に回転させると線がバラバラで気持ち悪いので反転など使ってそろえました!!
各環境で違いがある可能性もあるのでうまく調整して下さい。
.rotate1 {
display: inline-block;
transform: rotateY(180deg) rotate(45deg)
}
.rotate2 {
display: inline-block;
transform: rotate(90deg)
}
.rotate3 {
display: inline-block;
transform: rotate(45deg)
}
.rotate4 {
display: inline-block;
transform: rotateY(180deg)
}
.rotate6 {
display: inline-block;
transform: rotate(0deg)
}
.rotate7 {
display: inline-block;
transform: rotateX(180deg) rotateY(180deg) rotate(45deg)
}
.rotate8 {
display: inline-block;
transform: rotate(90deg) rotateY(180deg);
}
.rotate9 {
display: inline-block;
transform: rotateX(180deg) rotate(45deg)
}
.command {
display: inline-block;
}
では続いてPHPこれはショートコードを使うためのものです。
[ 2 ] [ 3 ] [ 6 ] と書けばが出ます。先に普通の矢印。→これですね。これを回します。
function arrow1() {
return '→';
}
add_shortcode('1', 'arrow1');
function arrow2() {
return '→';
}
add_shortcode('2', 'arrow2');
function arrow3() {
return '→';
}
add_shortcode('3', 'arrow3');
function arrow4() {
return '→';
}
add_shortcode('4', 'arrow4');
function arrow6() {
return '→';
}
add_shortcode('6', 'arrow6');
function arrow7() {
return '→';
}
add_shortcode('7', 'arrow7');
function arrow8() {
return '→';
}
add_shortcode('8', 'arrow8');
function arrow9() {
return '→';
}
add_shortcode('9', 'arrow9');
これをfunction.phpにコピペしてください。
次は私が使っているアイコンフォントVisual Icon Fontsを利用したものです。プラグイン形式なので導入は簡単です。
もととなる文字が違うので、ソースが変わります。しかしスイッチは同じなので同時に使わないようにして下さい。
どちらがいいかお好みでどうぞ。
function arrow1() {
return '';
}
add_shortcode('1', 'arrow1');
function arrow2() {
return '';
}
add_shortcode('2', 'arrow2');
function arrow3() {
return '';
}
add_shortcode('3', 'arrow3');
function arrow4() {
return '';
}
add_shortcode('4', 'arrow4');
function arrow6() {
return '';
}
add_shortcode('6', 'arrow6');
function arrow7() {
return '';
}
add_shortcode('7', 'arrow7');
function arrow8() {
return '';
}
add_shortcode('8', 'arrow8');
function arrow9() {
return '';
}
add_shortcode('9', 'arrow9');
以上です。
使い方
アイコンフォント以外はコピペするだけです。
CSSとPHP間違えないようにして下さい。
詳しいことは餅は餅屋ということですでにたくさん解説されているので省きます。
function.phpは間違えるとサイトが表示されなくなります。念の為元のソースは保存しておいて下さい。
一番下に追加すればいいだけなので難しくないでしょう。
CSSはすでに設定しているものと干渉する可能性があります。と言っても回転なんて単語そうそう使わないと思うのですぐ判明すると思います。
内容としては右矢印をベースに回転させています。応用する場合は、右矢印を用意するとおいしく料理できると思います。
作った経緯
最後に少し書かせていただこうと思います。
格闘ゲームって新規が難しく、すぐやめていくという話を聞きます。
勝てない対戦ゲームや成長を体感できないゲームって面白くないよね。私はそう思います。
そこで上手くなろうとしてもサイトに書いてあるのは41236Pという文字。
これに加えてフレームの数字やダメージ等。正直数字だらけで直感的でないし読みにくかったりわかりにくかったりします。
つまりやる気が強くない人や細かいことが苦手な人はここでリタイアします。だってわかんないんだもん()
これめっちゃ悲しくないですか?なのに書き手は「相手に伝える方法」を改善しないでずっとコマンドを数字表記。
わかります。慣れてるし便利です。でもそれって書き手都合で読み手のこと考えていませんよね。
そこが寂しいなって。だから作りました。
このやり方が多くの初心者向け記事に採用され、格闘ゲームが賑わうことを願います。
最後に、この記事も私の理解度や時間を見て「わかりやすく使いやすい」ものに変えていきたいと思います。
目的はわかりやすい記事が増えることです。勝手に改善してもわかりやすい記事を書いてくださっても構いません。
できればFMYKの発案とあると嬉しいですが欲は言いません。そんなことより共感してくださる方はわかりやすく広めてください。
よろしくお願いします。