WordPressの設定

早くて綺麗で文句なし!GistでWordPressにコードを表示してみよう

更新日:

Gistのコード表示を見易くしよう

Gistに登録したコードを読み込んで表示する  設定は上手くいきましたか?

 

次に表示されているコードを見易くしていきます。

POINT!

追加CSSに追記しよう

今回CSS追記した場所は「子テーマのStyle.CSS」でなく、WordPressの既存機能「追加CSS」に追記しました。

(但しテーマによっては非推奨の恐れがあります。)

コード表示の高さを指定するCSS

表示するソースコード枠の高さを指定します。

WordPress,コード,表示

🔽

指定した高さ以上になると自動で "スクロール表示" されるのでとても便利です。お好みで300pxの数値を変更してください。

 

奇数行だけ配色するCSS

奇数行だけ配色するCSSです。

WordPress,コード,表示

🔽

下記コード「2n+1」➜「2n」に変更すれば偶数行だけに配色することも可能です。

 

フッターに配色するCSS

コード枠のフッター箇所に配色するCSSです。

WordPress,コード,表示

🔽

配色が濃すぎるとテキストが見えなくなるので、色の明るさを調整しながら「#92d2fc」箇所を変更して下さい。

 

コード上下に余白を設けるCSS

コードの上下に余白を設けるCSSです。設定後はAfter画像のように枠の上下に余白が挿入されます。

Before

WordPress,コード,表示

After

WordPress,コード,表示

🔽

このサイトでは適用していませんが、余白があったほうが見やすいかもです。

 

コードを太字にするCSS

コードを太字にするCSSです。テキストを太字にしたのと同じです。

 

Gistのコード表示を一括でカスタムするCSS

1〜5のCSSをすべてくっつけたCSSです。このサイトと同じ仕様に出来ます。コピペして使って下さい。

 

参考にさせていただいた記事

今回ご紹介させていただいたCSSは「うらなか書房様」の記事を超参考にさせていただきました。

GitHub Gistを使うとブログにコードを簡単、綺麗に表示できる

本当にありがとうございますm(_ _)m

関連記事CSSボタンをアニメーション!CSShakeなら簡単にカスタマイズ出来るよ!

CSSカスタム!
CSSボタンをアニメーション!CSShakeなら簡単にカスタマイズ出来るよ!

開いたページのCSSボタンがこんな感じに震えたら・・   あいうえお   とっても楽しい(というか目障り)ですよね\(^o^)/   前回CSSボタンでアニメーション記事 ...

続きを見る

まとめ

Gistを使ってWordPressに綺麗なコードを表示することができましたか?

 

Githubへアカウント登録してしまえば、

  1. Gistへソースを登録
  2. ソースURLをコピー
  3. ソースURLを記事に貼付け

という3STEPで記事中にコード表示が可能です。そもそもコードの版数管理の用途で使われるWEBサービスのGist。

 

普段からソースをアップしておくことで、突然PCが使えなくなっても困りません。

 

無料で使えてプラグインも不要、さらにオリジナル性も出せるのでぜひ一度使ってみて下さい(^^)

oyakun
メールや記事の雛形、定型文、画像などもGistにアップ出来ます。そのうちWordPressが要らなくなったり。。は流石にないですね 笑

オススメWordPressが重い!プラグインを見直すだけで表示速度が4倍に?

オススメWordPressのカスタマイズが表示されない!?一瞬で解決できるぞ!

自動でカウント?
affinger,自動カウント,使い方
AFFINGER自動カウント機能の使い方。番号付与がガチで捗る

見出しの番号を自動カウントで付与出来たら・・ ライティングが捗りますよね(^^)   今回はAFFINGER(WING)の新機能「カウント数の自動表示」機能をご紹介いたします。 この機能のス ...

続きを見る

バナー作成!
affinger,バナー,作成
AFFINGERでバナーを作成する方法が簡単過ぎて泣ける

ツールを使わずクリックでバナーを作成できたら・・ とっても嬉しいですよね(^^)   今回はAFFINGERのテーマアップデートによって追加された新機能、「バナーボックス」の使用方法について ...

続きを見る



  • この記事を書いた人
  • 最新記事
oyakun

oyakun

30代半ば♂妻・子3人の5人で日々激戦中。Google app script&VBA初心者が自分の備忘録を兼ねて「スプレッドシート、Excel、WordPress、plugin」の設定等、主にブログやアフィリエイト周辺のtipsを背伸びしながらご紹介しています。

Copyright© OYAKUDACHI.XYZ , 2018 All Rights Reserved.