モノクロベースのシンプルな2カラムテーマ「stripes」をはてなテーマストアに公開しました。
※ サンプルサイトはございません。
デザイン
PC (961px~)
スマホ (~960px)
テーマ「stripes」のポイント
ストライプ!
モノクロベースにひとりねり、サイドバーの背景をストライプにしました。
ストライプは画像でなくcssのため、カスタマイズ可能です。クールもかわいいも、好みのデザインをかんたんに実装できますよ。
(カスタマイズ方法は後述します)
モノクロベースのクールなデザイン
ベースはシンプルなモノクロのデザイン。
シンプルになりすぎないよう、見出し (h2、h3、h4) や引用に「あしらい」をほどこしました。
レスポンシブ対応
「stripes」はレスポンシブ対応*1 済みです。
テーマをご利用いただく際には、デザイン > スマートフォン > 詳細設定 >「レスポンシブデザイン」にチェックを入れてください。
ストライプカタログ
サイドバーのカスタマイズ例です。好みの色味がなくても、かんたんにオリジナルのストライプがつくれますのでご安心を。
青系
#box2, .entry-content h2, .entry-content h3 { background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, #ebf6f7 6px, #ebf6f7 12px); }
きみどり系
#box2, .entry-content h2, .entry-content h3 { background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(152,217,142,.15) 6px, rgba(152,217,142,.15) 12px); }
きいろ系
#box2, .entry-content h2, .entry-content h3 { background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, #ffec47 6px, #ffec47 12px); }
むらさき系
#box2, .entry-content h2, .entry-content h3 { background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(136,72,152,.07) 6px, rgba(136,72,152,.07) 12px); }
ピンク系
個人的にいちおしのピンク。黒×ピンクってかっこかわいい。
#box2, .entry-content h2, .entry-content h3 { background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, #fdeff2 6px, #fdeff2 12px); }
css追記の手順
サイドバーの背景を変えるには、css*2 の追記が必要です。
cssの追記はむずしくありません。「一回もやったことがないよ!」という方もぜひ、トライしてみてください。
1. 管理画面の「デザインcss」をクリック
管理画面 > デザイン > カスタマイズ (スパナのアイコン) > 「デザインcss」をクリック
2. css投入フォームをクリック
3. 末尾にストライプのcssを投入
たとえばピンク系にする場合は、以下のcssをコピペしてください。
#box2, .entry-content h2, .entry-content h3 { background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, #fdeff2 6px, #fdeff2 12px); }
4. 「変更を保存する」をクリック
保存ボタンを押すのをお忘れなく。保存しないと反映されません。
ストライプcssの作りかた
だけどオリジナルのストライプって、どう作ればいいの?
とってもかんたんです!「ストライプCSSジェネレーター」を使えば、かわいいストライプのcssをばんばん生成できます。
ストライプCSSジェネレーター | WEB GENERATOR
色も幅も自由自在。ただし小さい字の背景となるので、「すっごく薄い色」を選ぶことがポイントです。
ストライプCSSジェネレーターからcssコードをコピーする方法
ストライプCSSジェネレーター から、cssのコードをコピーする手順をご紹介します。
なお、ストライプの背景は大見出し (h2) でも使っています。以下は同時に更新する手順となりますので、別のものを使用したい場合は個別に設定ください。
1. ストライプの角度・線の太さ・色を決める
左側にプレビューが表示されますので、いろいろ試してください。しつこいですが、なるたけ薄い色がおすすめ。
2. ページ下に表示されたcssコードの「コピーする」をクリック
3. [2] のコードを {} に挟む
コピーしたコードを以下の { } に挟んでください。
#box2, .entry-content h2, .entry-content h3 {
コピーしたcssコードをいれる }
4. 「background」を「background-image」に修正
コピーしたコードの「background」を「background-image」に修正します。
#box2, .entry-content h2, .entry-content h3 {
background-image: ~~~~ }
5. [4] をはてなブログ管理画面の「デザインcss」に投入・保存する
太さや色を少し変えるだけでも、イメージが変わります。いろいろ試して、お好みのストライプを見つけてください。
ストライプ以外のカスタマイズ
ブログタイトル (Webフォントの使用)
サンプルでは、ブログタイトルにGoogle Fonts (Googleが提供しているWebフォント) を使用しています。
ビフォー。
アフター。
もしブログタイトルが英字の場合、ぜひ使ってみてください (日本語は残念ながらいまいちでした…)。
1. 管理画面 > デザイン > カスタマイズ (スパナのアイコン) > 「ヘッダ」をクリック
2. 「ブログタイトル下」に以下のコードを投入
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet">
#blog-title #title a { font-family: "Montserrat",sans-serif; }
リロードしてフォントが変われば成功です。変わらない場合は投入先に間違いがないか、確認してくださいね。
グローバルナビゲーション (グロナビ) の設置
ブログタイトル下の、黒い細い帯です。
jsを使わない、cssだけのシンプルなグロナビ。これぞというメニューにしぼって、少なめにすると雰囲気がでます。
スマホでは幅が縮んで左寄せになります。ハンバーガーメニューは実装しませんでした。個人的に、あんまりクリックされないのではと考えているためです。
ブログにハンバーガーメニューつけたいっ! という方は、カスタマイズ案がたくさん公開されているので、そちらをご参考くださいませ。
1. 以下のHTMLを自分のブログ用に書き換える
書き換える箇所は「URL」と「メニュー名」です。このHTMLを貼りつけたら自動的にメニュー名やURLが書き換わるものではありませんのでご注意ください。
<nav id="gnav"> <ul class="gnav-inner"> <li class="gnav-menu"><a href="URL">メニュー1</a></li> <li class="gnav-menu"><a href="URL">メニュー2</a></li> <li class="gnav-menu"><a href="URL">メニュー3</a></li> <li class="gnav-menu"><a href="URL">メニュー4</a></li> <li class="gnav-menu"><a href="URL">メニュー5</a></li> </ul> </nav>
2. 管理画面 > デザイン > カスタマイズ (スパナのアイコン) > 「ヘッダ」をクリック
3. 「ブログタイトル下」に [1] のコードを投入・保存する
サイドバーをストライプにした理由
まっしろの2カラムテーマを作っていたところ、まっしろの2カラムテーマなんていっぱいあるしあたしが作んなくてもよくない? と手がとまり、ひとひねりほしいな、と道を歩いていて目についたのが散歩しているおじさんのストライプシャツ(褪せたブルーの縦縞)でした。
そんなわけで、「シンプルなのが好きなんだけど、もうひとひねりほしいんだよね」という方におすすめです。
注意事項
2023年8月頃までは、フォントサイズや要素同士のアキなどが変わるかもしれません。
また、ブログタイトルに背景画像を敷いたときのカスタマイズcssも近日中に公開する予定です (前作「fade」にも実装します)。
→実装しました (2023.6.9)
テーマをイントールしてくださったブログを拝見させていただいたうえで、あれこれ調整いたします。ご利用いただく際には、その点をご了承ください。
連絡先
表示に不具合がございましたら、「不具合内容」と「ご利用環境」を以下メールフォームよりご連絡ください。
なお、改修に関するサポートには対応しておりません。あしからずご了承くださいませ。
(2023.7.3 更新) ストライプcssの太さを変更しました。プレビューよりちょっと太めです。