invited.意識は幻想なのか?自由意志の存在に対する、脳科学と哲学の論争のまとめ最速・確実に実用英語を鍛える勉強法と10の良書・教材:上級編(TOEIC900)レスター奇跡の優勝達成!時系列でその感動が分かる、一年間の総まとめこの広告は、90日以上更新していないブログに表示しています。2016-04-14コピペで始めるはてなブログテーマDUDEのカスタマイズ集!フォント・色から自分らしくブログシェアするBookmark!FacebookTwitterGoogle+Pocket当ブログは移転しました。5秒後に自動で新ブログの同記事に移動します。人気ブログLITERALLYの著者CatNoseさんが2016年1月17日に発表した、最強のはてなブログテーマDUDE。このテーマを使えば、初めからオシャレなブログができてしまうということで異常なほどの人気を誇る。どれほどの人気かというと、テーマ発表後3ヶ月に満たない2016年4月14日現在で、インストール数3187。はてなブログの人気テーマランキングで堂々の2位につけている。何を隠そう、このブログももちろんDUDEを使用している。DUDEを選んでからもうすぐ一ヶ月になるが、スマホ表示まで含めて一通り満足のいくカスタマイズができた。本記事ではこの経験をもとに、はてなブログテーマDUDEに特化したカスタマイズ解説をしていく。読み進めていくうちにcssの基本が分かるくらい丁寧に説明したつもりなので、全く知識のない人もぜひ挑戦してみてほしい。DUDEに特化といっても、はてなブログであればcssのクラスやidの指定は基本的に同じなので、そのままコピペでこの記事のコードを使えるものも多い。雰囲気に合わせる具体的な設定の説明に入る前に、大事なことを。ブログのデザイン作りで一番重要なことは、ブログの雰囲気に合わせてカスタマイズしていくことだ。考えてみれば当たり前のことだが、フォントや色遣いなどに唯一絶対の正解はない。料理ブログなら、暖色(赤、茶系統)を中心に構成すべきであり、青や紫といった食欲を削ぐような色は使いづらい。逆に、テクノロジーやプログラミング関係であれば、クールなイメージの黒や青を中心に構成すべきだ。このように、ブログのテーマにあわせてデザインを作っていくことで、ブログがもっと見やすくオシャレになる。女性が男性の好きな服装を聞かれたときに言う、「服は似合ってればいい」というセリフがある。ユニクロでも似合っていればオシャレに見えるし、いくら高級なブランド服でも、似合っていないとダサいということだ。ブログテーマも同じように、ブログの雰囲気とデザインがマッチしていることが一番重要だ。以下では、はてなブログテーマDUDEのカスタマイズ法を紹介する。それぞれのカスタマイズを行うにあたっては、あなたのブログの雰囲気のことを常に頭の片隅に置いておくことをオススメする。Lab.の上部はこのようになっている。タイトル・紹介文のフォントの変更DUDEの初期設定のブログタイトルのフォントはかなりポップ寄りだ。あなたのブログがポップな雰囲気ではない場合、このままのフォントでは合わないかもしれない。ここはブログの顔といえる部分なので、フォント選びはかなり重要。フォントはGoogleフォントから選ぼう。フォントは、こちらから。Sansというフォントを採用した。使用するフォントを選んだら、はてなブログにそのフォントを導入する。上記ページにはてなブログへのGoogleフォントの導入の仕方も解説しているので、読みながらやってみてほしい。Googleフォントの導入が完了したら、デザインcss(ダッシュボード>デザイン>カスタマイズ>デザインcss)をいじって、実際にフォント変更を適用していく。「デザインcssをいじってください。はい、どうぞ」と言われても、初心者には難しい。コピペで対応できるよう、DUDEの作りにあわせて以下に説明する。ここでは、上の画像の1をブログタイトル、2をブログ説明、3をヘッドタイトル、4をヘッド紹介文と呼ぶことにする。/*ヘッド紹介文のフォント変更*/これをデザインcss(ダッシュボード>デザイン>カスタマイズ>デザインcss)にコピペする。コード中のフォント名と書かれた部分を、自分が使いたいフォント名に変更すれば完了。ちなみに、変更したいフォント名にスペースや全角文字が含まれている場合には、フォント名をシングルクオーテーションまたはダブルクオーテーションマークで囲む必要がある。考えるのがめんどくさければ、フォント名は何でも全部ダブルクオーテーションマークで囲んでしまっても機能する。/*~*/で囲まれた部分は、cssでは透明人間のように無視されるので、消す必要はない。後で見て分かるためのメモとして残しておいてほしい。フォント名をコンマで区切って並べることで、フォントの優先順位を指定することができる。タイトルに英語と日本語が混ざっていて、英語用フォントと日本語用フォントを同時に設定したい場合には、以下のように英語用フォントを先に、日本語用フォントを後にして、コンマで区切って並べて書くことで実現できる。Nextに入っていない日本語文字だけが游ゴシックで表現されるようになる。}このようにいっぱい書き連ねる人も多い。こんなにたくさん書くかというと、OSがMacやWindowsだったり、あるいはスマホを使っていたりと、ユーザーの環境はさまざまで、フォントを一つだけ指定しても、そのフォントをユーザーが表示できないこともあるからだ。この場合も当然、先に書いたものほど優先される。後に書いたものは念のために書いているというイメージ。/*ページ上部のフォントまとめて変更*/と書けばこれら4つの部分のフォントをまとめて変更することができる。この方がコードはスッキリするが、後々になってタイトルと紹介文のフォントを別に指定したくなったときに、考えてコードを書き直さなくてはいけなくなる。自分が後でいろいろイジってみたくなったときに、分かりやすいと自分で思う方をコピペしておくといいだろう。タイトル・紹介文の色の変更ここまでで4箇所の文字フォントを変更したが、このうち、2のブログ説明にはもともと青色っぽい色がついている。この色も、できればブログの雰囲気に合わせて変更したい。/*ブログ説明の色変更*/これをコピペして、色コード(上記コード内の#ffffffの部分)を自分の好きなものに変更する。はてなブログで使用するのにおすすめの同系色グラデーションの色コードを下にまとめたので、コピペして使っていただきたい。はてなブログテーマDUDEはもともと青系統色で作られているので、こだわりがない人や、手間をかけたくない人は青系統から選ぶのが無難ではある。青系統のブログは多すぎる感がある。色の調整に自信のある人は、別の色系統を使って新規性をアピールするのもメリットが大きい。青系統#07141f#0e263a#143856#1b4971#25649a#3488cf#6ba8dc#a2c8e9#bdd8ef#d9e9f6#e7f1f9#f4f9fc緑系統#07160a#0c2310#143c1b#1d5627#256f33#3aaf50#6fcf81#a2e0ad#c8edcf#d5f1da#e2f5e5#eef9f0赤系統#2b0503#3a0705#4a0906#6a0d09#99120c#d81a12#ef453e#f4827d#f9bebb#fcdcdb#fdebea#fffafaピンク系統#fb03f2#fd23f4#fd45f6#fd67f8#fe77f8#fe88f9#fe99fa#feaafb#febbfc#fecbfd#ffdcfd#ffedfeグレースケール#111#222#333#444#555#6e6e6e#909090#b2b2b2#d4d4d4#e5e5e5#eee#f6f6f6もっと色コードが見たい方は、こちらをどうぞ。+ぷちカスタマイズ日記+こちらのサイトで理解しておくと、自分で色コードをいじって色の微調整ができて楽しい。/*ブログタイトルの色コード変更*/}こんな感じに書くこともできる。cssでは改行は無視されるので、コードが見やすいように適宜改行を入れてかまわない。コードを綺麗にしたい人はこの書き方で書いてもいい。使用した色コードをメモしておく無事色の設定が終わったら、ここで使用した色コードをメモ帳か何かに保存しておくことをオススメする。今後ブログ内のいろいろな要素の色を変更していくことになるが、一つのブログで使用する色はなるべく同系色のグラデーションに統一した方がスッキリと見える。ブログ内で色コードを指定した場合には、逐一それをどこかにまとめておき、後で別の要素の色指定をするときの参考とできるようにしておきたい。ヘッド画像の表示領域変更うまいことヘッド画像の良い部分が表示されない場合など、画像の表示領域をもう少し増やすか減らすかしたいことがある。/*上下、左右の余白調整*/}これをデザインcss(ダッシュボード>デザイン>カスタマイズ>デザインcss)の好きな行にコピペし、上下の余白(60pxとなっている部分)を好きな値に変更すると余白の大きさが変わる。上と下で別の値を設定したい場合には、「○○px」を半角スペースで区切って4つ書く。4つ書いた場合には、それぞれ順番に上、右、下、左の余白指定となる。グローバルメニューの設置これは少々難しいのだが、SEO的に重要な「直帰率」という数字に効く(=検索等で流れてきた人を2ページ目に誘導してくれる)結構大事な要素だったりする。maroomこちらのサイトからどうぞ。レスポンシブ対応(画面サイズにあわせて適切なサイズで表示)してくれているし、デザイン的にも十分良いのでおすすめ。すりゴマ・ドットコムこちらのサイトから。ぼくは2番目の方で導入したが、結構難しかったので別記事をたてて導入方法を紹介するかもしれない。需要を感じれば優先して執筆するので、気になっている方はtwitter等でツツいてみてください。Lab.のグローバルメニューの仕様は上記のものから変更しました。)記事内要素のカスタマイズここまではページ上部、ブログの顔と呼べる部分のカスタマイズを紹介した。ここから先は、ブログの本体である、記事のデザインのカスタマイズを紹介していく。目次のカスタマイズはてなブログでは公式の目次機能が用意されている。記事の編集画面で、目次を挿入したい場所に[:contents]と書くだけで、自動的に目次が表示されるようになっている。見たまま記法でもHTML記法でもはてな記法でも同じ書き方でいいようだ。Lifeこちらの記事が分かりやすいのでどうぞ。はてなブログテーマDUDEではcssの書き方の関係で、そのままコピペではPC表示時の目次の大見出しが数字のリストにならない。これを解消し、数字のリストとして表示するためにはcssの.table-of-contentsの前に.entry-contentを書き加えればいい。Lab.で設定している目次のコード。だいたい直感的に変更する部分等分かると思うので、色コードなどを変更してデザインcssにコピペしてみよう。注意点として、はてな公式の目次はh3見出しとh4見出しを自動的に読み取って目次を生成するので、目次を入れたい記事の場合はそこを意識して記事を書く必要がある。本記事の初めに、タイトル部の英字フォントの変更方法を紹介した。タイトル部の英字フォントを変更した場合には、あわせて本文の英字フォントも変更しておきたい。タイトルと本文の英字フォントは同じでも異なるものでも構わない。Next"を好きな英字フォント名に変更すれば完了。日本語フォントについても、游ゴシックよりも好きなフォントがあれば"游ゴシック体"の前に書く。游ゴシックはオシャレだけど細くて読みづらいという難点もある。それを気にしてメイリオを游ゴシックより前に持ってくる人もかなり多いので、気になる人はまずはそれを試してみよう。h5見出しのスタイルの変更はてなブログテーマDUDEの見出しは、初期設定では以下のようになっている。h3とh4はこのままで全く問題ないのだが、h5に特に装飾がないのが惜しい。ブログを書くうえで、装飾付き見出しが2種類しかないと表現の幅が狭くなってしまう。h5についても何らかの装飾を設定して積極的に使っていくことをオススメする。はてなブログテーマDUDE用にオススメのh5見出しの例として、以下の2つを紹介する。'';}どちらを使う場合も、これをデザインcss(ダッシュボード>デザイン>カスタマイズ>デザインcss)にコピペするだけでOK。上の2例はいずれも、下記サイトに紹介されている見出しを元に、はてなブログテーマDUDEに合うように余白の幅や色などに若干の改変を施して紹介した。TITLEこちらのサイトには他にも定番の見出しカスタマイズが載っているので、気になる人は見てみてほしい。リストの色の変更はてなブログテーマDUDEのリストは、初期設定では以下のようになっている。少量のリストであれば青みのあるこの色合いがオシャレでいいのだけど、リストを大量に書くような場合には、このままではやや目がチカチカしてしまう。リストを大量に書く可能性のあるブログでは、以下のコードをデザインcssにコピペして色みを暗くしておくことをオススメする。#070a4b;の色コードを変更すると、リストの文字色が変わる。2px;の色コードを変更すると、リストの枠の色が変わる。ちなみに、2pxの値を変更すると、枠の太さが変わる。#0c118a;の色コードを変更すると、リスト内リストの文字色が変わる。サイドバーのカスタマイズはてなブログテーマDUDEでは、初期設定ではサイドバーの表記はこのようになっている。ABOUTサイドバーは印象に残りやすい部分なので、忘れずに調整しておきたい。'Montserrat';}散々紹介したのでもはや説明は不要かも知れないが、まずはcolorとfont-familyを自分のブログに合わせて変更しよう。10pxとあるところ、数字を増減することでABOUTの左の線の太さを調整することができる。調整が終わったらデザインcssにコピペする。ちなみに、初期設定のままで特にいじらなかった項目は、そのままコピペしてもいいし、いじらなかった行だけ消してコピペしてもいい。デザインcssの中で特に記述しなかった項目は、ブログテーマDUDEの初期設定を受けつぐようになっている。シェアボタン・フォローボタンのカスタマイズブログと日記の決定的な違い。それは、ブログはPV・シェア・フォローが多ければ多いほど嬉しいということ。シェアボタンやフォローボタンをカスタマイズすることでどれほどの影響があるかは分からないが、デザイン的な面からもカスタマイズすることをオススメする。ここははてなブログテーマDUDEに限らず、どのブログテーマにでもオススメのものを紹介する。Lifeこちらを採用しているブログが非常に多い。利用者が多いということはメリットでもありデメリットでもあるので、独自性を求める場合は他のものを。こちらもシンプルでとてもオシャレで、ぼくはかなり心を動かされている。Lab.で2016年4月現在使っているシェアボタンはこちら。いつ俺〜いつから俺ができないと錯覚していた?〜フォローボタンの変更こちらも定番のものから。Lifeぼくが2016年4月現在狙っているもの。シンプルかつ、色がオシャレ。急いでまわれ!ぼくが2016年4月現在使っているもの。いつ俺〜いつから俺ができないと錯覚していた?〜要素の検証これをマスターすることが一番大事かもしれない。はてなブログテーマの作者CatNoseさんのブログLITERALLYにおけるDUDE紹介でも説明されていたが、ブログをカスタマイズしていくうえで、特に微調整の段階では「要素の検証」を使いこなせるようになることができれば一番良い。自分のブログの気になる部分の上で右クリックして「検証」をクリックすると、対応する部分のHTMLコードが左側に、cssコードが右側に出てくる。デザインに関する情報はほとんどがcssに書かれている。htmlもcssもやってみれば本当に簡単なので、ブログと長い付き合いになる人はぜひ要素の検証からの微調整にトライしてみていただきたい。注:デザインcssの書き換えを行う際は、安全のためいったんデザインcssの内容を全部ワード等にコピペしておくことをオススメいたします。き】ユーザの閲覧環境にかかわらず同じ見た目で表示してくれて、し...2016-04-15【コピペ用】和風デザインに。【コピペ用】和風デザインに。なまぱん.アジア就職。仕事が楽しくない人へ:良い仕事とは何か。「モンスター」と呼ばれる理由と実績を振り返る。(4)HISTORYPOPULARはてなブログをはじめよう!lahtnaskunさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。