photo credit: Scott Barlow via photopin cc
絵が下手なことで有名な凛(@rin_wan)です。
生き物を描くと、周りが妖怪…とざわつくほどのナイスセンスでありますｗ
そんな私が自作のアイコンを付けたボタンを作成してみたよというお話。
というのも先日、自分のAndroidからアプリ紹介記事を読んでリンクが押しづらい事！！！
iPhoneからもたまに押し難い事もあるので、とりあえずボタンがあると便利だよなーと実感したので作ってみました。
作ったボタンはこちら！！！
あ、もちろん周知の事実かとは思いますが念のため。アイコンは犬で、シーズー犬ですよ！！！！！
目次
参考にさせていただいた記事
もともと数名の方のアプリを紹介する記事に、オリジナルボタンがついているのを見て可愛いなー！って眺める＆押しやすい！と感動していたのですが、先日大さん（@delaymania）がこんな素的な記事を書かれているではありませんか！！！
私のような初心者でも簡単に出来るように、あのAppHTMLをカスタマイズする方法を紹介して下さってますヾ(*´∀｀*)ﾉ
という事で、早速やってみましたよ。
アプリをダウンロードするボタンを作ってみる！
まずは、大さん（@delaymania）が冒頭でさらりと紹介されている作成したボタン。
そう、ボタンがなくては話が始まらない。と言うことで私も頑張ってPhotoshopを使ってボタンを作成してみました。
サイズは記事の通り、300×75pxで作ってみたつもりですが…未だに適当にやってるので微妙にサイズずれてる予感。
やったことの覚書メモ。
準備1.ボタンのデザインを考えてみる。
まずはボタンのデザインを考えてみました。
カラーボタンに文字だけでもよかったのですが、せっかくならりんろぐ。らしいボタンが作りたいなーと素人の癖に望みだけは高い私。
りんろぐ。といったらわんこ。という事で、犬の顔と文字をカラーボタンに載せる感じをイメージしてみました。
準備2.アイコンを作ってみる。
さてアイコンを作ろうと思ったものの、絵は描けない私。
そこでふと浮かんだのは*youさん（@ateitexe）のこの記事！
以前からこの記事を読んで、これなら絵の苦手な私にも出来るかもー！と調子に乗っていた私。早速調子にのってイラストレーターを動かしてみました。
*youさん（@ateitexe）の分かりやすい記事のおかげで初心者の私でも犬っぽい何かが作れました！！！
でも美的センスが欠落しているのでどうもバランスがおかしいような。またその辺は版を重ねる毎に素敵になっていくはず(●´ω｀●)ゞｴﾍﾍ
準備3.ボタンを作ってみる。
色は直感で選んだ色。フォントはPCに入っていた中で一番可愛かったもの。もっとフォント入れたいなー。
わんこアイコンを縮小してボタンに載せてみました。小さくしたからか線が薄くなった気がする。次はもっと線を太くすればいいのかしら。
出来上がったらWordpressの適当なフォルダにアップロード！URLをメモしておきます。
AppHTMLをカスタマイズしてみる！
ボタンが出来たので、次はいよいよAppHTMLのカスタマイズ！！
が、こちらは大さん（@delaymania）が記事に全てサンプルを記載して下さっている！！！
大人しく使わせていただいて、ボタンのURLのみ置き換えるだけ☆:*･ﾟ(●´∀｀●)ﾎェ:*･ﾟ☆
ここで注意点は記事にも書いてある通り、タグとタグの間にある改行を全て消してテキストエディタに1行となるようにしていく事。AppHTMLの仕様なのか、余計なスペースや改行があるとうまく動かない模様です。
スタイルシートをカスタマイズしてみる！
ブックマークレットが出来たので、最後はボタンの位置や動きをCSSで調整するのが大人の流儀らしいですよ。
まずは自分のWordpressのテーマフォルダ内にあるstyle.cssをバックアップ。
次に大さん（@delaymania）の記事に紹介されているCSSの部分をコピーして自分のstyle.cssに貼り付ける！！！
AppHTMLのコードを我流に変更してなければちゃんと反応してくれるはずですよｗ
私のBlogでは左寄せでアプリ紹介の記事も書いているので、ボタンの位置は左に寄せました。
まとめ
・イラレは意外と簡単に絵が描けた！
・ボタン作ると愛着がわく！
・スマホからもボタンが押しやすい！！
ちょっと崩れたわんこアイコン付きのボタン、気になるアプリがあれば押してあげてくださーいヾ(*´∀｀*)ﾉｷｬｯｷｬ
わんこボタンだねー！と思った方はぽちっとどうぞ！
[thankyou]
次の記事もお楽しみに～(*｀･ω･)ゞ
