LITERALLYスマートフォン用の表示で見るLITERALLY知っておくと楽しい知識をまとめて紹介2016-01-20はてなブログを一瞬でおしゃれにする最強のデザインカスタマイズ方法(テーマDUDEの手引き)デザイン以前、はてなブログのスマホデザインのカスタマイズ方法について書いた。Literally多くの方に参考にして頂いたようでとても嬉しい。続編を書いて欲しいというご要望をいくつか頂いたので、僭越ながらまたデザインカスタマイズのTipsを書こう思う。前回はスマホデザインについてのみ触れたが、今回はPC表示のカスタマイズについて。コピペだけで「超カンタン」におしゃれなブログが作れるので、Webデザイン初心者の方にも是非読んでいただきたい。はてなブログユーザーでないのにこのページに辿り着いてしまった方、大変申し訳ありません...はてなブログテーマ「DUDE」を作りました。「はてなブログを一瞬でおしゃれに美しくする最強のデザインカスタマイズ方法」と仰々しいタイトルを先に決め、ブログのカスタマイズ記事を書き出したところ、早速壁にぶつかった。それはデスクトップ用デザインの場合「インストールしているテーマごとにカスタマイズ方法が若干違う」というごく当然のことだった。どのテーマにも適用できるカスタマイズ方法を模索しているうちに「これは新しくテーマを作った方が早いんじゃないか」とふつふつと思いだした。結果として新しくテーマを作った。デモ用のブログはこちらをクリック(スマホでもPC表示がされます)テーマ名は「DUDE(デュード)」。「DUDE!(ヒュー!とかオォー!)」のような感じで、至るところで使われる言葉だ。その名の通りデザインコンセプトは「気取ったオシャレさ」。古くさい保守的なイメージのはてなブログのデザインから抜け出し「流行にキャッチアップしてるぜぇ〜」というような少し調子に乗った若者的なデザインをしたかったのだ。ここからは、デザインテンプレート「DUDE」を元に説明してく。テーマをインストールしただけでは、DUDEは完成しない。インストールしてから、またこのページに戻ってきてほしい。テーマのダウンロードページはこちらまた、DUDEをインストールしなくても、参考にできる部分もいくつかあるかもしれない。いうわけで、はてなブログをやっている全ての人に読んでいただきたい。DUDEを使っておしゃれなブログを作るためのカスタマイズ方法タイトルを英語でカッコよくいきなり身も蓋もないことで恐縮だが、DUDEのブログの最上部に表示されるタイトルは英語のほうが断然カッコよく見えるようになっている。はてなブログでは基本的に「設定したブログ名」=「ページのタイトルとして表示される名前」になってしまう。そのため、どうしても日本語が良いという人も多いだろう。それは、ブログ名をデザイン設定により隠し、別に新たなタイトルを表示させるという方法だ。以下のコードをコピペして『デザインCSS(ダッシュボード▶︎デザイン▶︎カスタマイズ▶︎デザインCSS)』のいちばん下に加える。"ここに英語のタイトルを入れる"」の""内を好きなものに変える。DUDE"」と入力する。すると下の画像のように変わる。ブログ名が何であろうとこの方法により、好きなようにタイトルを変えられる。SEO的にはあまりよろしくない方法なので、タイトル以外でこの技を使わないほうが良いだろう。タイトルバーの下に"画像&紹介文"を表示させる次にヘッダの下に"画像+キャッチ的な役割をするブログ紹介文"を表示させる方法。はてなではほとんど見ない表現だが、DUDEなら簡単に導入できる設定になっている。下のコードをまるごとコピーして『タイトル下(ダッシュボード▶︎デザイン▶︎カスタマイズ▶︎ヘッダ▶︎タイトル下)』に貼り付ける。href="おすすめ記事3のURL">おすすめ記事3のタイトル</a></h6></div></div>次に下の4点のテキストを好きなように変えていく。LITERALLY?...にあたる部分)おすすめ記事1のタイトル(デモで企画書のデザインを...にあたる部分)おすすめ記事1のリンク先(URL)たとえば次のようなコードにした場合、デザインは下の画像のようになる。上の場合を見ると、おすすめ記事のタイトルの下が不自然にぽっかりと空いてしまっている(タイトルが1行になったため)。これを修正するために『デザインCSS』に次のコードを追加する。/*おすすめ記事タイトルの枠の高さ*/}これは単純に枠の高さを調整しているコードだ。逆に、おすすめ記事のタイトルが長くなり3行になってしまった場合は、20pxの部分を60pxにすれば良い*1画像上のフォントサイズを変えるもし、見出しの文字の大きさを変えたければ次のコードを『デザインCSS』にコピペして、emの前の数字を適当に変えれば良い。/*大見出しのフォントサイズ。/*中見出しのフォントサイズ。/*おすすめ記事タイトル(枠内)のフォントサイズ。3.0em;」に変える。emでなく、%やpxを使っても構わない。続いて背景画像を好きな画像に変えたい場合は、次のコードを『デザインCSS』に追加する。}好きな画像のURLは次の手順に取得できる。3右クリックで「画像アドレスをコピー」もしくは「画像URLをコピー」。4上のコードの""内に貼り付け。背景画像を白文字で抜いているので、なるべく暗めの画像にすることをおすすめする。サイドバーをカッコよくしようメニュータイトルは英語にフォントが全体的なデザインイメージに与える影響は大きい。日本語のWebフォントでは現状あまりカッコイイものがないため、英語に変えておくのが良い。英語だと伝わりづらいのでは?と思うかもしれないが、カンタンな英語であればほとんどの読者が理解してくれるだろう。下にサイドバーの英語メニュータイトル例を挙げておく。プロフィール:ABOUT検索:SEARCHアーカイブ:ARCHIVE(過去記事の記録だからHISTORYなんかでも良いだろう)人気記事:POPULAR最新記事:NEW、LATESTなどあくまでも参考なので自由に決めましょう。ライター名を署名のように表現プロフィールに「署名っぽく自分の名前を入れる」ととても気取った感じが出て僕は気に入っている。CatNoseは僕がネット上で名乗っているニックネームだ。手書き風のCatNoseはリンクとなっており、クリックするとツイッターに飛ぶようになっている(デモサイトで試してついでにぜひフォローまでしてほしい)。これはカスタマイズ画面から、サイドバーの『プロフィール(ABOUT)』に次のコードを貼り付けることで実装できる。プロフィール画像とはてなIDは、非表示設定にすることをおすすめする。href="ツイッターなどリンクしたいサイトのURL">手書きにする名前</a>.</p>上のコードの「手書きにする名前」の部分を好きな名前(英語のみ)に変える。その手書きの名前をクリックしたときに飛ぶリンク先のURLをhref=""の""内に入れる。」となっている部分をそのように書き変えれば良い。プロフィール編集の場合、コード間にスペースを入れると改行されてしまうのでご注意。ソーシャルボタンをおしゃれに続いてサイドバーにちょっと変わった読者登録ボタンを設置する方法を紹介。4Feedlyの4つ。DUDEでは読者の興味を引くよう、少し工夫を凝らした。ある程度新しいブラウザでデモサイトを見ると、ツイッターの鳥がぷかぷかと飛んでいることが分かるかと思う。これは次のコードを『HTML(サイドバー▶︎モジュールを追加▶︎HTML※タイトルは空欄でOK)』にコピペすることで導入できる。both;"></div>もし、使用していないソーシャルボタンまで含まれている場合は、該当するコードの部分をまるっと削除してしまえば良い。facebookボタンがいらないということであれば、<!--facebookページ-->から<!--facebookページここまで-->までまるごと削除する。ツイッターがぷかぷか飛んでいるのが目障りなようであれば、次のコードを『デザインCSS』に追加する。}もし、ツイッターがぷかぷか飛ぶ高さを変えたければ以下のコードを『デザインCSS』に追加し、-40pxの数値を変える。}いろんな数値を入れて、試してみると面白い。細かいデザインを調整する技を覚えようフォントサイズや行間の変え方など、DUDEの細かいカスタマイズ方法を書き出せばきりがないので、この記事でここまでにしておく。Webデザインを勉強したことのない人が、細かな調整を諦めてしまうのはもったいない。できるだけDUDEを自分好みにアレンジし、世界にひとつしかないデザインのブログを運営してほしいと思う。そこで、Webデザインが興味なくともひとつだけ覚えてほしい技がある。要素の検証を使いこなそう(ご存知の方は読み飛ばしてください)グーグルクロームやFireFoxなど多くのインターネットブラウザーでは「要素の検証」という機能を使用することができる。これはPCでブログを開いたまま、ブログのデザインを試しに調整できるというもの。ブログの記事のフォントサイズを変えたいとする。そのとき要素の検証を使えば、今そもそも何pxに設定されているのか調べつつ「フォントサイズを1px大きくしたらどうなるか」「5px小さくしたらどうなるか」ということを実際に画面でテストできるのだ。使用の手順をこれから説明していく。Explorer(IE)が最も使いにくいと思うので、まずIEしかPCに入ってない場合はクロームをダウンロードすることをおすすめする。(IEではF12を押すと要素の検証ができるようだ:参照はこちら)ここではグーグルクロームで「要素の検証」をおこなった場合の手順を紹介。実際に自分の手で試しながら追っていってほしい。例として、サイドバーメニュータイトルの文字サイズを大きくしてみる。下のような画面が表示される。画面下に表示されたコードは、区切りの左側が「サイトの骨格とテキスト情報(HTML)」を表しており、右側が「デザイン情報(CSS)」を表している。今、左側のHTMLで、サイドバーメニュータイトルのひとつ「ABOUT」が選択されていることが分かる(薄く灰色がかっている)。右側のCSSでは、ABOUTをはじめとするサイドバーメニュータイトルのデザイン情報が表示されている。このCSSデザイン情報がどういう意味かを一部説明していくと、.hatena-module-title←サイドバーメニュータイトルを表すことがHTMLで指定されている。下の{}内はこの部分のデザイン指定を表す。(ステップバイステップ形式でマスターできる)が丁寧で分かりやすいので読んでみると良いかもしれない。本格的にデザインを学びたい方は以前書いたこちらの記事↓を読んでみることをおすすめする。最後にDUDEに関するお願いと注意点をまとめておくデザインカスタマイズ▶︎ヘッダ▶︎タイトル画像に画像をアップしてはダメ(デザインが崩れてしまいます)レスポンシブデザインには対応していないため、スマホ表示にははてなブログ専用のデザインを使うことをおすすめします。LiterallyDUDEテンプレートについて修正があった場合はこちらの記事でお知らせさせていただきますここで紹介した他にDUDEのカスタマイズ方法がありましたら、みなさまのブログにて提案していただけると幸いです。参考になるカスタマイズ方法についてはこの記事にて紹介させて頂きます。テーマを作っておいて大変恐縮なのですが、本業の忙しさもあり「DUDEをさらにカスタマイズして、こういうデザインにできないか」などの要望・質問にお答えできない場合があります。誠に申し訳ありませんが、ご了承ください。Literally*1:たとえばheightを60pxにした場合、3つの枠それぞれ縦方向に中央揃えしたくなるはずだ(やってもらえれば分かる)。その際、次のコードを『デザインCSS』に追加すると良い。古いブラウザだと対応していないこともあるが、それについては諦めるしかない。»SEARCHスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。