「はてな記法」でブログ記事を書く

htmlともマークダウン記法とも微妙に異なる「はてな記法」

ここではその「はてな記法」の便利な使い方をメモしておきます。

リアルタイムプレビューを使う

f:id:karupoimou:20190430225041p:plain:w400 — リアルタイムプレビューのボタン

f:id:karupoimou:20190430225147p:plain:w400 — リアルタイムプレビューの表示例

「はてな記法」はすっきりと書ける反面、「見たまま記法」と違って書いた内容がどの様に表示されるの分かりにくいというのはあります。

そこで「リアルタイムプレビュー」機能です。

このリアルタイムプレビューを使うことで、はてな記法でも実際に近い記事の表示を見ながら編集が可能となります。

使用方法は「記事編集」画面の左上に小さく表示されている「リアルタイムプレビューボタン」を押すだけと、非常に簡単です。

2019-04-28

【1分で出来るブログ・カスタマイズ】はてなブログで『次のページへ』ボタンを大きくする方法　デザインCSS

はてなブログに関するものプログラミング

「次のページへボタン」を大きくしたい！

デフォルトで意外と小さく見つけづらい「次のページへ」ボタンを大きくする方法をご紹介します

f:id:karupoimou:20190428092136p:plain:w400 — 右下にある「次のページ」ボタン

CSSコード

.pager-next {
    font-size: 150%;/*数字をいじれば大きさの変更も可能*/
}

上記のコードを「設定」-「デザイン」-「{}デザインCSS」の所に貼り付けるだけで完了です。

適用後

f:id:karupoimou:20190428092257p:plain:w400 — 大きくなった「次のページへ」ボタン

コードの説明

.pager-nextという要素に対してフォントをしています。
なので、ブログの中でのすべての「次のページへ」ボタンにこのデザインが適用されます。

トラブルシューティング　はてなブログで .css が反映されない時の対処

はてなブログに関するもの

症状

「設定」-「デザイン」-「{}デザインCSS」でcssコードをコピペしたのに設定が反映されない

考えられる原因

コードを全角で打っている

不要なところにスペースが入っている

{ 　や　（　などが断片的にはいっていてペアいない

；を付け忘れている

まちがえて：を付けている

そもそもコードが間違っている

CSS内で同じ内容を書いていて、設定が上書きされてしまっている

よくある対処

lifeport-gurigura.jp

saruwakakun.com

www.absbmagic.com

コメントアウトに注意

自分の場合上記のどれにも当てはまらなかったのですが、よく調べてみたら「//」を使ってコメントアウトしていることが原因でした。

CSSのコメントアウトは

/* ここから～～～～ここまでがコメント扱い*/

または

/*　 ここから～～

～～

～～ここまでがコメント扱い　*/

コピペ用
/*  */

という風になります。

よって　//　を誤って使ってしまうとそれ以降の行がすべておかしくなってしまうみたいですね。

techacademy.jp

2019-04-19

はてな記法でコードボックスを書く方法のメモ

ブラウザ拡張機能開発はてなブログに関するもの

はてなブログでコードボックスを使いたい

はてなブログでコードボックスを使うのは「はてな記法」を使うのが簡単です。

はてな記法の使い方

はてな記法は「編集モード」を変えることで使えるようになります。
help.hatenablog.com

help.hatenablog.com

nagoyanofes.hatenadiary.jp

コピペ用

>|| ||<

>||　ここにコードを書く ||<

>|python| ||<

>|python|　ここにコードを書く ||<

記載方法

実際の記載時は、以下の様に書けばOKです。

f:id:karupoimou:20190430221727p:plain

コードボックスのサンプル

import requests
import yaml

payload = {'out': 'yaml'}
r = requests.get('https://api.syosetu.com/novelapi/api/', params=payload).text

print(r)

面倒な人は『単語登録』がオススメ

f:id:karupoimou:20190430222059p:plain — 単語登録

毎回打つのが面倒な人は使用しているIMEの辞書または単語に

「>||」を「＞」として
「||<」を「＜」として
「>||　||<」 を「ソース」

の様にして登録しておくことをオススメします。

これで二度と手で打ち込む必要がなくなります。

Tips

>>|aaaa|

aaaa の所に言語名を書くとハイライトされる。
なお大文字を使うとハイライトされなくなるので、言語名は必ず小文字で書く。

言語コード

apache
css
html
javascript
nginx
php
python
ruby
sh
sql
yaml

コードボックスのデザインはcssで指定

www.foxism.jp

ソースコードをダブルクリックで全選択するやつ

コードボックスのどこかをダブルクリックするだけで、ソースコードを全部選択できるスクリプトです。
当ブログでも使わせてもらっています。

susisu.hatenablog.com

使用方法は簡単。

スクリプトを「設定」ー「デザイン」ー「フッター」の箇所にコピペするだけです。

f:id:karupoimou:20190428105218p:plain:w200 — スクリプトを貼る場所

行番号を表示したい

am1tanaka.hatenablog.com

行番号を表示し、奇数行の背景色を変えるスクリプトとcssです。
当ブログでも使用させていただいています。

背景色は.cssの

#eee

のところを変えるとよいみたいです。

ここにコードを書く

なろう分析記録

『小説家になろう』をふくめ『ネット小説投稿サイト』を分析する。コード置き場,主にPython,javascript,たまに創作。

【3分でわかる！】快適に「はてな記法」でブログ記事を書く方法　リアルタイム表示・画像を直に貼る・ソースコードを書きやすくする方法