はてなブログにて、記事タイトルの大きさを、まとめて変更したい。 ※ネットに載ってるCSSのタグ?でやってみたのですが、できませんでした?>< よろしくお願いします。
はてなブログで「デザインテーマコンテスト」が開催されています! オリジナルデザインを投稿してAmazonギフト券を当てよう! 「はてなブログ デザインテーマコンテスト」開催 - はてなブログ開発ブログ 使われている"id"や"class"がわかっていると デザインしやすいのでザックリさらってみました。 おおよそこんな感じ。 body(トップページで.page-index、記事ページで.page-entryが追加)div#globalheader-containeriframe#globalheader(ヘッダ[メニューやHatena Blogロゴ、Hatenaロゴなど])div#containerdiv#container-innerheader#blog-titlediv#blog-title-inner(タイトル画像)h1#title(ブログ名)h2#blog-description(
この間追加されたはてなブログの目次機能。どのモードでも、[:contents]と書き込むだけで目次がつくれるので、「凄い!」って思ったしとっても便利になりましたよね! 今まで目次を自動生成するコードもあったのですが、特定の説明記事やリスト記事にだけ入れたいなと思っていたので、半ば諦めていました( ;´Д`) それにちょっとコードを足すとグッと使いやすくなるので、いろいろとサンプルを紹介したいと思います。 はてなブログユーザー向けの記事になります。 CSSでできるはてなブログ目次のカスタム リスト表示を番号にする 見出しの一部を消す 小見出しを消す 中見出しも消す 「目次」という言葉を入れる 目次部分に背景色をつける 文字の大きさを、少しずつ小さくしている 段の横幅を調整 jQueryでできる目次カスタム スムーズスクロールにする 最初は隠しておいて、クリックしたら表示するようにする まとめ
はてなブログでは、記事の見出しから目次を自動的に作成する「目次記法」を利用できるようにしました。レビューや論評、技術ブログなど章立てされた長い記事を書いたとき、記事中の見出しにリンクされた目次を、記事の冒頭に簡単に挿入することができます。どうぞご利用ください。 目次記法の使い方 記事に見出しを追加するには 見たままモードで見出しを追加する はてな記法モードで見出しを追加する Markdownモードで見出しを追加する ※この記事の目次も目次記法で作成しています。 ※【追記】目次記法を入力補助ツールバーから入力できるようにしました。詳細は以下の告知などをご参照ください。 http://staff.hatenablog.com/entry/2017/01/19/182000 目次記法の使い方 ※目次記法はどの編集モードでも利用できます。 目次を挿入したい行に、次のように[:contents]と記
予め出来上がったソースをカスタマイズするのは、プログラマとしてはよくある作業。もっと効率の良い手法があるのかも知れないけど、はてなブログに関してはこうやって作業した。 今回はCSSを大改造するので、ソースをローカルに保存しておいて、それをいじり倒すことにしたのだ。 1 気に入ったテーマを探す テーマストアというのができたらしい。そこから今イメージしているものに似たテーマをとにかく見つける。 カラム割り(1~3列) 各要素の配置(サイドバーが右か左かなど) 各要素の大きさ というところに着目して探してみて。背景色とかフォントはどうでもいいのだ。そして、とりあえず自分のブログにデザインを反映してみよう。 のちのちテーマストアでテーマを公開したい場合は、他人のテーマを元にしちゃダメらしいので注意が必要。 2 CSSを手に入れる 管理画面の[デザイン]→[カスタマイズ]→[デザインCSS]でCSS
2014-01-04 はてなブログデザインカスタマイズの解説。WEBデザインのノウハウも詳しく解説。 WEB ライフ こんにちはnasustです。今回は、はてなブログのデザインのカスタマイズが完了したので、どうやってカスタマイズしたのかをノウハウ含めて詳しく解説します。 始めに 今回のはてなブログのデザインカスタマイズは「よりiOSに近づいたOS Xのコンセプトデザイン : ギズモード・ジャパン」で紹介されているフラットデザイン風MAC OS Xデザインをモチーフに行いました。 このデザインに近づける為にカスタマイズしたポイントを解説します。 はてなブログのデザインテンプレートを選ぶ はてなブログのデザインのカスタマイズとは「ブログのテーマ」のCSSを修正するという作業のことです。 何故、CSSの修正かというとHTMLの修正ができないので「ブログのテーマ」の元から設定してあるCSSのスタ
さびしくて 振り込め詐欺と 長電話 ※第10回シルバー川柳入選作品 はてなブログをカスタマイズする方法を載せている記事をまとめてみました。 「あのブログみたいに自分のブログもオシャレにカスタマイズしたい!」と思い、 参考にしたブログ・Webサイトです。 基本的にコピペで済むので、はてなブログ超初心者の私でもこれらの記事を見ながら簡単にカスタマイズすることができました。 ぜひ、参考にしてみてください。 目次 見出し テーマ 関連記事 引用枠 最後に 目次 記事の中に目次を入れる方法です。 staff.hatenablog.com enjoymyblog.hatenablog.jp 見出し 見出しをカスタマイズする方法です。 見出しの変更はデザイン→カスタマイズ→カスタムCCSの空いているところにコードをペーストしてあげれば簡単に変えることができます。主にコードを載せている記事をまとめました。
はてなブログProにしていることもあってせっかくだから、 カスタマイズガシガシしてやろうと思い、 カスタマイズしてみました。 6時間くらいかけていろいろいじりました。 これまでに施した内容をまとめようと思います。 ちなみに私はCSSとJavaScriptが大の苦手です。 あんまり勉強する気が起きない上に、 JavaScriptなんて特にデバッグ大変なんですよね。あれ。 突き詰めると難しいし。表面的には簡単なように装っていますが。 カスタマイズ準備編 CSSをある程度覚える JavaScriptは必須ではないですが、CSSの知識をつけないとちょっと辛いです。 意外と知らない!?CSSセレクタ20個のおさらい|Webpark こことか見て勉強しましょう。ここだけでは足りないか…。 非公開の実験用のブログを作成 いきなり公開しているブログにカスタマイズを施してもよいのですが、 多々失敗することが
本日、はてなブログのサンプルテーマ「Boilerplate」を公開しました。デザインCSSをカスタマイズする土台に適しています。 Boilerplate(ボイラプレート)は、必要最小限の見た目だけがあらかじめ調整された、プレーンなサンプルテーマです。このテーマをもとにCSSを記述すると、はてなブログのデザインテーマを比較的カンタンに作ることができます。 Boilerplateテーマの見た目「オリジナルテーマの制作にチャレンジしたいけど、ゼロから作るのは大変」という方のために用意しました。ぜひ、このテーマを使ってCSSのカスタマイズに挑戦してください。 もちろん何もカスタマイズしなくても、シンプルなデザインテーマとしてそのまま使うこともできます。 Boilerplateテーマの使い方 Boilerplateテーマのソースコード(CSSおよびLESSファイル)は、GitHubで公開しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く