稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

副業で稼ぐ仕組みの作り方

ワードプレスにソースコードを表示させるプラグイン【SyntaxHighlighter】

投稿日:2012年6月2日 更新日:

ワードプレスにhtmlタグなどのソースコードを記入した際にわかりやすくする為のプラグインです。

はじめに

SyntaxHighlighterは個人的な使い方としてはJavaScriptのコードやhtmlやcssのコードのメモとして使用する事が多いですかね。もしくは見る側がソースコードをコピペしやすいようにする為のプラグインと言っても過言じゃないかもしれませんね。

もくじ

  1. ダウンロードしよう
  2. SyntaxHighlighterの使い方
  3. htmlを記入してみよう
  4. cssを記入してみよう
  5. コードをハイライト
  6. 見栄えをかえてみよう
  7. さいごに

注意事項

SyntaxHighlighterのプラグインは似ているのが多いのでインストールする際に間違わないように気を付けよう

ダウンロードしよう

ワードプレス内からのダウンロードをお勧めします

管理画面 > プラグイン > 新規追加 > SyntaxHighlighter Evolved

で検索し、インストールしてください。

インストールが終わると必ずプラグインを有効にして下さいね。

SyntaxHighlighterの使い方

使い方はとっても簡単

基本的には使いたい言語によって変わるのですが[使う言語][/使う言語]とタグで閉じるイメージです。

htmlを使いたい場合

[html]

ここにhtmlを記入する

[/html]

※[ と ]は必ず半角で記入して下さい。

このように使いたい言語をカッコでくくるだけで使用出来ます。

htmlを記入してみよう

個人的なメモでもhtmlは使う頻度が多いかもしれないですね。

ここに直接コードを記入すると

<html>

<p class=”kurage”>そんな事よりくらげの話でもしようぜ</p>

</html>

となります。それをSyntaxHighlighterを使って表記すると


<p class="kurage">そんな事よりくらげの話でもしようぜ</p>

となります。

一行程度だと分かりにくいですが、長いコードになると文章に埋もれる事が多いので自分のメモとして使用する場合でもSyntaxHighlighterを使う事をお勧めします

cssを記入してみよう

cssは気に入った、かつ直に打てないようなコードのメモに

cssを直接入力した場合

p.kurage {

font-size:20px;

font-weight:bold;

color:#F00;

margin:10px;

text-align:center;}


p.kurage {

font-size:20px;

font-weight:bold;

color:#F00;

margin:10px;

text-align:center;}

となります。どうですか?先ほどのhtmlの一行のコードに比べると長いのでわかりやすいと思います。Java Scriptなどの長いコードだとかなり見やすくなりますのでお勧めします。ちなみに先ほど入力したのはこのように表示されます。

そんな事よりくらげの話でもしようぜ

コードのをハイライト

それこそ長いコードを使用する際に使いたいですね

一部をハイライトする場合
例えば3行目と7行目をハイライト

[css highlight=”3,7″]
cssを記入
[/css]


p.kurage {

font-size:20px;

font-weight:bold;

color:#F00;

margin:10px;

text-align:center;}

範囲をハイライトする場合
例えば3行目から7行目をハイライト

[css highlight=”,3-7″]
cssを記入
[/css]


p.kurage {

font-size:20px;

font-weight:bold;

color:#F00;

margin:10px;

text-align:center;}

※範囲の場合は何故か,(カンマ)をつけないと表示されませんでした。

見栄えをかえてみよう

デザインによって色合いを変えられる

ブログのデザインの事を考え、何パターンかデザインと言うか色合いを変える事が可能です。

管理画面 > 設定 > SyntaxHighlighter

この中のテーマを変える事で見栄えを変えられます。

Default

Django

Eclipse

これ以外にもテーマはあるのでお好きなテーマをお選びください。

さいごに

自分のメモとして使うだけでもやっぱり見やすい方が良いなぁって事でこのプラグインを入れました。最低限自分が見やすい物を制作しないと意味がないなと思い、プラグインを導入する事にしました。

-副業で稼ぐ仕組みの作り方
-

執筆者:


comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

ECCUBEのポイント関連のバグ

最終保持ポイントがマイナス表示にならないように調整して下さい。って出てる人向けのバグ修正方法 関連記事: ワードプレスに任意の画像サイズを追加する方法 スマホでアクセスした時だけ違う内容を表示させる方 …

ECCUBE4で規格編集が出来ない場合

ECCUBE4でCSV登録も管理画面からも規格が編集できない商品が出てきた場合 関連記事: ECキューブに商品登録する時はCSVを使おう アフィリエイト用リンクをクリックされやすくするテクニック ti …

カスタムフィールドのループで出力数を決める

ループに登録されている情報を一部表示させたい場合に使えます。 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 カスタムフィールドのループ内でループを使う方法 PHPでecho …

年のみphpで出力する

ホームページなどでコピーライトが2011年とか見ると少しさみしくなってしまいます。 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 カスタムフィールドを使って計算 WordP …

ECCUBE2で一覧ページの表示件数を変更する方法

一覧ページは本当に簡単に変更する事が出来ますよ 関連記事: Contact Form 7の送信元をメールアドレスにする方法【さくら】 ECCUBE2.12のカテゴリに子カテゴリを表示させる方法 ECC …