ワードプレスでサイトをつくる時に必要なこと

どうやってサイトを作っていけば良いのか、つまづきそうな所を集めた覚書です。 とりあえず自分が振り返った時に、このサイトを見れば大丈夫という感じにしていきます。

【ワードプレス】文字に蛍光ペンを引いたようなハイライトをつける方法

   

文字を強調させる時に、太字だけでは物足りない時はハイライトをつけましょう。

方法は、CSS(スタイルシート)に以下の『linear-gradient()関数』を追記して、記事を書くときにHTMLコードを挿入するだけ。

linear-gradient(transparent 線の太さ[0%太い⇔100%細い], 線の色(カラーコード) 線の濃さ[0%太い⇔100%細い・線の太さと同じ値でOK])

linear-gradient()関数は、プラグイン『Custom css-js-php』を使うと設定しやすいです。
詳しくは、【ワードプレス】Display Posts Shortcodeで記事一覧ページをつくる方法をご覧ください。

HTMLコードは以下のとおり。

<span class="marker_『設定したいカラーコード』">『ラインを引きたい文字・文章』</span>

参考までに、よく使うであろう色をまとめました。

black #000000   red #ff0000
silver #c0c0c0   forestgreen #228b22
burlywood #deb887   royalblue #4169e1
seagreen #2e8b57   khaki #f0e68c
yellow #ffff00   hotpink #ff69b4
pink #ffc0cb   white #ffffff
gold #ffd700   orange #ffa500
blue #0000ff   greenyellow #adff2f
violet #ee82ee   navajowhite #ffdead
aqua #00ffff   blueviolet #8a2be2

この色たちをlinear-gradient()関数で記述したものがこちら。

.marker_black {
background: linear-gradient(transparent 0%, #000000 0%);
}
.marker_red {
background: linear-gradient(transparent 0%, #ff0000 0%);
}
.marker_silver {
background: linear-gradient(transparent 0%, #c0c0c0 0%);
}
.marker_forestgreen {
background: linear-gradient(transparent 0%, #228b220%);
}
.marker_burlywood {
background: linear-gradient(transparent 0%, #deb887 0%);
}
.marker_royalblue{
background: linear-gradient(transparent 0%, #4169e1 0%);
}
.marker_seagreen {
background: linear-gradient(transparent 0%, #2e8b57 0%);
}
.marker_khaki {
background: linear-gradient(transparent 0%, #f0e68c 0%);
}
.marker_yellow{
background: linear-gradient(transparent 0%, #ffff00 0%);
}
.marker_hotpink {
background: linear-gradient(transparent 0%, #ff69b4 0%);
}
.marker_pink {
background: linear-gradient(transparent 0%, #ffc0cb 0%);
}
.marker_white  {
background: linear-gradient(transparent 0%, #ffffff 0%);
}
.marker_gold {
background: linear-gradient(transparent 0%, #ffd700 0%);
}
.marker_orange {
background: linear-gradient(transparent 0%, #ffa500 0%);
}
.marker_blue{
background: linear-gradient(transparent 0%, #0000ff 0%);
}
.marker_greenyellow {
background: linear-gradient(transparent 0%, #adff2f 0%);
}
.marker_violet {
background: linear-gradient(transparent 0%, #ee82ee 0%);
}
.marker_navajowhite {
background: linear-gradient(transparent 0%, #ffdead 0%);
}
.marker_aqua {
background: linear-gradient(transparent 0%, #00ffff 0%);
}
.marker_blueviolet {
background: linear-gradient(transparent 0%, #8a2be20%);
}

良かったらコピペして使ってください。

 - ワードプレス

スポンサーリンク

スポンサーリンク

Message

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

  関連記事

no image
【ワードプレス】アイキャッチ画像を設定するプラグイン『Auto Post Thumbnail』の設定方法

普通は各記事ごとにアイキャッチ画像(サムネイル画像)を設定しないといけませんが、 …

no image
【ワードプレス】固定ページの公開日・最終更新日の表示を消す方法(STINGER5の場合)

固定ページの公開日や最終更新日を表示する必要のない時は、その表示を消してしまいま …

no image
【ワードプレス】設定

一般・・・タイムゾーンを『東京』に変更 投稿設定 投稿用カテゴリーの初期設定・・ …

no image
GoogleやBingの検索エンジンに自分のブログ・サイトをインデックス登録追加するには?

以下のサイトにアクセスして、インデックス登録するだけ。 Google: http …

【ワードプレス】一度に20記事以上を一括編集する方法

大量の記事を『下書き』から『公開済み』にする時に一括編集を使うと思いますが、一度 …

no image
【ワードプレス】投稿した記事やカテゴリが表示されない時はどうすればいい?

せっかく記事を投稿したのに、いざそのページの出来を確かめようと思ったら404ペー …

no image
【ワードプレス】ユーザー

あなたのプロフィール・・・ニックネームを分かりやすい名前に変更 No relat …

no image
【ワードプレス】ファビコンを変更する

①favicon.ccで自分好みのファビコンを作成・ダウンロード ※海外サイトだ …

Twitterのタイムラインをブログのサイドバーに表示する方法

Twitter(ツイッター)のお気に入りアカウントのタイムラインを、自分のブログ …

Multi Plugin Installer
【ワードプレス】複数のプラグインをまとめてインストール・有効化する方法

この方法を知ると、今まで1つずつプラグインをインストール・有効化していたのがバカ …