Better design, better blog
日々のブログ記事作成で重宝している
記事作成のカスタマイズを一挙に紹介します
もしまだご存知でなければぜひお使い下さい！
LIFEPORTがおすすめする記事作成カスタマイズ
1. 表の作成・挿入
1-1. 表のサンプル
| 表のタイトル | 数値・詳細など |
| 項目1 | ぐ |
| 項目2 | り |
| 項目3 | ぐ |
| 項目4 | ら |
1-2. 表のソースコード
行や列を増やしたい減らしたいは
trとtdをそれぞれ追加・削除して頂くだけで簡単に変更できますよ！
1-3. 表の活用事例
表はブログの実績報告などで重宝しています
実際に使用した記事はこちらです
たった1ヶ月でブログのアクセス数が16倍に！2ヶ月目に取り組んだ記事作成とSEO対策 – LIFEPORT
2. 枠囲み・枠線
2-1. 枠囲みのサンプル
えるしってるか
ぐりぐらは
めんちかつたべれない
2-2. 枠囲みのソースコード
2-3. 枠囲みの活用事例
記事の内容を
最後にまとめたいときに頻繁に使用します
買うと後悔するよ！一人暮らしに不要＆いらない家具家電・インテリアリスト – LIFEPORT
3. 会話形式・チャット形式・吹き出し
3-1. 会話のサンプル
こんにちはドラム教えてますヒゲ先生です
こんにちは10年同じ髪型のguriguraです
3ｰ2. 会話のソースコード
会話を増やしたい・続けたいときは
<–右の会話–>～<–右はここまで–>を追加してください
顔写真は無料のサイトで作成しました！
FaceYourMangaでマンガみたいな可愛いアバター作ろう！
4. ふわっと画像・文字表示
4-1. ふわっと表示のサンプル
4-2. ふわっと表示のソースコード
STEP1：jQuery（フッタに追加）
「ダッシュボード⇒デザイン⇒カスタマイズ⇒フッタ」
この順に進んで以下のjQueryを追加して下さい
STEP2：CSS（デザインCSSに追加）
続いてCSSの追加です
「ダッシュボード⇒デザイン⇒カスタマイズ⇒デザインCSS」
この順に進んで以下のCSSを追加して下さい
STEP3： HTML（記事中にクラス挿入）
上の2つが完了したらあとは記事内にクラスを設定するだけでふわっとします
4-3. ふわっと表示の活用事例
記事を選ばず活用できます
やりすぎるとあざといのでケースバイケースで！
ラ・ラ・ランドに見る。これでいいのか日米の映画ポスターデザインの違い – LIFEPORT
5. ソースコード表示
5-1. ソース表示のサンプル
今まで散々見てきたとおりです！
5-2. ソース表示の方法（おすすめ）
僕はGist貼り付けという方法を採択しました
理由は2つ
単純に簡単です
そして記事作成時にURL1つ挿入するだけだからです
5-3. Gistの表示長さを調整
そのままGistを貼り付けるとソースの長さだけ縦長になってしまいます
少しでも記事全体の長さを抑えるためにデザインCSSへこちらを追加して下さい
20emは20文字分つまり20行です
もちろん設定変更可能です
これでソース部分をスクロールしてくれます
少しは参考になりそうですか？
LIFEPORTもデザインの勉強をして
日々読みやすいブログを目指しています！
新しいデザインカスタマイズを見つけたらまた紹介します！
最後まで読んで頂いてありがとうございました！
