maki-o memo

制作に関する私的なメモです

a-blog cmsのユニットでFontAwesome挿入するJS書きました

アイコンフォント便利ですね

最近は個人的に、Font-Awesomeを使うことが多いです。

ただ、意図するフォントを探し出してのコピペがめんどい。。。

ということで、a-blog cmsのユニット入力に対応した以下のようなツールをつくりました。

github

探すのはまあ仕方ないとして、これならコピペの精神的負担は減るのではないでしょうか。

使い方

  1. このjs(iconadd.js)を読み込む
  2. サイトにFont-Awesomeを読み込む
  3. a-blog cmsの、/themes/system/ajax/emoji-edit.html をカレントテーマにコピー
  4. コピーしたemoji-edit.htmlに、下記の一列追加する
<span class="js-tag_insertion">
<!--<p> -->
	<a href="#" class="emoji-trigger-tag" rel="a" title="リンク先のURLを入力してください">リンク挿入</a>
	<!--<a href="#" class="emoji-trigger-tag" rel="strong">強調</a>-->
	<a href="#" class="emoji-trigger-tag" rel="em">強調1</a>
	<a href="#" class="emoji-trigger-tag" rel="strong">強調2</a>
	<!--<a href="#" class="emoji-trigger-tag" rel="u">下線</a>-->

となってるところを、

<span class="js-tag_insertion">
<!--<p> -->
	<a href="#" class="emoji-trigger-tag" rel="a" title="リンク先のURLを入力してください">リンク挿入</a>
	<!--<a href="#" class="emoji-trigger-tag" rel="strong">強調</a>-->
	<a href="#" class="emoji-trigger-tag" rel="em">強調1</a>
	<a href="#" class="emoji-trigger-tag" rel="strong">強調2</a>
	<!--<a href="#" class="emoji-trigger-tag" rel="u">下線</a>-->

	<a href="#" class="js-iconOpen">アイコン挿入</a>

としてください。

検証は、a-blog cmsの 2.5.0.3、
ブラウザはchromeの 44.0.2403.155 (64-bit)
で行っています。
IEは動かない気がします。

a-blog cmsのバージョンが 2.0以前の場合は、iconadd.jsの冒頭を、

ACMS.Ready(function(){
(function($){

↓

jQuery(function(){
(function($){

などとしてみてください。
管理画面でもやりたい場合は、管理画面のテンプレでも同じことしてください。
/themes/system/include/head/admin-css.html
/themes/system/include/head/admin-js.html
にcssとjs読み込めばいいはずです。

現場からは以上です。


プロフィール

フロントエンドエンジニア

Tomokazu Makita

名古屋でフリーランスでWeb制作してます。 フロントエンドのことを主にやってます。
a-blog cmsを使用したサイト制作が得意です。
お仕事のご相談随時受付中。

雪山大すき。冬は雪山の合間に仕事します。
財布はいつも吹雪です。

エントリーリスト

タグ