LIFEPORT

人生に良い悪いはない。来た道進む先が違うだけ。

表作成や会話形式・ソース表示などブログ記事がオシャレになるデザインカスタマイズ集

f:id:ayame253:20170403145309j:plain

Better design, better blog

日々のブログ記事作成で重宝している
記事作成のカスタマイズを一挙に紹介します

もしまだご存知でなければぜひお使い下さい!

LIFEPORTがおすすめする記事作成カスタマイズ

1. 表の作成・挿入

1-1. 表のサンプル

表のタイトル 数値・詳細など
項目1
項目2
項目3
項目4

1-2. 表のソースコード

行や列を増やしたい減らしたいは
trとtdをそれぞれ追加・削除して頂くだけで簡単に変更できますよ!

1-3. 表の活用事例

表はブログの実績報告などで重宝しています
実際に使用した記事はこちらです

navygrapewalk.hatenablog.jp

2. 枠囲み・枠線

2-1. 枠囲みのサンプル

タイトル
えるしってるか

ぐりぐらは

めんちかつたべれない

2-2. 枠囲みのソースコード

2-3. 枠囲みの活用事例

記事の内容を
最後にまとめたいときに頻繁に使用します

navygrapewalk.hatenablog.jp

3. 会話形式・チャット形式・吹き出し

3-1. 会話のサンプル

こんにちはドラム教えてますヒゲ先生です

こんにちは10年同じ髪型のguriguraです

3ー2. 会話のソースコード

会話を増やしたい・続けたいときは
<–右の会話–>~<–右はここまで–>を追加してください

顔写真は無料のサイトで作成しました!

3ー3. 会話の活用事例

LIFEPORTでは私guriguraの『ドラマーへの道』で
先生と僕との実際の会話を表現したいときに使用しています

navygrapewalk.hatenablog.jp

も、もし良かったら
ドラマーの道もよろしくおねがいします!

4. ふわっと画像・文字表示

4-1. ふわっと表示のサンプル

f:id:ayame253:20170403135540j:plain

4-2. ふわっと表示のソースコード

STEP1:jQuery(フッタに追加)

「ダッシュボード⇒デザイン⇒カスタマイズ⇒フッタ」

この順に進んで以下のjQueryを追加して下さい

STEP2:CSS(デザインCSSに追加)

続いてCSSの追加です

「ダッシュボード⇒デザイン⇒カスタマイズ⇒デザインCSS

この順に進んで以下のCSSを追加して下さい

STEP3: HTML(記事中にクラス挿入)

上の2つが完了したらあとは記事内にクラスを設定するだけでふわっとします

4-3. ふわっと表示の活用事例

記事を選ばず活用できます

やりすぎるとあざといのでケースバイケースで!

navygrapewalk.hatenablog.jp

5. ソースコード表示

5-1. ソース表示のサンプル


今まで散々見てきたとおりです!


5-2. ソース表示の方法(おすすめ)

僕はGist貼り付けという方法を採択しました

理由は2つ

単純に簡単です

そして記事作成時にURL1つ挿入するだけだからです

staff.hatenablog.com

5-3. Gistの表示長さを調整

そのままGistを貼り付けるとソースの長さだけ縦長になってしまいます

少しでも記事全体の長さを抑えるためにデザインCSSへこちらを追加して下さい

20emは20文字分つまり20行です もちろん設定変更可能です

これでソース部分をスクロールしてくれます


少しは参考になりそうですか?

LIFEPORTもデザインの勉強をして 日々読みやすいブログを目指しています!

新しいデザインカスタマイズを見つけたらまた紹介します!

最後まで読んで頂いてありがとうございました!