ココログ_BLOGのCSS設定
2018/3/1
ココログ_BLOGのCSS設定
1.概要
BLOG内容をMarkdown文書で作成し'VS code' のプラグインmd2htmlでMarkdownをHTMLに変換してアップするようになり、それに合ったCSSを設定する必要がでてきた。そこで以下のようなやり方でCSS作成/設定を行なったので、ここに記する。
2.CSS作成
まず、必要なCSSを以下のような手順で作成した。
(1)'VS code'のMD2HTMLプラグインで出力したHTMLの<style>...</style>の部分を切り出して一時的なテキストファイルに置く。(複数あるので切り出して配置順に置く)
(2)上で作成したCSSだと、プログラムコード部分のフォントが小さく、改行幅が広くて見難いことと、表の枠が表示されないなどの欠点があるので、さらに以下のURLに記載されている方法で取り出したCSSを後ろに追加する。
githubのmarkdown-cssをぶっこ抜く方法
(3)上で作成したCCSを「ブログサービス(ココログ)/デザイン/カスタムCSSを編集」で書き込む。
以下のURLからダウンロードして設定しても良い。
上の方法で作成したCSS
(4)重要
上のCSS.設定は、「ブログ テンプレートセットを編集」で「カスタム・テーマ」に切り替えないと有効にならないので注意すること。
3.ブログへの張り込み
できたHTMLの張り込みは<body></body>に囲まれた部分のみをブログ編集画面でコピー&ペーストする。
4.参考URL
https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css
5.テスト表示
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
| Markdown | Less | Pretty |
|---|---|---|
| Still | renders | nicely |
| 1 | 2 | 3 |
mport clock from 'clock';
import { preferences } from 'user-settings';
import { FitFont } from 'fitfont';
/*
//Kanji Fonts are generated by the following commad:
npx fitfont-generate KouzanBrushFont.ttf 70 0123456789.MTWFSabcdefghijklmnopqrstuvwxyz零壱弐参肆伍陸質捌玖拾一二三四五六七八九十時分秒月日曜火水木金
*/
const MonthNames = ['壱','弐','参','肆','伍','陸','質','捌','玖','拾','拾壱','拾弐'];
...
// declaration of the FitFont objects
const line0 = new FitFont({ id:'line0', font:'KouzanBrushFont_70', halign: 'middle'});
...
const updateClock = () => {
const now = new Date();
let hours = now.getHours();
if (preferences.clockDisplay === '12h') {
hours = hours % 12 || 12;
}
//let year = now.getFullYear();
let month = now.getMonth();
let date = now.getDate();
let week = now.getDay();
let minutes = now.getMinutes();
line0.text = MonthNames[month]+DateNames[date]; //月日
line1.text = WeekNames[week]; //曜日
line2.text = HourNames[Math.floor(hours / 10)]+HourNames[hours % 10]+HourNames[Math.floor(minutes / 10)]+HourNames[minutes % 10]; //時刻
}
clock.granularity = 'minutes';
clock.ontick = (evt) => updateClock();
updateClock();
bash:
git clone https:xxxx.git
cd xxxx
mkdir test
以上
| 固定リンク
「linux」カテゴリの記事
- platfomioを使ってnaitive(linux/windows)のプログラムをビルドする方法(2021.03.10)
- micro:bit Yotta開発ツール(linux版)(2021.01.09)
- PlatformIOをRaspberryPi4で動かしてみる(実験)(2020.10.20)
- headless RaspberryPiインストール方法(v2)(2020.10.20)
- wio-terminalのファームウェア・アップデートについて(linux版)(2020.10.15)
コメント