github-markdown-cssを無理やりWordPressにねじ込んだ話

2018-11-10
css3github
    

目次

概要

github-markdown-cssを既存のWordpressのテーマに組み込んだ話。 CSSとかあんまりわかってないけど、とりあえずキレイに動きました。

github-markdown-cssについて

github-markdown-css

https://github.com/sindresorhus/github-markdown-css

やったこと

  • github-markdown-cssのCDNをheadタグに埋め込む
  • bodyタグのclassに追加する
  • 細かい調整。一部CSSの削除

github-markdown-cssのCDNをheadタグに埋め込む

link属性として https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.css をheadタグに追加しました。

bodyタグのclassに追加する

当たり前ですが、要素のclassにmarkdown-bodyが無いと適用されません。 wordpressのテーマを見るとベタで書くのが厳しかったので、JSで動的に属性を追加することにしました。

(function(){document.body.classList.add("markdown-body");})();

これによってgithub-markdown-cssが反映されます。

細かい調整。一部CSSの削除

上記の方法は元のデザイン上書きしているため、おかしな箇所が出てくるかと思います。

特にhタグの中のaタグが青く表示されてしまっていたため、これを無効化しました。

.markdown-body a{color:#000}

ビフォーアフター

ビフォー

アフター

若干、原色を柔らかい色にする補正が入っているのは気のせいでしょうか...?

まあ、キレイになったのでよし

関連

https://qiita.com/__mick/items/c80fab6c185a41882880

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

GitHubのリポジトリをGitLabに同期する GitLabのミラーリング機能
GitLabのミラーリングについて GitHubのリポジトリをGitLabに反映する その他 参考 GitLabのミラーリング機能によりGitHubなどの外部のリポジトリとのミラーリングを行うことができます。 これを使ってGitHub…

Gitの初心者向け入門資料を集めてみた
バージョン管理システムとして利用される事が多いGitですが、初心者には意外とハードルが高かったりするため、初心者向け入門資料を集めてみました。 Git入門資料 https://gist.github.com/s-yoshiki/3ef9bfde7c0b…

GitHubのリンクカードを作れるサービス
GitHub Repository Card for every web site ブログ埋め込んでみる GitHubのリポジトリのカードを作れるサービス(GitHub Repository Card for every web site)通称「gh-card…

mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介
mavonEditor セットアップ カスタマイズ デモ コード APIの紹介 プロパティ ツールバー イベントメソッド おまけ : mavonEditorのサイズの固定 mavonEditor https://github.com/hinesboy…

WordPressに貼り付けたコードが等幅フォントで表示されないのでcssを適用して修正する。highlight.js
追加したcss WordPressのコードハイライトにhighlight.jsを利用してますが、 なぜかフォントが等幅で表示されなかったので、カスタマイズ機能からcssを適用した話。 highlight.jsに関しては利用しているテーマ:cocoon…

JSでルーレットを作った。
DEMO 追記 2019/01/20 だいぶ前にJSで作ったルーレットを公開します。 特にフレームワークとか使っていません。 DEMO デモ | 別ウィンドウで開く 以上。 追記 2019/01/2…

semantic uiでブログカードっぽいものをたくさん作ってみる。コピペでOK
デモ 感想 最近UI周り触れる機会があったが、 今更Bootstarpに手をつけるのも嫌なのでsemantic uiを始めることにしました。 そこで、 今回はオシャレブログとかのindexページでよく見かけるカード型UIのデザインをsemantic ui…

【JavaScript】凸包(グラハムスキャン)を可視化・アニメーション【Canvas】
凸包 DEMO 参考 前回に引き続き 凸包(グラハムスキャン)のスキャンする様子をアニメーションにして可視化してみた。 ライブラリとかは使わず、Canvasにそのまま描画する。 凸包 凸包 - WikiPedia…

【JavaScript】K-meansをアニメーション・可視化したら蜘蛛みたいな動きをした|その1
デモ 他 canavsの勉強も兼ねて、機械学習とかで使われるk-meansによるクラスタリングを可視化してみた。 そしたら、ちょっと気持ち悪い蜘蛛みたいな動きをするようになった。 環境は、 JavaScript Canvas API…

最新の投稿

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス
UIコンポーネント VueSocial CKEditor 5 Vue.Draggable Vuetable 2 vuejs-datepicker Kalendar Vue Apexcharts Vue.js Google Charts vue-cart WebIDE…

GitHubのリポジトリをGitLabに同期する GitLabのミラーリング機能
GitLabのミラーリングについて GitHubのリポジトリをGitLabに反映する その他 参考 GitLabのミラーリング機能によりGitHubなどの外部のリポジトリとのミラーリングを行うことができます。 これを使ってGitHub…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

ハイフンとかマイナスとかダッシュとか

Tags

Dates

© 2020   404 motivation not found