新型Kindle 4/10発売

サルワカさんの見出しをSANGO用に変換するツールを作成しました。

WordPressのテーマ「SANGO」の見出し、初期状態のままだと非常に簡素な装飾になっています。

これはSANGOのマニュアルにある通り、ユーザー各々で見出しを装飾しやすいように、ということでなっています。

「見出し2」と「見出し4」については、もはや文字だけです。これだけシンプルにしている理由は、後から自由にカスタマイズしやすいようにするためです(カスタマイズは上書きしていく形で行うことが多いので、シンプルな方がやりやすいのです)。
SANGOでデフォルトの見出しを変える方法

SANGOを開発したサルワカさんのサイトでは、68種類もの見出しが紹介されています。

シンプルなのもあれば
おしゃれなやつ
可愛いのも
アニメーションしたり

これらからお好みのを選んで自分のサイトに設定すればいいのですが、SANGO用に書き換えなければいけない所が多々あってなかなか面倒です。
特に「見出し3」は崩れがちですよね。

簡単にコピペで済ませたい。
そこでSANGO用に見出しコードを書き換えてくれるツールを作ってみました。

変換ツール

作成した変換ツールはこちら。
ブラウザ上で変換出来るようになっています。

使い方

まずはサルワカさんのサイトから、使用したい見出しを選んで、コードをコピーしてください。

見出し変換ツールに戻り、コードを貼り付けて「変換」ボタンを押します。

正しく貼り付けられていれば、このようになります。

見出しの色を変更したい場合は、ここで変更出来るようになっています。

イメージしやすいように、ここに見本として見出しを表示しています。
※実際にSANGOのサイトに貼り付けると、フォントやサイズの違いがあるので必ずしも同一の表示にはなっていません。

何番の見出しに適用するかを決めてください。
「見出し3」に適用するのであれば「見出し3(h3)」を選択します。

「クリップボードにコピー」ボタンを押すか、下のコードを選択してコピーしてください。

コピーしたコードをWordPressのstyle.cssに貼り付けます。
style.cssの編集がわからない場合は、こちらのスクリーンショットを参考にしてみてください。

これで完了です。
実際に記事に見出しをつけて確認してみましょう。
見出しが反映されない場合は、ブラウザのスーパーリロード(Shiftキーを押しながら更新ボタンをクリック)か、ブラウザのキャッシュ削除をお試しください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です