SEOスキルを活かして輝く逸材を世界へ!

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

  • URLをコピーしました!

スポンサードリンク

目次

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

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

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

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

ここらへんですが、

デメリットもあります。

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

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

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

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

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

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

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

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

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

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

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

WordPressで使えるコード

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

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

WordPressサンプルコードがきれいに貼れるCrayon Syntax Highlighter

WordPressのhタグ装飾コード

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

・吹き出し型見出し装飾
WordPressの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”の部分は自分なりに変更しても可能です。

・リボン型見出しコード
WordPressのhタグ装飾コード

.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;
}

・上部ライン
WordPressのhタグ装飾コード

.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 ;
}

ちなみに自分このみに色を変更するには↓ここを変更します。
WordPressのhタグ装飾コード

・下部ライン
WordPressのhタグ装飾コード

.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 ;
}

・上下ライン
WordPressのhタグ装飾コード

.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 ;
}

WordPressで便利なタグ

次にWordPressで便利なタグです。
タグについては、「AddQuicktag」というプラグインを使用して登録しておくと非常に便利です。

今回は僕がよく使っているタグをご紹介していきます。

・下線

 ここのに文字

・二重下線

ここに文字

・サンプルコードを見せるタグ

ここにコード

・テーブル

ここに文字

このくらいですかね?

ちなみにコードやタグじゃないですが、「speech bubble」ていうプラグイン、使い勝手が良くて好きです。

ライター:上條

この記事を読んだ人はこんなのも高確率で読んでます。

LINEオープンチャット関連記事

◯LINEオープンチャット関連記事
LINEオープンチャット先行版とLINEグループとの違いをまとめてみた
LINEオープンチャットの管理人機能と副管理人の追加
LINEオープンチャットで身バレ防止!ハンドルネームをつけられる便利機能
LINEオープンチャットで人気が出そうなジャンルとチャットメンバー募集中
LINEオープンチャットで作れるカテゴリー一覧と人気チャット考察
LINEオープンチャットの稼ぎ方と騙されないようにするポイント
LINEオープンチャットでメンバーを効率よく増やす人集め方法
LINEオープンチャット正式リリースはいつ?エラーで募集延期の可能性は?
LINEオープンチャット正式リリースまでの禁止事項は招待やQRコード拡散など
LINEオープンチャット5つの禁止事項や規約からわかること
LINEオープンチャット「ブロガーPay」コミュニティメンバー募集中
ブログを書く人向けLINEオープンチャットブロガーPay-記事更新版-作りました
LINEオープンチャット山口県観光コミュニティ「山口県行こうで!」開設!
LINEオープンチャット QRやURL読み込んでも参加できない時の対処法
LINEオープンチャットおすすめトークルーム一覧
Lineオープンチャットのノートに大事なお知らせ・大事なノートが追加
LINEオープンチャット注意喚起!同じ文面を数回コピペすると凍結する仕様
LINEオープンチャットでノートをチャットタイムラインに載せる方法
LINEオープンチャット就活支援コミュ-企業と就活生をマッチング-のご紹介
ブログ運営者やブロガーにこそLINEオープンチャットをおすすめしたい
LINEオープンチャットで楽天ROOMコミュニティ作りました
【検索できない】LINEオープンチャットのトークルーム検索はいつ実装されるのか?
【LINEオープンチャットトークルーム】フォロワーが増えるツイッターコミュニティ
LINEオープンチャットの略称はオプチャ・ぷんちゃ?なんて呼ばれそう?
LINEオープンチャットのトークルームの機能・使い方完全版
LINEオープンチャット管理者・共同管理者の権限とできるコトについて
【退会させられない】INEオープンチャットで退会規制 短時間に60名程退会させると
LINEオープンチャットにある色々な規制まとめ(トーク規制・招待規制・蹴り規制)
【ブロガー必見】LINEオープンチャットを活用したSEO対策とは
LINEオープンチャットでは個人間のやり取りができない!対処法はあるの?
LINEオープンチャットに今後追加される予定の新機能について
LINEオープンチャットでオンラインサロンを作る方法
LINEオープンチャット「オンラインサロンオーナーの会」メンバー募集中
LINEオープンチャットの通報したらどうなる?機能を紹介
LINEオープンチャットで副業!健全稼げる5つの方法
LINEオープンチャット「恋愛相談コミュニティ」恋バナもできる!参加者募集中
LINEオープンチャットを使ってコンサルをする方法
LINEオープンチャット使ってみた!口コミ・感想・良い点・改善点まとめ
LINEオープンチャットの黎明期・全盛期・衰退期への展開を予想してみる
LINEオープンチャット「インスタグラムの会」参加者募集中┃Instagram
自分のサイトにLINEオープンチャットのトークルームを埋め込む方法
LINEオープンチャット運営からのおすすめピックアップルームに掲載されました
LINEオープンチャットほめ合うグループのご紹介
LINEオープンチャット「スニーカー&SNEAKER」靴シューズ好きのコミュニティ
LINEオープンチャット合言葉・コードなど公開設定の方法
LINEオープンチャット紹介「イベント告知&探し🎟!(オフ会、ライブ、配信、実況、展示、セミナー、スポーツなどのイベント開催情報)」
LINEオープンチャット正式リリースはいつ?近日中に迫る!予想は8月19日
LINEオープンチャット「クリエイターズクラブ」のご紹介!クリエイター求ム!
LINEオープンチャットおすすめの「フォニックス英語発音オンラインコミュニティ」
LINEオープンチャット紹介「令和防災サバイバー」震災時のお役立ちコミュ
LINEオープンチャットおすすめ「全米全英ゴルフ実況コミュ」のご紹介
LINEオープンチャットおすすめ「みんなで痩せるダイエットコミュ」の紹介
LINEオープンチャット用のアイコンイラストのご依頼はかみじょー絵師コミュまで
東京都関連のLINEオープンチャットトークルーム一覧
大阪関連のLINEオープンチャット(オプチャ)トークルーム一覧
LINEオープンチャット(オプチャ)荒らし対策まとめ
LINEオープンチャット転職支援や退職代行お悩み相談コミュ┃オプチャ
LINEオープンチャット紹介「大阪おすすめグルメ」参加者350人超える!オプチャ
LINEオープンチャットおすすめ「三浦大知ファンコミュ」が登場!オプチャ
LINEオープンチャット紹介「ラーメン(食べたラーメンの写真と感想を書くコミュ)」
検索できない時のためのLINEオープンチャットゲーム・スマホアプリコミュ一覧
LINEオープンチャット女性向けコミュまとめ
LINEオープンチャット「九州総合コミュ」のご紹介┃町おこし・地域振興
LINEオープンチャット「WordPress全般研究会」グーテンベルク情報も
LINEオープンチャット「松本山雅FCファンコミュニティ」ONE SOUL
LINEオープンチャット紹介「マインドフルネス」
LINEオープンチャット紹介「松本市総合コミュニティ」
LINEオープンチャット「雑談オプチャ」まとめ┆検索できない時のための一覧
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次