ストックイラストというサービスでイラストを販売しています。販売用のイラスト作りの効率化のために「ちびそざい」をという姉妹サイトを作りました。
素材サイトという形の、自分用パーツ置き場です。
細々したパーツほどどっか行ってしまいがちなので、このサイトにまとめておいて必要な時にすぐに使えるようにしたかったんですよね。
で、それも大事なんだけど、ストックイラストで大変かつ重要な作業と言えばタグ付け。
せっかくパーツ置き場を作ったから、タグもすぐコピーして使えるようにしておきたいなと思って。
今回はそういうカスタマイズをしたので、その備忘録です。
当サイト「あかえほ」と同じで、ワードプレスで作成、テーマはCocoonです＾＾
【2022/6/6追記】
ごめんなさい。当初は上記の意図で立ち上げた姉妹サイトですが、現在は色々考えがあり方向性をガラッと変えた素材サイトになっています。
この記事はこのまま残しますが、今はこのカスタマイズは「ちびそざい」の中に無いのでご了承ください。
メタキーワードって今は無意味だから、逆にちょうどよかった
本題に入る前に、なんでメタキーワードを利用しようと思ったのかって話をば。
昔はメタキーワードというものを設定しておくと、検索エンジンがそのキーワードを考慮して検索結果に反映してた時代があったんです。
でも今はもう、メタキーワードに何入れようが検索エンジン的にはガン無視状態で、意味のないものになりました。
でも、存在自体は残っていて、Cocoonのテーマでも投稿エディタの下の方に入力箇所があります。
記事書く場所飛ばして下にスクロールするとSEOって項目があって、3番目。
ここに入れた文字は、今となっては検索エンジンのアルゴリズムに影響しない。
サイト内検索にも引っかからない。
これが良い。実に良い。
ただの自分用メモとして使える。
ストックイラストのタグ付けって特殊なキーワード入れたりすることもあるから、タグを投稿記事内に書いてしまうとサイト内検索が使いにくくなる可能性があるんだよね。
調べたら、メタキーワードに入力した文字列をコピーするボタンを作れそうだったので、じゃあこれで行こう！と思った次第です。
JavaScriptでメタキーワードを取得して、ボタンクリックでコピーする
やり方はこちらの記事を参考にさせていただきました。
あんまりプログラミングとかよく分からないので、この3つの記事を何度もグルグルして試行錯誤した結果、こうなりました。↓
①javascript.jsにコードを書く
外観→テーマエディター→javascript.js
ここにこれを貼り付ける。
//メタキーワードを取得する
function copyKeywords() {
var keywords = document.getElementsByName('keywords')[0].content;
navigator.clipboard.writeText(keywords);
}
②HTMLでボタンを作る
カスタムHTMLで、
ボタンを置きたい場所にこれを書く。
<input type="button" value=" ストック用タグ" onclick="copyKeywords()" class="copy-button">
特定の記事の好きな場所に個別にボタンを置きたいなら、投稿エディタのカスタムHTMLブロックで。
全部の記事下にまとめてドンッ！と置きたい場合は、外観→ウィジェット→投稿本文下にカスタムHTMLウィジェットで。
レンタルサーバーがロリポップ！
の場合、ユーザーページでセキュリティ→WAF設定を無効にしないとウィジェットのカスタムHTML保存できないので注意。
【補足】
value=” ストック用タグ”と書いてあるのは、ボタンに表示する文言。
f24dはFontAwesomeのこのアイコン↓
頭に付けた「&#x」、これはHTMLに直接FontAwesomeのアイコン埋め込む場合につけるものらしい。
【参考記事】
Webアイコンを表示しよう！ ～FontAwesomeをCSSとSass(Scss)で使ってみる～
Cocoonの場合は最初からFontAwesomeが使えるようになってるので、FontAwesomeのファイルをダウンロードしてアップロードする作業は必要ない。
③CSSでボタンの見た目を整える
外観→テーマエディター→スタイルシート（style.css）
ここにこれを貼り付ける。
/-----コピーボタン装飾------/
.copy-button{
display:inline-block;
margin:10px 2px 10px 0;
padding:2px 6px;
border:solid 1px #999;
background:#fff;
text-align:center;
cursor:pointer;
border-radius:2px;
font-family: FontAwesome;
}
.copy-button:hover{
background-color: #f5f8fa;
transition: all 0.3s ease-in-out;
color: #333;
}
Cocoonでは最初からFontAwsome使えるようになってる・・・とは言え、何かしらクラスを設定して、CSSに「font-family: FontAwesome;」って書いておかないとダメみたい。
この辺の詳しいことは分からない(笑)
なお見る環境よってはボタンの装飾は無視される。
私の環境ではPCで見るとこうなるけど↓
iPhoneで見るとこうなる↓
まあ機能的には変わらないし、自分用の機能でしかないから別に構わない。
ひょっとしたらおかしな箇所や無駄なコードもあるかもしれないけど、とりあえずこれで動いてるので、自分の中では良しとします！
ボタンを押しても単にコピーされるだけなので、一見何も起きてないように見えるけど、好きなところにペーストすればちゃんと文字列が貼り付くのでOK。
最後に
この記事、誰の役に立つんだ？真似する人いる？？って感じですが。
記事にしておかないと自分が忘れちゃうので(;’∀’)
メタキーワードを打ち込むのは結局手動なので、効率が良くなったか？と言われると正直微妙だけど。
でも、「ちびそざい」からパーツを集めてきて販売用のイラストを作り、「ちびそざい」からタグをコピーすれば時間が無いときはラクかなと。
セットにしたり一枚絵にしたりするとどうしても余計なタグは出てきてしまうけど、大抵の場合はイチから打ち込むより削る方がラクなので。
結局のところ、いろんなやり方試して自分に合ったやり方見つけていくしかないよねぇ。
なお重複タグはこちらのツールで除去してます↓
さて、ここまで読んでくださる方がいるか謎だけど(笑)
最後までお読みいただき、ありがとうございました。