こんにちは、ぱくたそで技術的な担当しているYuuです。 最初の記事なので、何を書こうか迷いましたが、「何を当たり前なことを言ってるんだ」というタイトルにしてみました。

ブログ作るときは、投稿画面で使うタグに対してCSSを設定する必要があるんですけど、意外に数が多いので忘れやすいんですよね。 ということで、折角ぱくたそブログ作ったのでまとめておきます。ちなみに、ぱくたそはMovable Typeなのでそれ仕様です。

通常ブログを書く際は、「見出し」「強調」「右寄せ・左寄せ」「引用」などいくつかタグを使う機会があります。 一般的なCMSを利用して、かつオリジナルテンプレートの場合は、上記タグに対してCSSを適用する必要があります。

まずは前提

本文中にclass名を利用したマークアップは利用しない。

ブログ書いてる時に、マークアップしてclass名つけるのは面倒ですよね。 複数人の場合は、class名を皆に覚えてもらうという手間も。

「どうしてもオリジナルCSSを適用したいんだ!」という場合は、WordPressであれば「AddQuickTag」、Movable Typeであれば定型文という機能があるのでこちらを利用すると幸せになれそう。

本文エリアはdiv要素で囲み適用範囲を限定する。

当たり前のことなのですが、h2などに直接スタイルを当てる場合、サイドバーなどでもh2を使っていたらそっちにもスタイルが反映されてしまいます。ですので、divで予め囲んでおこうというお話。

<div class="entry-body">
<mt:EntryBody>
</div>

.entry-body h2{
font-size:120%;
}

divで囲まれたエリアに使うタグのスタイルを当てていけばOKです。

どのタグのスタイルを用意するか?

WordPressやMovable Typeの場合、投稿画面に既にタグ挿入ボタンが用意されています。 ボタンがあるってことは「使える」ということなので、最低限ここのスタイルは用意してあげます。

WordPress WordPress投稿画面

MovableType Movable Type投稿画面

既存ボタン挿入時にclassが付与される場合

タグ挿入時にclassを自動挿入する場合もあるので、そういう場合はCMS共通のCSSを入れておいて上げる必要があります。 WordPressであれば、「/wp-content/themes/twentyfourteen/」などデフォルトテーマのstyle.css内に記述してあるのでこちらを利用します。(該当部分のみ一部引用)

/* Alignment */
.alignleft {
float: left;
}
.alignright {
float: right;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

※ Movable Typeは、画像挿入で右寄せなどするとStyle属性が強制挿入されるという罠があるので注意。

class="mt-image-right" style="float: right; margin: 0 0 20px 20px;"

ぱくたそブログで使えるタグ

ライターさん向け的なアレ。

見出し

主にh2、h3を利用します。

大きさとしては、段落に適用した文字サイズよりもはっきりとわかりやすい大きさにしています。 特にh2はよく使いそうなので、borderなどで区切りをつけてあります。ある程度長い文章でも読みやすくなるかと。 小見出しに使われるh3もスタイルを当てておき、h4〜h6は強調程度に抑えておくくらいが無難かな。

文字サイズ、行間、文字間も微調整済み。

.entry-body h2{
font-size: XXX;
letter-spacing: XXX;
line-height: XXX;
}

リスト

ul,olに対してスタイルを適用しています。

.entry-body ul,
.entry-body ol{}
.entry-body ul li{}
.entry-body ol li{}
.entry-body ul li ul{}
.entry-body ol li ol{}

引用

blockquoteタグにスタイル適用しています。

.entry-body blockquote{}
.entry-body site{}
.entry-body q{}

強調などインライン要素に適用されるもの

strong、em、mark、smallにも設定済み。

.entry-body strong{}
.entry-body em{}
.entry-body mark{}
.entry-body small{}

コードのシンタックスハイライト

WordPressだとプラグインがあるので、入れるだけでOKってパターンもありますが、Movable Typeはどうしようかなってところで、普通にJSを入れました。

highlight.js

https://highlightjs.org/

ヘッダー部分

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">

CSSのデザインはgithubのリポジトリにいくつかあるので好きなのを読み込むのがいいかと。 僕は「monokai sublime」が好きだったので下記のように読み込みました。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/monokai_sublime.min.css">
※末尾はmin.cssをつける。

フッター部分

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

使い方

codeの中に書けば反映されます。ただし、タグはエンコード記述する必要があるので、「<code>」と書かなければいけない・・・。 変換については、「ブログにソースコードを書く時に使う、Chrome用エスケープツールを(結構前に)作りました」の記事にて拡張機能があったので、こちらを利用しています。

<pre>
<code>
// ここに記述
</code>
</pre>

他Movable Typeの投稿画面をカスタマイズするのであれば下記エントリーが参考になります。 http://www.movabletype.jp/beta/52/NewRichEditor.html

というわけでデザイン要素は抜きにして、説明書っぽい感じで終わります。 おそらく書いていくうちにもっと必要なのが出てくると思うのでその辺は追々。

久しぶりにMT関連の記事書いた気がする。

 掲載企業を募集しています
ぱくたそ公式サービス
ぱくたそ大喜利
ぱくたそ大喜利

ぱくたその写真をみんなでタイトル付けできるサービスです。お題の写真を見て思い浮かんだタイトルを気軽に投稿してください。採用した方にはもれなくフリー素材のタイトルで掲載します。

ぱくたそ大喜利を見る >

ぱくたそプリセット
ぱくたそプリセット

写真加工を手軽に美しく!PhotoshopやLigthroom用のCamera Raw(XMP形式)プリセット配布サービスです。写真をダウンロードした後のひと手間加工で違いを実感してください。

ぱくたそプリセットを見る >

ぱくたそショップでグッズを購入
ぱくたそ公式グッズ

Tシャツやパーカー、ステッカーなど、ぱくたそのオフィシャルグッズをBOOTHにて販売しています。売上の一部は運営費として撮影や企画時の小道具代に利用します。

ぱくたそショップでグッズを購入 >