PCゲーマーのWebデザイン備忘録スマートフォン用の表示で見るPCゲーマーのWebデザイン備忘録PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。[はてなブログ]ブログテーマカスタマイズ開発環境の作り方この広告は、90日以上更新していないブログに表示しています。Designer(@NoobWebDesigner)です!今回は、はてなブログのテンプレートカスタマイズ開発環境の作り方をご紹介します。はてなブログ公式が公開している「Hatena-Blog-Theme-Boilerplate」を利用して、開発環境を整えます。こちらの環境を整えることによって、Node.jsを利用したリアルタイムプレビューとSassを利用したCSSのカスタマイズが可能です。Node.jsをインストールする。作成と登録Hatena-Blog-Theme-Boilerplateをインストールはてなブログ側での設定カスタマイズ用ブログを作成するブログの設定をするブログに適応してあるブログテーマを削除する(3/10追記)サンプルエントリーを投稿する。ブログの表示を確認する。Sassを編集してカスタマイズする参考文献Node.jsをインストールする。None.jsをターミナルを使ってインストールします。詳しいインストール方法は前回ブログに書きましたのでご参照ください。game-web-design.hatenadiary.comHatena-Blog-Theme-BoilerplateのインストールGitHubからHatena-Blog-Theme-Boilerplateをインストールします。Keyの作成と登録が必要になりますので、下記を参考に準備をしてください。qiita.comqiita.comHatena-Blog-Theme-BoilerplateをインストールHatena-Blog-Theme-Boilerplateをインストールしていきます。今回は/Users/ユーザー名/blog/new-themeにHatena-Blog-Theme-Boilerplateをインストールします。ターミナルを開いて下記を実行します。インストールは終わると思います。このままnpmをインストールします。ターミナルに下記を入力して実行します。installnpmをインストールした後で、npmを実行し、Hatena-Blog-Theme-Boilerplateが動くかどうか確認します。start下記のようなステータスが現れたらインストール成功です。boilerplate.css.mapが作成されます。Cを押して、Hatena-Blog-Theme-Boilerplateを一旦終了させます。はてなブログ側での設定カスタマイズ用ブログを作成するマイブログ一覧から「新しいブログを作成」を押して新しいブログを作ります。新しいブログのURLは公開するものではないので、任意のURLと「自分のみ」公開を選択して新しいブログを作ります。ブログの設定をするブログメニューの「設定」から「基本設定」内で「編集モード」を「はてな記法モード」を選択します。「詳細設定」より「検索エンジン最適化」の「headに要素を追加」に下記を追記します。src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>ブログに適応してあるブログテーマを削除する(3/10追記)「デザイン」より「カスタマイズ」を選択し、「デザインCSS」を下記に書き換えます。*/サンプルエントリーを投稿する。はてなブログ公式が用意している、表示テスト用のサンプルエントリーを投稿します。ヘルプ下記をコピーして、ブログを投稿します。表示確認のため3〜4記事ほど投稿するとなお良いと思います。段落あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。左[f:id:hatenablog:20101106100658j:image:w300:left]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。右[f:id:hatenablog:20101106100658j:image:w300:right]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。ブロック[f:id:hatenablog:20101106100658j:image:w300]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。大きい画像[f:id:hatenablog:20101106100658j:image]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。罫線<hr><h1>h1見出し</h1><p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br/>ABCDEFGHIJKLMabcdefghijklm1234567890</p><h2>h2見出し</h2><p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br/>ABCDEFGHIJKLMabcdefghijklm1234567890</p>*h3見出し(*)あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。h4見出し(**)あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。h5見出し(***)あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。ABCDEFGHIJKLMabcdefghijklm1234567890<h6>h6見出し</h6><p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。asinあのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。[asin:4798110523:detail]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。はてなダイアリー日記>本日(11月12日)から11月27日まで、はてなダイアリーの公開デザインコンテスト「公開デザイン祭2007秋」を開催します。リスト(ul,ol,dl)あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。-大賞1名:Amazonギフト券5万円分-入選9名:Amazonギフト券1万円分--大賞1名:Amazonギフト券5万円分--入選9名:Amazonギフト券1万円分あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。+大賞1名:Amazonギフト券5万円分+入選9名:Amazonギフト券1万円分++大賞1名:Amazonギフト券5万円分++入選9名:Amazonギフト券1万円分あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。テーブルあのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。|*名前|*色|*個数||りんご|赤|1||みかん|だいだい|2|あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。height:999px;}||<ブログの表示を確認する。ここで一旦ブログの表示を確認します。下記の画像のように表示されているかと思います。ここで先ほどインストールしたHatena-Blog-Theme-Boilerplateをもう一度起動します。startもう一度ブログの表示を確認します。下記のようにブログにCSSが反映されていれば一通りの設定は完了です。Sassを編集してカスタマイズするHatena-Blog-Theme-BoilerplateはSassで作られているので、Sassを編集していきます。試しにタイトルの文字の大きさを修正します。scssフォルダからlibフォルダを開き_core.scssを開きます。3remに書き換えます。するとデスクトップでのタイトル文字の大きさが変化します。_core.scssには、ブログテーマの主なスタイルが収められているので、カスタマイズをする際はこのファイルを中心に修正していくといいと思います。NoobWebDesignerはてなブログをはじめよう!game-web-designさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。