以前、WordPressなどのブログにCSSやHTMLなどのソースコードを表示させるための方法としてGithubのいち機能であるGistと言うものがあると紹介をしました。
http://www.daimaclog.com/2018/01/wp-customize-gana.htmlこのGist現在もよく使用させていただいていますが、表示が簡素というかもう少しわかりやすくしたいなということでCSSを使って、見た目を変えてみましたので、今回はその話をしたいと思います。
簡単にできますし、コピペでもOKですので、ぜひともみなさんも真似をしてみてください。
今回行ったカスタマイズ
今回行ったカスタマイズはややこしいものではありません。シンプルに高さのpxを変えたり、背景色を変えたりしただけです。
ただ、GistのCSSのプロパティの中には、!importantというコードを入れないと、うまくCSSが反映されないところもあるみたいです。現に僕もGistで表示される画面の下にあるメタ情報欄の背景色を変えようとしましたが、うまく反映されず、!inportantを入れて、強制的に反映させるようなことをしました。
メタ情報欄の背景色
gistには、コードが表示される箇所の下に、Gistのファイル名やコピーしやすいように画面を変えるview rawというボタンなどが表示されているエリアがあります。
このエリアの背景色を変更するためのソースコードです。
このエリアは.gist-metaというクラスで定義されているので、そのクラスのプロパティを変更するというのが、この修正内容の概要です。
使用するプロパティはbackgroundを使用します。
なおAMPでは、Gistのenbedが表示されないので、もし携帯・スマホでソースコードを確認する際は、このリンクをクリックしてください。
コード表示欄の高さ設定
ソースコードって結構長いものが多いと思います。デフォルトのGistのembedはすべての行を表示するので、10行程度であれば問題無いと思いますが、50行や70行になったりするともうブログの画面一覧にソースコードが表示されてしまいかねません。
なので、画面に表示できるソースコードの高さを定義し、それ以上の行がある場合はスクロールするようにしてあげることをしました。
こうすれば、画面一杯にソースコードが表示されるようなことはなくなります。
ちなみに高さはpxで定義しています。僕は200pxで定義しましたが、人によっては400pxで定義されている方もいます。僕自身あまり長いソースコードを書いていないので、そういった意味で200pxでも良いのかなと思い、この高さにしました。
なおAMPでは、Gistのenbedが表示されないので、もし携帯・スマホでソースコードを確認する際は、このリンクをクリックしてください。
シンタックスハイライトさせるためには
僕が最初にGistを使ったとき、ブログに貼り付けてもタグの部分の色が変わりませんでした。他のサイトではGist内のタグは色が変わっていたにも関わらずです。
なんでだろうと調べてみると簡単でした。Gistでファイルを作成して保存する時に名称に、拡張子を淹れることでシンタックスハイライトがなされます。
簡単なことなんですが、見落としがちですので、みなさんも気をつけてください。
Gistのカスタムはこの辺で終わり
まだ色々とカスタムする余地があるようですが、とりあえずこの辺でやめておきます。あまり時間をかけるところでも内容です。ただ他にも項目としては、
- 奇数行や偶数行のコードに色を付ける
- コードを太字にする
といったこともできるようですので、一度試してみるのも良いかもしれません。ぜひみなさんもやってみてはどうでしょうか。
コメント