はてなブログのidとかclassとか - kyabana's blog
はてなブログで「デザインテーマコンテスト」が開催されています！ オリジナルデザインを投稿して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（
はてなブログのカスタマイズの方法についてまとめてみた【ま】 - はてブのまとめ
この記事ははてなブログに興味がある方、はてなブログを利用してるがテンプレートのまま使ってる方に向けた記事となっています。 はてなブログではどうしてもWordPressのプラグインなどと違って機能が限定されてる印象を受けます。 始めにテンプレートを選んでそのままの状態の人も多いのではないでしょうか。 正直私はCSSやHTMLなど余り詳しくなかったので、とにかくググりまくりました。まだヘッダー画像もないような陳腐なブログですが、色々と見て回った結果実際に私が試したものも含めて参考にしたブログや元々のはてブロの機能を紹介したいと思います。 はてなブログ公式のカスタムテーマ これはブログを作った方なら色々試したことでしょう。 最近またまた良デザインのテーマが増えたので目を通してみて欲しいです。 テーマ ストア - はてなブログ 最近人気の渋谷で働く営業マンのナンパ日記なんてテーマとブログの内容にあ
はてなブログに実施した、４つのデザインカスタマイズ - Banguardサイト
ブログのデザインを少し変更してみました。それほど大きな変更ではないのですが、変えたのは以下の4点です。 １．ブログのデザインテーマを変更した ２．記事の幅を広げた ３．「続きを読む」を加えた ４．ブログの見出しに画像を加えた はてなブログは、ある程度自分で自由にカスタマイズすることが可能です。Webデザインの知識がない私ですが、なんとか今回の4つは自分でできました。はてなブログのカスタマイズをしようとする際に、参考にしていただたら嬉しいです。 はてなブログのデザインをカスタマイズした場所 今回カスタマイズしたのは、主にブログ全体に関わる部分が２箇所、トップ画面で１箇所、記事画面で１箇所、計４箇所です。特にブログのデザインテーマの変更と記事の幅の変更は、ずっとやりたかったカスタマイズです。 ブログ全体に関わる変更点と、トップ画面での変更点 また、「ブログの見出しに画像を加える」ことも、地味で
はてなブログのサイドバーの幅を変更する - #人生戦略実行マニュアル
公式テーマ1位のこのテーマも悪くないけど、ちょっとサイドバーが狭いので調整してみた。 HTMLタグの構成を確認する Google Chromeなら右上の設定ボタン（"三"みたいなやつ）> ツール > デベロッパー ツール でブログのレイアウトを確認してみる。sidebarを探すとidは"box2"で、widthは180pxらしい。 180pxは窮屈感があるので、250pxにしてみる。 CSSを編集する。 はてなブログのサイドバーにあるidからプルダウンメニューを開いて、デザインを押す。 左にあるメニューから「カスタマイズ」>「デザインCSS」でサイドバーのcssを書き換えてみる。 cssを書いてみる。 #box2 { float: right; width: 250px; /* サイドバーの幅 */ } サイドバーのスペースに収まらず、コンテンツの下にいどうしてしまったので、コンテンツのサ
写真に説明文をつけて右寄せにする。 - そのうちがんばる。
写真に説明文をつけて右寄せにするために、表の中に入れちゃう作戦（ちょっと懐かしめな技かも）。 僕はこのブログの記事を「はてな記法」で書いてるのですが（画像のオプション指定が簡単だから）、「はてな記法」での表組みでは、表を右寄せにすることができないっぽい（よくわかんないけど、たぶん）。なので、テーブルタグを使うことにしました（はてな記法モードでも、タグはちゃんと認識されるんですね）。 説明です。 ネコですよ。 こんな感じ。 これによって、同じくはてな記法ではできない（よくわかんないけど、たぶん）、セル内の改行もできるようになるようです。 ついでに、写真と説明の一体感を出すために、表に背景色（bgcolor）を着けています。 以下、ソースです。 <table style="float:right; width:300px; margin-left:15px; background-color:
ブログランキング運用時の注意点～はてなブログは運用の手間が多い～ - マネー報道 MoneyReport
ブログランキングの効果が出ない？ 仲の良いブロガーさんが記事にて 「最近アクセスが滞ってきたな・・・と思案中。アイデアくださーい。」 と書かれていたのでコメントで少しアドバイスをコメントに書かせてもらいました。 抹茶グラノーラを作ってみた。当然、簡単に出来た。。。 - アイデア・ノウハウ販売サービス アイマケ開発日記 ですが 「ブログランキングは貼っているけど効果が出ているのかわからない」 との事。 そういえば以前、私の記事でブログランキングの導入方法を紹介（ブログ読者100名突破記念！PV10以下のブログが即日PV30越えにする方法！ - マネー報道 MoneyReport）させてもらいましたが、運用時の注意事項を書き忘れていた事に気付きました。 「ブログランキングはブログに設置して終わり。後は知らなーい。」 と言う方が多いと思いますが、これでは全くアクセスは増えません。 ブログランキン
Module - テーマ ストア
サイドバーを右側に表示させる 以下のソースコードをデザインCSSの最後に追記してください。 #wrapper { float: left; } #box2 { float: right; } はてなダイアリーでよく見かけるリキッドレイアウトに変更する 以下のソースコードをデザインCSSの最後に追記してください。 左サイドバーにしたい場合はmarginとfloatを修正してください。 タイトル背景を透過させています。 制限事項：ヘッダ画像の表示位置がおかしくなるかもしれません。 #content, #blog-title, .breadcrumb, #top-editarea, #bottom-editarea { width: 90%; /* 80%〜95%の範囲を推奨 */ } #content, #blog-title, .breadcrumb { min-width: 800px;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
