あまめも

WordPressでMarkdownを使用し始めたのですが、マーカーを簡単に引ける様に設定してみた

こんにちは! あますた(@amaguristar)です。

最近、遅ればせながらMarkdownにてブログをカタカタ書き始めた自分。見た目的に”マーカーを引きたい”って場所も「タグを使用しないで簡単に書きたいんだよな」と思い設定してみました。

 

とりあえず2パターン紹介

パッと思いつくのは2パターン。簡単なのは「css」で編集する方法。もう1つは「function.php」でタグをむりやり置換する方法。どちらもMarkdownの「*」表記を利用。

つまり『*マーカー*』とMarkDownで入力した部分に『マーカー』と表示する様にします。

「css」を編集する場合

設定方法は簡単。Markdownの「*」はHTMLだと「<em>タグ」に置き換えられるので、cssで<em>タグの設定を変えるだけ。

em { background: linear-gradient(transparent 70%, #ffea00 70%); }

これが一番簡単だと思います。具体的なマーカー表示用のcss設定は下記ページを参照。

「function.php」を編集する場合

<em>タグを他のタグに置換するイメージ。具体的な例をあげると。

<em>ここが重要なポイント</em>です。

というHTMLを、

<span class="mark_yellow">ここが重要なポイント</span>です。

と置換すること。具体的なコードを書くと。

function ctk_replace_to_custom_tags( $postarr ) {
    $postarr['post_content'] = str_replace('<em>', '<span class="mark_yellow">', $postarr['post_content'] );
    $postarr['post_content'] = str_replace('</em>', '</span>', $postarr['post_content'] );
    return $postarr;
}
add_filter('wp_insert_post_data', 'ctk_replace_to_custom_tags');

上記を「function.php」の適切な位置にコピーするだけ。

※1
「function.php」は必ずバックアップしてから編集して下さい
※2
「下書きを保存」や「公開」を押した時等、保存される際に置換されます

「str_replace関数」を簡単に説明すると、

str_replace( ‘検索文字’, ‘置換文字’, 検索文字列 )
戻り値は、置換後の文字列。

まとめ

基本的に「css」の<em>タグ編集で問題ないと思います。「function.php」の編集をして表示するケースは・・・パッと思いつきませんが、知ってると何かの役に立つかもしれないので一応紹介。

関連記事

  1. [甘]Macで隠しファイルを表示するには?

  2. iPhoneの自動ロックを解除する方法

  3. Instagramで外部アプリを使わない「リポスト」の仕方を覚…

  4. ブログに「目次必要かな?」と思ったのでサクッとローテクで作ってみ…

  5. [Mac]ショートカットキーよりも便利!Touch Barのクイ…

  6. [甘]たったこれだけ?Macの時計が速かったからなおしてみた。

こんなメモもありますよ♪

  1. デジタル収穫祭オブジェ

Twitter

ページ上部へ戻る