WordPressで便利なタグやコードまとめ｜上條サロン

当ページのリンクにはPRが含まれています。

2017年2月7日

URLをコピーしました！

WordPressで使うと便利なタグやコード

WordPressは多種多様なタグやコードがあります。
さて今回はそんな使うと便利なタグやコードのまとめです。

タグやコードを使うことによってできることは

・装飾を自分なりにカスタマイズする
・導線を貼りやすくする

ここらへんですが、

デメリットもあります。

WordPressのコードやタグのメリット・デメリット

WordPressにおいてのコードやタグのメリット・デメリットを最初にまとめておきましょう。

■メリット
メリットは、自分なりにカスタマイズしてくれる点
これに尽きます。
人と同じWordPressテーマを使っていたとしても
自分メディアらしくカスタマイズできてしまう。

またコンバージョン率を上げるために導線も貼りやすい。
これは試行錯誤やGAを活用して実際にどういう経路で閲覧者がサイトを視ているのか？
これをチェックする上でも有効な手段と言えるでしょう。

■デメリット
SEO的にマイナスになることも！
コードをCSSから追加などすると、基本的にコードが乱れます。
それはともすると、「WEBページ速度」を遅くすることにもつながりますし、
似た命令を複数のコードでチグハグに出すと、エラーにもなりかねません。

僕自身がやってしまった失敗ケースとしては、

・過去設定したコードでは動かなったので、そのコードを消さずに新たなコードを記述して誤作動
・バックアップを取り忘れてからコードいじりエラーで後悔。

ここらへんは注意していかなくてはなりません。

さて、とりあえずは、メリット・デメリットは以上ですが、

いよいよ使えるコードについてのまとめいきます。

※コードやタグについては様々な仕様がありますが、
自分がわかる範囲のことを今回は記載していきます。

WordPressで使えるコード

WordPressで使えるコードです。
まずは、コードを人に教えたい時に超役立つ「サンプルコード」をWordPress本文に表記できるプラグインからご紹介していきましょう。

僕も使っていますが、「Crayon Syntax Highlighter」というプラグインが非常に便利です。

WordPressのhタグ装飾コード

さて、hタグ装飾コードです。

・吹き出し型見出し装飾

.sample2 {
    position: relative;
    color: #ffffff;
    background: #000000;
    font-size: 16pt ;
    border: 3px solid #f46e50;
    margin: 10px 10px 23px 10px;
    padding: 10px 5px 10px 10px;
    border-radius: 3px;
    box-shadow:1px 3px 7px 0px  #666666 ;
}
.sample2:after, .sample2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}
.sample2:after {
    left: 40px;
    border: 10px solid transparent;
    border-top: 10px solid #000000;
}
.sample2:before {
    left: 37px; 
    border: 13px solid transparent;
    border-top: 13px solid #f46e50;
}

記事本文には


ここに文字

▶この”sample2”の部分は自分なりに変更しても可能です。

・リボン型見出しコード

.sample2 {
    position: relative;
    color: #ffffff ;
    background: #000000;
    font-size: 16pt ;
    line-height: 1;
    margin: 20px -10px 20px -10px;
    padding: 10px 5px 10px 20px;
    box-shadow:1px 3px 7px 0px  #666666 ;
    border-top:3px solid #4df8ad;
}
.sample2:after, sample2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}
.sample2:after {
    left: 0;
    border-right: 5px solid #333;
}
.sample2:before {
    right: 0;
    border-left: 5px solid #333;
}

・上部ライン

.sample2 {
  color: #ffffff ;
  background: #000000;
  font-size: 16pt ;
  line-height: 1;
  margin:10px 0px;
  padding: 10px 5px 10px 5px;
    box-shadow:1px 3px 7px 0px #666666 ;
    border-top:3px solid #f46e50;
    border-radius: 5px ;
}

ちなみに自分このみに色を変更するには↓ここを変更します。

・下部ライン

.sample2 {
  color: #ffffff ;
  background: #000000;
  font-size: 16pt ;
  line-height: 1;
  margin:10px 0px;
  padding: 10px 5px 10px 5px;
	box-shadow:1px 3px 7px 0px #666666 ;
	border-bottom:3px solid #f46e50;
	border-radius: 5px ;
}

・上下ライン

.sample2 {
  color: #ffffff ;
  background: #000000;
  font-size: 16pt ;
  line-height: 1;
  margin:10px 0px;
  padding: 10px 5px 10px 5px;
	box-shadow:1px 3px 7px 0px #666666 ;
	border-top:3px solid #f46e50;
	border-bottom:3px solid #f46e50;
	border-radius: 5px ;
}