2018/09/17SANGOにデフォルトで搭載されているFontAwesome(Ver4.7)の任意のアイコンをリストマーカーとした新しい箇条書きボックスを作成する方法を説明します。別バージョンのアイコンを使用する場合は、別途設定が必要ですが、ここではSANGOに最初から実装されているバージョン4.7をそのまま使用する方法の説明をしています。搭載バージョンについてはSANGOカスタマイズ応用編に記載されたFontAwesomeに関する記事を参考に判断しています。設定は子テーマのstyle.cssに記入します。※「example」は例として使用している範囲名です。お好きな名前を付けて使用して下さい。none;」デフォルトのアイコンを非表示にしています。FontAwesome;」FontAwesomeの使用を明示しています。挿入するアイコンを指定しています。:before」でアイコンを文字列の直前に挿入しています。この設定例では、擬似要素指定に「ul」を入れずに「li:before」としています。li:before」と記述されていましたが、このページの環境で試すとレイアウトが崩れてしまったために意図的に外しています。ご自身の環境に合わせて変えて下さい。このコードを実行した場合は、SANGOショートコード「箇条書き:種類13」のシェブロンマークと同カラーのアイコンが入ります。種類13は囲い線(外枠)が設定されていますが、サンプルでは囲い線は無しに設定しています。好きなアイコンに入れ替えるには「content」の値欄のuniコードを変更します。FontAwesome公式サイトの一覧からアイコンを検索してuniコードを確認します。アイコン一覧(FontAwesome公式サイト)※サイトに行くとバージョン5へのアップデートのダイアログが出る場合がありますが無視して大丈夫です。入れ替えたいアイコンが決まりましたらクリックして詳細画面を開きます。赤丸の所に書かれているのがuniコードです。contentの値の欄に\(バックスラッシュ)の後に続けて、アイコン詳細ページに書かれているuniコードを書き込んで下さい。値として書き込む「\(バックスラッシュ)」には気をつけて下さい。Windowsの¥マークではなく本当のバックスラッシュなので、使用環境にかかわらず「\」を書き込んで下さい。先程のコードの実行例です。アイコンを変更出来たら完了です。サンプルです枠線なしですマーカーはシェブロンマークですショートコードに登録しておけば記事への挿入も簡単です。プラグイン「AddQuickTag」がおすすめです。AddQuicktag公式サイト完全なる余談ですが、CSSのソースコードを掲載するのにあたり、Wordpress上でpreタグを使用した場合、「\」が「¥」で表示されるという仕様のためにソースコードをそのまま載せられないという壁にぶつかりました。そのため、ソースコードを埋め込むツールを使用するのに、以下のサイトの記事を参考にさせていただきました。:WordPressスポンサーリンクSANGOで投稿記事の日付欄が小さくなり下線が表示される現象の回避方法SANGOでアプリーチを使用する時のCSSカスタマイズSANGOでウィジェットの背景色をサイトの背景色と同じに変更するカスタマイズこの記事を書いた人ゆきのはゲームの感想、攻略&TIPS等や、このサイトで使用しているツールことなどを載せています。コメントをキャンセルメールアドレスが公開されることはありません。4ゆきのはゲームのレビューや攻略、このサイトで使用しているツールことなどを載せています。