するクリアHOME公式ブログ:トップ開発・技術情報ブログ投稿時に使うタグにスタイルを反映する2015.07.01開発・技術情報ツイートシェアポケットこんにちは、ぱくたそで技術的な担当しているYuuです。最初の記事なので、何を書こうか迷いましたが、「何を当たり前なことを言ってるんだ」というタイトルにしてみました。ブログ作るときは、投稿画面で使うタグに対してCSSを設定する必要があるんですけど、意外に数が多いので忘れやすいんですよね。いうことで、折角ぱくたそブログ作ったのでまとめておきます。Typeなのでそれ仕様です。通常ブログを書く際は、「見出し」「強調」「右寄せ・左寄せ」「引用」などいくつかタグを使う機会があります。一般的なCMSを利用して、かつオリジナルテンプレートの場合は、上記タグに対してCSSを適用する必要があります。本文中にclass名を利用したマークアップは利用しない。ブログ書いてる時に、マークアップしてclass名つけるのは面倒ですよね。複数人の場合は、class名を皆に覚えてもらうという手間も。Typeであれば定型文という機能があるのでこちらを利用すると幸せになれそう。本文エリアはdiv要素で囲み適用範囲を限定する。当たり前のことなのですが、h2などに直接スタイルを当てる場合、サイドバーなどでもh2を使っていたらそっちにもスタイルが反映されてしまいます。divで予め囲んでおこうというお話。h2{font-size:120%;}divで囲まれたエリアに使うタグのスタイルを当てていけばOKです。Typeの場合、投稿画面に既にタグ挿入ボタンが用意されています。**ボタンがあるってことは「使える」**ということなので、最低限ここのスタイルは用意してあげます。タグ挿入時にclassを自動挿入する場合もあるので、そういう場合はCMS共通のCSSを入れておいて上げる必要があります。WordPressであれば、「**/wp-content/themes/twentyfourteen/**」などデフォルトテーマのstyle.css内に記述してあるのでこちらを利用します。Typeは、画像挿入で右寄せなどするとStyle属性が強制挿入されるという罠があるので注意。ライターさん向け的なアレ。h2、h3を利用します。大きさとしては、段落に適用した文字サイズよりもはっきりとわかりやすい大きさにしています。h2はよく使いそうなので、borderなどで区切りをつけてあります。ある程度長い文章でも読みやすくなるかと。小見出しに使われるh3もスタイルを当てておき、h4〜h6は強調程度に抑えておくくらいが無難かな。文字サイズ、行間、文字間も微調整済み。ul,olに対してスタイルを適用しています。blockquoteタグにスタイル適用しています。strong、em、mark、smallにも設定済み。Typeはどうしようかなってところで、普通にJSを入れました。href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">CSSのデザインは[githubのリポジトリ](https://github.com/isagalaev/highlight.js/tree/master/src/styles)にいくつかあるので好きなのを読み込むのがいいかと。sublime」が好きだったので下記のように読み込みました。href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/monokai_sublime.min.css">※末尾はmin.cssをつける。codeの中に書けば反映されます。タグはエンコード記述する必要があるので、「<code>」と書かなければいけない・・・。変換については、「[ブログにソースコードを書く時に使う、Chrome用エスケープツールを(結構前に)作りました](http://madroom-project.blogspot.jp/2014/03/chrome.html)」の記事にて拡張機能があったので、こちらを利用しています。Typeの投稿画面をカスタマイズするのであれば下記エントリーが参考になります。http://www.movabletype.jp/beta/52/NewRichEditor.htmlというわけでデザイン要素は抜きにして、説明書っぽい感じで終わります。書いていくうちにもっと必要なのが出てくると思うのでその辺は追々。久しぶりにMT関連の記事書いた気がする。ツイートシェアポケットYuuぱくたそのテクニカル・ディレクター。フリーランスのWebデザイナー/エンジニア。キーワードから探る未来像」や「現場のプロが教えるWeb制作の最新常識」など。白バックや青空を抜いてみよう2019.07.01開発・技術情報すしぱく運営管理人のすしぱくです。そで配布中のフリー素材は、すべてjpeg画像なので透過処理されていません。[レアアイテムをゲットした無課金ユー...人気シーンの写真をまとめた「ぱくたそセレクション」を公開しました2017.12.15開発・技術情報すしぱくぱくたそで公開している写真の中から、ニーズが多いシチュエーションの写真だけ厳選したまとめコンテンツを作ってみました。たそフリー素材セレクション・まとめキ...画像(静止画)の透過加工について、背景色の種類と簡単に抜く方法2017.02.15開発・技術情報すしぱく透過素材(png)のご要望にお応えしたいPhotoshop大好きすしぱくです。Type(以下、MT)のような静的サイトも再評価されてほしい、と期待しております。#ぱくダー2015.12.14開発・技術情報Yuuこんにちは、気がつけばブログリリースしてから2回目の記事というぱくたそブログ実装担当のYuuです。プリセット配布サイト!写真を手軽に加工しよう。無料版(フリー)もあります。今年も「ぱくたそ」をよろしくおねがいします2019.12.282019年もありがとうございました。協賛・スポンサー広告を募集中です。新着のシーンやロケーションコラボレーション可愛ければいいのです。写真を無料でダウンロードできるウェブサービスです。©フリー素材のぱくたそ。