Wedges.bin

はてなブログでWEBデザイン

ブログタイトルの大きさを変える。

このテーマでは、ブログタイトルのフォントサイズは350%になっています。 日本語で長めのタイトルにすると数行になってしまいます。文字の大きさを変更したいときは、カスタマイズのタブで「デザインCSS」を選択し、CSSを追加します。 #blog-title-inner h1#…

ヘッダー画像を作る場合のヒント

ヘッダー画像の中心位置を変更こともできます。 このブログテーマのヘッダー画像は、画像の中心がヘッダー領域の中心になるようになっています。これは、タイトル代わりに画像を入れた場合を想定して、極力タイトルを表示するためです。しかし、画像の天地が…

ヘッダー画像を配置する場合

このテーマでは、画像を配置すると、画像の中心がヘッダー領域の中心にくるように、強制的に配置されます。これは、タイトル代わり画像を配置した場合を想定しているからです。 画像は、横幅にフィットするようにサイズが小さければ拡大され、大きければ縮小…

広告表示について

CSS

このブログテーマのPC表示時のメインコンテンツ幅は600pxしかありません。 なので、350×250のレクタングル(中)を、2つ並べて表示することは基本的にできません。 しかし、メインコンテンツの左右には余白をもたせているので、実際は630pxあります。(左右…

サイドバーにアイコン追加する方法

シンプルさを目指して、サイドバーに目が行くようなものを置かないデザインなのですが、サイドバーも見て欲しい!という方に。 もともとこのテーマでは「Font Awesome」を読み込んでいますので、以下のCSSを追加すると、サイドバーの各項目にアイコンを追加…

現在使用しているグローバル・ナビゲーション

css

現在、このブログで使用しているグローバルナビを公開します。まず、HTMLの部分。ここに、HTMLによるメニューを追加します。 <div class="menubtn">MENU ▼</div> <nav id="cssmenu" class="togmenu"> <ul> <li><a href='/entry/2015/01/19/014609'><span>テーマRougeの詳細</span></a></li> <li><a href='/entry/2015/01/23/202819'><span>カラーの変更方法</span></a></li> <li></li></ul></nav>

はてなブログのテーマ〈Rouge〉を微調整しました。

テーマ〈Rouge〉では、本文中の〈H2〉タグで、このようなデザインになっております。見出しH2のデザイン しかし、この見出し内に、キーワードリンクがあると、文字の色が変わってしまっていました。 それを修正しました。 さらに、キーワードリンク関連で、…

はてなブログにおいて、アイコンWEBフォントを使う方法

はてなブログでは、どのブログでも以下のWEBフォントを読み込んでいます。これは、選択したテーマに関係なく最初に読み込む「globalheader.css」によって読み込まれますので、簡単にこれらのアイコンは使えます。 下記のCSSをデザインCSSに追加するだけでこ…

はてなブログで「続きを読む」ボタンを画像にするには?

ある目的の(メインサイトCoooook!のアクセス数アップ)ために、開設したこのテーマ用ブログですが、ページ数が無い割には、アクセスが多く感謝です。 (できれば、Coooook!もみていってね。) ここ2週間、仕事が忙しくまったくブログを更新できていなかった…

はてなブログでいろいろとファイルをアップロードしたい時

2016 年 8 月 31 日以降はこの方法は使えなくなりました。はてなブログでアップロードできるのは、画像だけ。では、CSSやJavaScriptを外部ファイル化して設置したい場合や、WEBフォント設置したい場合にどうするか?私は、Googleドライブをお勧めします。 メ…

Livefyreという、コメントシステムをはてなブログに導入してみた。

このSNS時代に、ブログのコメント欄なんてあまり意味のないものでしょうけど、ちょっと気になったので設置してみた。誰でも自由に書き込める場所というのはちょっと抵抗があり、はてなブログのコメント機能ははてなユーザー限定にしています。そこで、SNSの…

サイドバーのスクロールを途中で固定する方法

jQueryを読み込んでいるので、一番簡単そうなのはこれである。 <script> $(function($) { var tab = $('.hoge'), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass('fixed'); } else { tab.removeClas</script>…

はてなブログにメールフォームを追加した(WordPressのメールフォーム)

メインで製作中のサイトcoooook.comは、オリジナルドメインにしていますが、 はてなブログです。 そこに、こんなメールフォームを追加してみました。「iframe」で、レンタルサーバーにあるWordPressのメールフォーム(コンタクトフォーム7)を、読み込んでい…

WEBのカラーリングに役立つサイト〈CSSカラー(HEX値)が表示されるサイト〉

なんで6桁の数字が色を表しているのか? このサイトのアクセントカラーの「赤」は「c70032」です。この6桁の数字は、2桁ずつを3つ続けたもので、 最初の「c7」はRed、「00」はGreen、「32」はBlueの成分です。 光の3原色「RGB」です。 モニターでは、それぞ…

このサイトについて

このサイトはHatenaブログを始める上で、色々と模索したWEBデザインに関することを、備忘録として記録しておくことを目的としています。今後、WEBデザインに関するコンテンツを増やしていこうと思っています。 リクエストもお待ちしております。難しい内容は…

テーマ〈Rouge〉でのアクセントカラーの変更手順

このテーマのアクセントカラーは、「赤」ですが、簡単に変更可能です。 1. ダッシュボードから「デザイン」を選択 2. レンチアイコンの「カスタマイズ」を選択 3. 「デザインCSS」を選択 下記のCSSをコピーします。 #blog-title, .entry-see-more, .entry-co…

はてなブックマークコメントのヘッダーカラーを変えてみた。

記事の最後に追加できる、はてなブックマークのコメント表示。 ブックマークで、コメントを貰ったこともないので、あえて表示する必要も無かったのですがちょっとチャレンジしてみました。

記事のタイトルは、【見え方も重要】と考えています。

テーマ製作日記 2 記事のタイトル(エントリータイトル)は、SEO的に非常に重要だといわれています。しかし、それは検索された時のことで、サーチエンジンから飛んできた後のことまでは言われていないように思います。私は、そこ(飛んできた後)も重要では…

iPadでのレスポンシブデザイン対応と、縦横対応ブレイクポイント

テーマ製作日記 1 昨今のブログのアクセス数には、タブレット(特にiPad)が増えていて、折角だから対応したかった。とくに、スマホよりも大画面なのだから、スマホと同じ表示というのはどうかと思っていましたし。 さらに、タブレットを縦にした時はスマホ…

はてなブログのテーマ〈Rouge〉

主な特徴 シンプル、そしてレスポンシブデザイン対応のテーマです。※レスポンシブは、デザイン > スマートホン > 詳細設定 で、チェックを入れないとレスポンシブになりません。印象的なヘッダーと、サイドバー領域を多く表示することの両立を目指しました。…

サンプルエントリー

h2見出しあのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。ABCDEFGHIJKLMabcdefghijklm1234567890 h3見出し(*) あのイーハトヴォのすきとおった風、夏でも底に冷たさをも…