GitHubGistのデザインをカスタマイズする:CSS指定を解説

ウオトミズ(UOTOMIZU)の中の人

GitHubGistについて

GitHubGistのサイト:https://gist.github.com

GitHubGistとは

GitHubが提供するコードをシェアしたり記事に埋め込んだりできるサービス。

Gistの初期デザイン

GitHubのGistの初期デザイン

Gistのデザインをカスタマイズする

今回の完成図
GitHubGistのCSSカスタマイズ完成図

GistのHTMLの構造

GistのHTMLの構造

.gist-file デフォルトではボーダー線が指定してある。ボーダーを消したい時は、border:none(必要に応じて!importantをつける)
.gist-data 行数字とコードの領域。背景色の指定や、高さの指定ができる。
table .gist-dataで背景色を指定するために、tableでは背景色を無色にしておくと便利。
td.blob-nom 行数字の領域。文字色指定や、display: none;にすれば、非表示にできる。
td.blob-code コードの領域。white-space: pre-wrap(必要に応じて!important);と指定すれば、コードを折り返すことが可能。
.gist-meta ファイル名や”hosted with ❤️ GitHub”や”raw code”の領域。背景色などを指定できる。
a:nth-of-type(1) “raw code”のリンクを装飾できる。
a:nth-of-type(2) ファイルページにつながるリンク。「ファイル名(例:index.php)」のリンクを装飾できる。
a:nth-of-type(3) GitHubのサイトに繋がるリンク。”GitHub”のリンクを装飾できる。
img ❤️の絵文字。CSSでfilterを指定することで色を変更することができる。

 

CSS指定

 

応用:WordPressのショートコードを用いて、高さを指定できるようにする

場合によって、コードを全見せしたい時とスクロールしたい時があると思う。その時はあらかじめWordPressでショートコードを作成してclass指定によって高さを指定しておくことで、高さを指定できるようになる。

 

補足:Gistが出力するHTMLコード

参考までに、Gistが出力するHTMLコードを以下に貼っておきます。

各エリアの色やフォントファミリー、フォントサイズなど細かなCSS指定ができるので試して見てください。

 

index.php


<!-----------------------------------

Gistのスクリプトが出力するhtmlコード

------------------------------------->

<div class="gist">

<div class="gist-file">

<!---- ここから:Gistのコードデータ ---->
<div class="gist-data">

<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-function-php" class="file">
<div class="blob-wrapper data type-php" itemprop="text">

<!---- ここから:table要素 ---->
<table class="highlight tab-size js-file-line-container" data-tab-size="8">

<tr>

<!---- 行数字の出力 ---->
<td id="file-function-php-L1" class="blob-num js-line-number" class="blob-num js-line-number">
::before
</td>

<!---- コードの出力 ---->
<td id="file-function-php-LC1" class="blob-code blob-code-inner js-file-line">
::before

ここにコードやコメントが出力されます。

</td>

</tr>
<tr>...</tr><!--後は、trの繰り返し-->

</table>
<!---- ここまで:table要素 ---->

</div>
</div>
</div>

</div>
<!---- ここまで:Gistのコードデータ ---->

<!---- ここから:Gistのメタ情報 ---->
<div class="gist-meta">

<!-- "raw code"へのリンク -->
<a href="https://gist.github.com/yuki-shi/e6c2e290647d917cb48ba95e1c14ecad/raw/737081dd69d98f1be905784861715a9cede30130/function.php" style="float:right">view raw</a>

<!-- ファイル名へのリンク -->
<a href="https://gist.github.com/yuki-shi/e6c2e290647d917cb48ba95e1c14ecad#file-function-php">function.php</a> hosted with by

<!-- ハートの絵文字 -->
<img class="emoji" draggle="false" alt="❤︎" src="https://s.w.org/images/core/emoji/11/svg/2764.svg">

<!-- GitHubサイトへのリンク -->
<a href="https://github.com">GitHub</a>

</div>

<!---- ここまで:Gistのメタ情報 ---->

</div>

</div>

 

 

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO