*

コピペで出来る!蛍光マーカーや赤文字ボタンを作成して記事を簡単に装飾する方法

目的
記事投稿でHTMLタグを簡単に挿入できるボタンを作成します。
必要なもの
・FTPクライアントソフト
・テキストエディタ
読書時間
10分くらい
難易度
目次
1. 記事を書くのを少しでも楽にする方法を紹介
2. テーマのfunctions.phpへ追加ボタン設定を書き込む
3. スタイルシートに適用したいデザインを書込む
◎ 今回のまとめ

記事を書くのを少しでも楽にする方法を紹介

記事を書くときは、出来るだけ余計な手間を省いて、
良い記事を書くことだけに集中したいものです。
今回は一度設定しておけば、
記事制作の時間短縮になること間違いなしです。

記事投稿を簡単にする方法

投稿画面で記事を編集していると、
見出しをh2、h3タグで囲んだり、
強調したい部分の文字に色を
付けたりすることが多くあります。

毎回、手書きでタグを書くのは非常に面倒ですし、
記事を書く人がHTMLタグを知らない場合もあります。

そこで、今回はボタンひとつでタグを挿入できるボタンを作り、
テキストエディタでの記事投稿を楽にする設定です。

タグの挿入ボタン初期状態

初期状態ではこのように基本的なタグボタンしたありません。

「AddQuicktag」「 TinyMCE」といったプラグインもありますが、
機能が多すぎるたり、バージョンの互換性など面倒なので、
「functions.php」とスタイルシートへ
書き込むだけの簡単な設定を紹介します。

テーマのfunctions.phpへ追加ボタン設定を書き込む

使用しているテーマにある
functions.phpにボタン作成の設定を書きます。

作成するボタンは、下記になります。
「見出し(大)」「見出し(中)」
「太字」「赤字」「青字」「緑字」「下線」
「蛍光(黄)」「蛍光(桃)」

出来上がりイメージ

HTMLタグ追記ボタン

太字はこんな感じになります。
赤字はこんな感じになります。
青字はこんな感じになります。
緑字はこんな感じになります。
下線はこんな感じになります。
蛍光(黄)はこんな感じになります。
蛍光(桃)はこんな感じになります。

スタイルシートに適用したいデザインを書込む

見出し(大)、見出し(小)は、h2、h3タグなので、
テーマの元のデザインに任せるとして、
テーマのスタイルシートに、
太字や、蛍光マーカーのデザインに追記します。
文字のスタイルは、各サイトに合うように自由に変更してください。

/*———————————
記事用の装飾
——————————–*/

今回のまとめ

そのままのスタイルで良い場合は、
コピペするだけで完了です。

functions.phpに追加する場合は、
一番下記に追加するとphpタグが
上手く対になるようになっています。

投稿が楽になるし、
記事自体が非常に読みやすくなりますので、
一度試してください。

参照サイト

蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

記事が気になったらSNSでチェックしてくださいね

  • follow us in feedly
  • このエントリーをはてなブックマークに追加

いいね!でWordPress最新情報が手に入ります

関連記事

残念な年賀状

アップロードしたサムネイル画像を一括でリサイズしてくれるありがたいプラグイン

新しくテーマを変更したら、 サムネイル画像の人がやせ細ってしましました。 年賀状の写真がこんな感

記事を読む

https_image

安くなったSSL証明書 全サイトを暗号化する時代がやってきた

2014年8月にGoogleが「HTTPSをランキングシグナルに使用する」という 方針を発

記事を読む

コメントを残す

https_image
安くなったSSL証明書 全サイトを暗号化する時代がやってきた

2014年8月にGoogleが「HTTPSをランキングシグナル

残念な年賀状
アップロードしたサムネイル画像を一括でリサイズしてくれるありがたいプラグイン

新しくテーマを変更したら、 サムネイル画像の人がやせ細ってしましまし

記事投稿を簡単にする方法
コピペで出来る!蛍光マーカーや赤文字ボタンを作成して記事を簡単に装飾する方法

記事を書くのを少しでも楽にする方法を紹介 記事を書くときは、出来るだ

web素材が無料
高品質なウェブ素材が無料「ShanaBrian Website」

Webサイト構築ですぐに使える素材が ひと通り揃っています。

無料のイラスト・かわいいテンプレート 素材ライブラリー
イラスト無料の「素材ライブラリー.com」

全ての質の高いイラストが揃っていて、 PNGやJPGだけでな

→もっと見る

  • follow us in feedly
PAGE TOP ↑