ブログカスタマイズ
はてなブログのブログメンバー機能とは ユーザー毎に記事下にそれぞれのプロフィール欄を表示する プロフィールのHTML/jQuery はてなブログのブログメンバー機能とははてなブログProには複数人で一つのブログを運営できる「ブログメンバー機能」があります。…
スマホでのメニュー表示はいつも悩ましいものです。スマホの画面サイズが大きくなったとはいえ、やはり表示領域は狭く限られています。特にカテゴリーの数が多くメニューが多階層にわたるサイトやブログのメニュー表示をどうするか。今回はたくさんのメニュ…
時分秒まで表示される XML サイトマップのlastmodタグについて サイトマップバージョンを一部改変 AMPバージョンなら今まで通り フッターに貼るscript CSS はてなブログで「リライト記事の更新日時を日付横に表示する」カスタマイズをされている方も多いと思…
PCでは横並びのドロップダウンメニューで、スマートフォンではトグルボタンでドロワーメニューが横から出てくるグローバルメニューをはてなブログ向けに作りました。(はてなブログ以外でも使えます) PCではマウスオーバーするとドロップダウンメニューが表…
はてなブログのサイドバータイトルデザインのカスタマイズ集を作ってみました。 はてなブログではそのままコピペでお使いいただけます。WordPressや他のブログサービスでもセレクタを変えればお使いいただけます。 注意 文字色について(全共通) シンプル …
はてなブログで使える目次のデザインを幾つか作ってみました。コピペでお使いいただけます。 目次の挿入方法 目次デザインパターン集 FontAwesomeの呼び出し ストライプ背景 ストライプ背景2 二重線囲み ステッチ風 目次リストのスタイル(番号順、円) 目次…
ちょっと前からよく見かける「サイト全体を枠で囲む」デザインをはてなブログでやってみました。このブログでもやっています。 webdesign-trends.net カスタマイズ方法 ストライプ柄 背景画像を設定する カスタマイズ方法以下のCSSをデザインCSSに追加します…
記事下にCTAを設置するカスタマイズを作りましたのでご紹介します。WordPressの有料テーマではよく見かけますね。このカスタマイズははてなブログはもちろん、WordPress、その他のブログサービスでも使えます。 CTAとは 見た目はこんな感じ カスタマイズコー…
はてなブログの記事下にカード型のプロフィール欄を表示するカスタマイズを作りましたのでご紹介します。 こんな感じ カスタマイズコード HTML CSS こんな感じPCではこんな感じに表示にされます。 スマートフォンではこんな感じです。 デザインはこのブログ…
はてなブログカスタマイズ記事一覧です。今までの過去記事をまとめました。 パーツ毎に分けているので、カスタマイズしたいところの記事をご参照下さい。上から順番にヘッダー、グローバルメニュー、記事上・記事下、サイドバー、フッターと辿っていくとはて…
ブログのヘッダー下やフッターにレスポンシブ広告のGoogle Adsenseを貼っていらっしゃる方は多いと思います。ファーストビューで目に留まりやすく広告を置きたい場所ですよね。 はてなブログでは「タイトル下」や「フッタ」に広告のコードを置くのですが、コ…
カスタマイズ記事を主に書いてるこのブログですが、今回はカスタマイズのやり過ぎについて警告する記事を書きます。 ※カスタマイズご依頼の新規受注は条件が合えばお受けしております。お気軽にご相談下さい。 カスタマイズのやり過ぎにはご注意を過剰なカス…
今まで私が有料カスタマイズサービスでお手伝いをさせていただいたブログのご紹介をさせていただきます。 今回ご紹介するのは、SNSやブログへの言及でカスタマイズサービスのご紹介をして下さったブログです。 カスタマイズ実例 元スタバ店員の全国カフェめ…
はてなブログでは6月から記事下に「関連記事」が表示されるようになりました。 記事下に「関連記事」を表示します - はてなブログ開発ブログ 今まではJSなどで表示するカスタマイズで対応していましたが、公式のパーツが出来たということで、こちらの方が軽…
はてなブログで固定ページをサイトっぽくカスタマイズするにはどうすればよいか、という話題がTwitterでありました。はてなブログProの固定ページを使えば、WordPressの固定ページのようなデザインも可能です。 ただ、そのままではできないので、やり方をこ…
ブログのタイトルロゴの右横にSNSフォローボタンが並んでいるレイアウトをWordPressなどではよく見かけますよね。無料テーマなのに超優秀な人気テーマ「simplicity」などもそうですよね。 WordPressの場合は自由にHTMLでヘッダーの構造をいじれるのですが、…
ついに、はてなブログでトップページの一覧表示機能ができましたね!最近はてなブログはどんどん便利な仕様が追加されててカスタマイズ好きにとっては嬉しい限りです。 staff.hatenablog.com 今まで一覧表示にするにはCSSでなんとかそれっぽくしたり、/archi…
ヘッダーの下のおすすめ記事の横並びにするカスタマイズを以前書きました。今回はそれをスマートフォンでは横スクロールで表示するカスタマイズです。 blog.minimal-green.com ==== スマートフォンで横スクロール HTML CSS 注意点 JavaScriptを使うのは面倒…
はてなブログには標準のタイトル画像アップロード機能がありますが、サイズなど色々制限があり、自由に表現するには少し難しいところもあります。
Twitterでちょろっと書いたのですが、はてなブログでもWordPressの固定フロントページっぽくビジネスサイト風のトップページを作ることができます。これではてなブログをビジネスサイトやホームページのように活用することができます。 まずはDEMOページをご…
はてなブログのAMP版のCSSを記述出来るようになりましたね。おかげで今までAMP対応を見送ってた方も見直してAMP対応始めた方も多いと思います。カスタマイズ依頼案件でもAMP対応を依頼されることが多くなりました。 基本的にはPC版のデザインCSSと同じように…
先日はてなブログのサイドバーモジュールに新しい機能が追加されましたね。 staff.hatenablog.com 何か出来ないかなあと、カスタマイズを試してみました。 色々な表現が出来ると思うのですが、今回は以下の2点を取り入れたデザインを作ります。 サイドバーの…
最近Adobe CCを導入してIllustratorを使っています。なんだかんだ言って有料のソフトウェアは使いやすいですね。解説もネットに多いですし。 印刷物を作る機会が増えて、無料の画像編集ソフトでは限界がありましたが、Adobe CC導入して良かったです。まだ全…
このブログではブログタイトルと日付にGoogle FontのJosefin Sansを指定しています。全体にWeb Fontを指定すると見出しやタイトルなど一部分にフォント指定すると、デザインのアクセントになりおすすめです。今回は日付の表示、数字の表示に最適なGoogle Fon…
記事下のシェアボタンの下にバイラルメディア風の「この記事が気に入ったらフォロー」バナーを置いてみました。 よくWordPressでは見かけますよね。そのデザインを応用して「この記事が気に入ったらフォロー」バナーにアレンジしました。 Facebookページは持…
ガーリーデザインシリーズです。見出しのデザインに使えるコピペCSSを用意しました。ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます - Minimal Greenとあわせてお使いいただくと良いかと存じます。 以下ははてなブログの…
ストライブ柄とステッチ風のかわいい?シェアボタンを作ってみました。ガーリーデザインなブログカスタマイズにぜひどうぞ。 このシェアボタンは過去にこのブログで公開したシェアボタンのHTMLと同じですので、CSSを変更するだけで着せ替え出来ます。レスポ…
記事下の関連記事ってカスタマイズされてますか?多くの方はMilliardなどのプラグインを使っていらっしゃいますが、関連記事を表示させる方法はいくつかあります。 はてなブログの記事下に使う関連記事プラグイン、結局どれが1番良いの?Milliardはとてもき…
※注意:AdSenseで使うことは無いと思いますが、この方法をGoogle Adsenseで使うときは必ず「レスポンシブ広告ユニット」にして下さい。レスポンシブ広告以外にdisplay:noneを使うと規約違反になりますのでご注意下さい。 Google Adsenseの場合レスポンシブ広…
色白おばけ (id:lightgauge) さんのブログ記事で使われていた”黒板風囲み枠”にインスパイア(笑)され、私も黒板風囲み枠のCSSを作ってみました。 はてなブログで独自のWEBフォントを利用する方法 - 攻めは飛車角銀桂守りは金銀三枚 CSSは参考せず自分で組み…