【ストックイラスト】PIXTAのプロフィールをカスタマイズした話【バナー/文字リンク】
甘抹らあこんにちは、甘抹らあです。絵と小説を描く人です。
先日イラスト素材【PIXTA】のプロフィールページを編集しました。
今までは、無味乾燥な文字の羅列だったのですが……
プロフィールを見てくださった方が他の素材を探しやすいよう、カテゴリー別のリンクを設定してみました！
こんな感じです▼
参考にしたのは、他の方々がプロフィールを編集する方法として公開してくださっているブログ記事の数々。
しかしながら、そっくりそのまま実践しても上手くいかないことが多かったので、いくらか試行錯誤することになりました。
そこで今回の記事では、自分の備忘録もかねて、どんなふうに編集していったのかを記録してみます。
他の誰かのお役に立てば幸いです。
1．バナー画像から飛べるリンクの作成手順
1‐1．バナー画像を作る
まずはバナーとして利用したい画像を制作します。
こんな感じです。
上の画像は、他の方のブログを参考にしてタテ100px×ヨコ320pxで制作しています。
実際に色々な方のバナーを見てみると、形も大きさも様々です。
自分が一番良いと思う形で作ってみましょう。
1‐2．自分のプロフィールページから、リンク先に指定したいページを開く（検索する）
次に、リンク先に指定したいページを開きましょう。
自分のプロフィールページから「ポートフォリオ内を検索」という機能を使って、指定したいキーワードで検索すればOKです。
例えば私は、この画像
をクリックしたときに、自分のポートフォリオ内を「探偵」で検索した結果のページに飛べるようにしたいので、
以下のリンク
を開きます。
1‐3．1‐2のURLをコピー
上に表示されたURLをコピーします。
※windowsなら、Ctrl+Aの後にCtrl+Cでコピーできます。
普通にカーソルでなぞって選択→右クリックでコピーでも大丈夫です。
そして……この後が、問題です。
私が見たブログ記事には
<a href=”飛ばしたいページのURL“><img src=”バナー画像のURL” alt=”代替テキスト“></a>
というコードをコピペしてプロフィールページに貼ればOKだよ！ と書いてあったのですが、その通りに実践しても、一向にうまくいきませんでした……。
（画像が表示されなかったり、リンク先が機能していなかったり）
上手くいく方もいるようなので、何がダメだったのかは今もって分かりません。
※全角半角や入力ミスは入念に確認したので、間違っていなかったはずです。
そんな時、あなんよーこ様のブログ記事に出会いました。
簡単!!PIXTAプロフィールページをカスタマイズ!/絵柄別バナーを作る方法/バナーを作成する前に考えたいポイント｜あなんよーこ ILLUST×DESIGN
こんにちは。 イラストレーターのあなんよーこ(@anan_illust)です。 先日、私のPIXTAのプロフィールページ
あなんよーこ ILLUST×DESIGN 
以下、ここに書いてある通りの手順で進めます。
※Wordpressで自分のHPを作っている方向けの説明です。
1‐4．自分のＨＰに専用の投稿記事を作って、画像をアップロード
自分のHPに先ほどのバナー画像をアップロードし、貼り付けます。
私の場合、非公開の投稿を新規作成し、こんな感じで画像を貼っています。
※「春」とか「夏」とかの文字については、今は関係ないので無視してください。
1‐6．画像のリンク先に、指定したいページを設定する
続いて、1‐5でアップロードした画像のリンク先に、指定したいページを設定します。
この手順は要するに、
最終的な目標である「バナー画像をクリックしたときに、自分のポートフォリオ内を『探偵』で検索した結果のページに飛べるようにすること」
を、自分のHP上で実現させるということです。
画像をクリックした時に飛ぶリンク先を、1‐3でコピーしたURLに設定します。
1‐7．「Htmlとして編集」を選択
次に、「HTMLとして編集」という項目をクリックします。
※「htmlとして編集」という項目は、ここを押すと出てきます！（下図参照）
ちなみにデフォルトの投稿画面はビジュアル編集をしている状態（プレビューしながら直感的な操作ができる状態）です。
ここを押すと、元の画像に戻ります（下図参照）。
1‐8．出てきたソースコード（？）をコピーし、PIXTAのプロフィールページにペースト
「htmlを編集」を押すと、何やら訳の分からないアルファベットの羅列が出てくると思います。
これをコピーし、PIXTAのプロフィール編集ページにそのまま貼り付けます。
一切手を加えず、本当にそのまま貼り付けるだけでOKです。
以上で、完了！
すると、こんな感じの「探偵のイラスト」のバナーが設定できました▼
※下の画像は、他のバナーも作った後のものなので、「探偵のイラスト」以外のバナーも表示されています。
2．文字だけのリンク設定
続いて、文字だけのリンク設定についても見てみましょう。
最初は、見様見真似のソースコードみたいなやつを手書きしようと思ったのですが、やはり素人には歯が立たなかったため、方針転換。
「1．バナーにリンク先を設定する」の時のやり方をマイナーチェンジして、実践してみました。
手順はとても簡単です。
2‐1．自分のＨＰにて、画像にリンク先を指定した時と同じように、文字にリンク先を指定する。
まずは自分のＨＰにて、画像にリンク先を指定した時と同じように、文字にリンク先を指定します。
こんな感じです（下図参照）。
先ほどと同様、最終目標を自分のHP内の非公開ページで先に実現してしまうみたいなイメージです。
2‐2．「ＨＴＭＬを編集」を選択
これも、先ほどと同じです。「…」をクリックして、「HTMLを編集」を押します。
2‐3．出てきたソースコード（？）をコピーし、PIXTAのプロフィールページにペースト
これも、さっきと同じです。何も手を加えずに、そのままコピー＆ペーストします。
以上、完了です！
3．免責とか注意点とか
恥ずかしながら、私はＰＣ周りにものすごく疎い人間です。
このままじゃこれから先やばいなと思って勉強中ですが、正直言って今の段階では、詳しい理屈が分かっていません。
そのため、上記の手順を踏んで上手くいくかどうか、確証はないです。
ただ、少なくとも私はそれらしいものを作れました！（笑）
ですので、参考程度にご覧ください。上手くいく人が増えたら嬉しいです。
また、もしかしたらこのやり方だと、自分のＨＰが機能しなくなったとき（不具合もしくは自主的な閉鎖など）にPIXTAの方のリンクも機能しなくなるかもしれません。
そのあたりはくれぐれもご注意ください。
あと、PIXTA自体も、いつまでプロフィールページのhtmlが機能してくれるかは不明なので、よく気を付けておく必要があるそうです。
4．まとめ
以上、PIXTAのプロフィールページを変更したよという報告＆備忘録でした。
私のページはこちらなので、イラスト素材がご入用の際は、ぜひお役立てください。
それではまた、一緒に頑張っていきましょう。
甘抹らあでした！
Twitter→@amamatsu_lar
