はてなブログのカスタマイズでは、いろいろなことができます。いろんな方のブログを見て、面白そうな機能だったりレイアウトだったりを参考にして、自分なりに見やすい、他人から見て見たくなるようなブログを作っていきましょう。
- はてなブログの見出しをカスタマイズする簡単な方法
- はてなブログの見出しをCSSでカスタマイズする簡単な方法
- はてなブログでCSSを使って、吹き出し機能を実装
- 別ページにリンクするときに、特定の箇所に飛ばす方法
- はてなブログのリンクを枠線で囲む簡単な方法
- はてなブログのリンクを別タブで開く設定方法３選
- はてなブログで、メニューバーとヘッダー画像の間の余白を消す簡単な方法
- はてなブログの画像を、一括で中央寄せにする簡単な方法
- はてなブログで、ページトップへ行くボタンを設置する簡単な方法
- はてなブログのタブメニューというサイドバーカスタマイズが、超おすすめ
- まとめ
Contents
はてなブログの見出しをカスタマイズする簡単な方法
ブログ記事は、見出しが命です。見出しのカスタマイズしてますか？
僕が使っている、はてなブログテーマ「ブルックリン」の見出しは吹き出しですが、ちょっと僕のイメージには合わないんです。もっと、シンプルな方が好きだなと思っていました。
とはいいつつ、ブルックリンのカスタマイズ性の高さには、感心させられっぱなしです。ありがたやありがたや。
はてなブログの「見出し」をカスタマイズしていきます
「つばさ (id:tsubasa123)」先生の記事に飛んで、「はてなブログテーマの見出しのCSSを修正するためのCSS」をコピペします。
コピペでどうぞ。はてなブログ用の見出しCSSカスタマイズをとりあえず25個ほど – つばさのーと
そして、あなたの気に入った見出しデザインのCSSコードをコピぺしてみてください。
貼り付け場所は、デザイン→カスタマイズ→デザインCSSです。
はい、終わりです。簡単すぎるので言うこともないですかね。
あえて言及するなら、「はてなブログテーマの見出しのCSSを修正するためのCSS」のマージンとパディングは、ゼロ指定しなくても、問題なかったってことですね。
この辺は、CSSをご自身でいじって調整してみてください。
はてなブログの「サイドバー見出し」もついでにカスタマイズします
はてなブログテーマの見出しのCSSを修正するためのCSSを応用して、ボクが作ったコードがこちら。
/*サイドバーのカスタマイズ吹き出し削除*/
.hatena-module-title,
.hatena-module-title::before,
.hatena-module-title::after {
border: none;
border-radius: 0;
}
CSSコードの貼り付け場所は、デザイン→カスタマイズ→デザインCSSだよ。
あとは、「つばさ (id:tsubasa123)」先生の記事に飛んで、あなたの気に入った見出しデザインのCSSコードをコピぺしてください。
ただし、見出しデザインCSSのエントリーコンテントを、はてなモジュールタイトルに変えることを忘れずに。
/*サイドバーのカスタマイズ*/
.hatena-module-title {
text-align:
padding:
color:
border-bottom:
border-color:
}
上記コードのように「CSS」内のエントリーコンテントをはてなモジュールタイトルに変えるってことです。
僕は、はてなブログテーマのブルックリンでこのコードを実践してるので、他のテーマの方にあうかどうかはわかりません。その点はご理解ください。
見出しがスッキリすると、記事全体の見栄えも良くなった気がします。やっぱり、見出しはブログ記事の命だと思います。
はてなブログの見出しをCSSでカスタマイズする簡単な方法
はてなブログのカスタマイズガンガンしちゃってますか？
初心者ブロガーのうちに、どんどんいろんなカスタマイズに挑戦しましょうよ！！！みるみるうちに、ブログがいい感じになっていきますから！！！
特に、見出しは読者の目を引きつけるのに、すごく役に立ちます。ブログの見た目の要とも言える見出し表記を、しっかりカスタマイズしちゃいましょう。
というわけで、はてなブログの見出しをCSSでカスタマイズする簡単な方法をご紹介します。
CSSのコピペで実装できる！！はてなブログの見出しをカスタマイズする簡単な方法
はてなブログ界隈では、知らない人はいないんじゃないかと言うほどのカスタマイズの神である、シロマティ (id:shiromatakumi)先生の記事に飛んで、見出し用のCSSコードをコピーします。
コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ – NO TITLE
PCのデザインは、CSSコードを「デザイン」→「カスタマイズ」→「デザインCSS」にコピペで貼り付けます。
スマホのデザインは、CSSコードを「デザイン」→「スマートフォン」→「記事上」に貼り付けます。
当然ながらスマホ版は、スタイルタグで囲ってから、CSSを貼り付けましょう。
<style type="text/css"> ここにテキストを入力します </style>
ブログのカスタマイズ作業を楽にしたいなら、CSSとHTMLの言語を一通り勉強しておくべし
ブログのカスタマイズ作業を楽にしたいなら、CSSとHTMLの言語を一通り勉強しておくことをオススメします。わかると分からないでは、作業効率が、雲泥の差です。
ドットインストール先生が、HTMLとCSSの基礎事項を無料で教えてくれますので、興味ある方は、ざっと勉強してみてください。
ブログのカスタマイズですが、一気にやると、結構疲れてしまいます。少しずつでいいので、気になる部分をカスタマイズしていきましょう。慣れてくると、カスタマイズがだんだん楽しくなって来るかと思います。
はてなブログでCSSを使って、吹き出し機能を実装
CSSで実装できる吹き出し機能使ってますか？
有名ブロガーのポジ熊さんや、やぎペーさんの記事を見ていると、吹き出し機能を使われてますよね。ユーザビリティーを意識して導入されているのだと思います。
というわけで、CSSで吹き出し機能を実装する方法を、ご紹介します。
CSSで吹き出し機能を実装する方法
シロマティさんの記事を見ていただくと、CSSのコピペで簡単に、吹き出し機能を実装できます。
関連記事：
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 – NO TITLE
シロマティさんの記事にあるCSSをデザインCSSにコピペします。
スマホ版では、「スマホ」デザインの「ヘッダ」内にある「タイトル下」にCSSを記入します。HTML内に、CSSを直接記入する場合、styleタグで囲む必要がありますので、
<style> この中にCSSを記入します </style>
「この中にCSSを記入します」のところに、CSSをコピペします。
ブログ記事編集画面で記事中の吹き出しにしたい文章を、
<p class="r-fuki クラス名">ここにテキストを入力</p>
<p class="l-fuki クラス名">ここにテキストを入力</p>
クラス指定したPタグで囲めば、完成です。クラス名は、CSSやHTMLの言語と被らないものにしましょう。よくわからなければ、ご自身の名前をアルファベット表記で書けば問題ないかと思います。
「r-fuki」は、「吹き出し文章が右」に来て、画像が左に来ます。「l-fuki」は、「吹き出し文章が左」に来て、画像が右に来ます。
ぜひ、吹き出し機能を実装して、ブログ記事の見栄えを華やかにしてみてください。楽しい雰囲気になるのでおすすめです。
別ページにリンクするときに、特定の箇所に飛ばす方法
ブログを作っていると、自分のブログの別のページにリンクを飛ばしたくなって、さらにいうと特定の箇所に飛ばそうと思っても、やり方がわからん！！ってなってませんか？
このページにたどり着いていただいて、大正解です。わかりやすく解説していきます。
僕のブログの例を見てみてください。
上のページを見ていただくと、最後の見出しにまとめがあります。ここに、別ページの特定箇所へのリンクを張っています。実際にリンクをクリックすると、以下のように飛んでいきます。下のリンクでは、今ココと赤い矢印と一緒に書いた箇所に、直接飛ぶように設定してます。
具体例を見ていただいたところで、実際にリンクの設定方法を解説していきます。設定するポイントは、2箇所です。まずは、リンク先の別ページ、つまり飛んでいって欲しい別のページの方にディブ（div）の設定をしていきます。
<div id="step10"> <b>■STEP10 腹筋</b> </div>
今回の例では、このようにディブアイディを設定しています。ディブを設定する意味は、簡単に言うと、ここに別のページからのリンクを飛ばすための印付をしているんだというふうに考えてください。
ディブアイディは、アルファベットと英数字で設定します。このあたりは、そういうルールになっているということで、理解しておいてください。
ディブタグで囲んだ中に、飛ばしたいリンク先の特定箇所の文章を挟んでください。
次に、もう一つ設定をしていきます。今度の設定は、今見ているページに設定していくことで、別のページに飛んだら特定の箇所にリンクするよという設定をしていきます。
文字にリンクを付ける方法は、はてなブログの編集画面にある、リンク設定ボタンを使っていきます。これに関しては、目次設定ボタンをよく使っている方は、おわかりになると思います。
文字にリンクを設定するときに、飛ばしたいリンク先のアドレスに#をつけて先程つけたディブのアイディを記述します。すると、以下のようになります。
▼[https://www.asakumamasaru.com/entry/kintore-saisoku#step10:title=腹筋を鍛える]
このリンクをクリックすることで、別ページのディブを設定した特定箇所にリンクで飛べるようになりました。ぜひ、試してみてください。
参考になる記事を載せておきます。
はてなブログのリンクを枠線で囲む簡単な方法
はてなブログのカスタマイズしてますか？最近思うんですが、初心者ブロガーのうちに、アレヤコレヤとカスタマイズに悩んでいたほうが、その後、アクセス数が伸びる気がしてます。
というわけで、はてなブログのリンクを枠線で囲む簡単な方法をご紹介します。
はてなブログのリンクを枠線で囲むためのCSSコードを貼り付ける
シロマティさんの記事に飛んで、ご自身のお気に入りの「枠線デザイン」を選択してください。
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ – NO TITLE
CSSコードを「デザイン」→「カスタマイズ」→「デザインCSS」にコピペで貼り付けます。
スマホ版は、「スタイルタグ」で囲ってから、CSSを貼り付けましょう。
<style type="text/css"> ここにテキストを入力します </style>
記事中のリンクをPタグのエンファサイズリンクで囲む
通常のテキストリンクは、以下のように表示されます。
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ – NO TITLE
それを、
<p class="emphasize-link">ここにテキストを入力します</p>
クラス指定したpタグの、エンファサイズリンクで囲みます。
すると、
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ – NO TITLE
このように、枠で囲まれたテキストリンクが出来上がります。見た目かっこいいでしょ？
ブログ記事の内容や、1記事の文章の長さは1000文字以上という鉄板事項も大事ですが、見た目もすごく大事です。僕は、8割型文章のレイアウト含めた見た目で決めてます。
人は見た目が１００％っていう、ブルゾンちえみさんのネタがありますけど、ブログ記事も、見た目にこだわりましょう。
2018年7月2日追記ここから。
枠線の中の画像やテキストを中央揃えにする方法
枠線の中の画像やテキストの位置を、中央揃えにしたいと考えてませんか？
- 検索してたどり着いた記事に書いてあるとおりにやってみたけど、全然うまくいかない。
- 自分のブログだけ、なんかおかしなことになってるのかな？
このような疑問を持ったあなたは、この記事にたどり着いていただけて大正解です。おめでとうございます。
僕も、枠線の中のテキストがどうしても、縦に上下に中央揃えにならなくて小一時間くらいああでもないこうでもないと格闘してました。
結果的に、見つけ出したのが、こちらの記事です。
.box {
display: table;
width: 100%;
height: 100px;
.text {
display: table-cell;
text-align: center;
vertical-align: middle;
}
}
ボックスを指定して、ディスプレイに、テーブルを設置します。ウィスやヘイトを指定することで、どこに中央揃えにするか指定します。
テキストを指定して、ディスプレイをテーブルセルにして、テキストアラインをセンターにして、ヴァーティカルアラインをミドルにします。
面倒くさかったら、コピペしていただいたらいいかと思います。
僕がパソコンと格闘した小一時間が、あなたのお役に立てたら幸いです。
はてなブログのリンクを別タブで開く設定方法３選
はてなブログのリンクを別タブで開く設定方法3選について、お話ししていきます。
はてなブログのリンク設定が、デフォルトだと同じタブで開くようになってますね。せっかく閲覧中の記事から、読者が離れていく、、、と気になる方も多いことでしょう。僕も、ちょっと気になってました。
ということで、はてなブログのリンクを別タブで開く方法を紹介します。
はてなブログ内のすべてのリンクを別タブで開く設定方法
はてなブログ管理画面で、設定→詳細設定に移動します。
詳細設定内の、headに要素を追加の部分に
<base target="_blank">
をコピペで貼り付けます。
すると、はてなブログ内のすべてのリンクが別タブで開くようになります。ですが、これは、かえってブログが閲覧しにくくなりそうな気がしますｗ
はてなブログ内のすべてのリンクを別タブで開くけど、別タブを一つだけに限定する設定方法
はてなブログ管理画面で、設定→詳細設定に移動します。
詳細設定内の、headに要素を追加の部分に
<base target="new">
をコピペで貼り付けます。
すると、はてなブログ内のすべてのリンクを別タブで開くけど、別タブを一つだけに限定することができます。だいぶリンクが使いやすくなります。
ただ、トップページへのリンクも別タブで開くっていうのは、少し使いにくいですねｗ
はてなブログ内の特に記事内のリンクだけを別タブで開く設定方法
a-kuma3 (id:a-kuma3)さんのプロフィール – 人力検索はてなさんが書いたスクリプトを使います。
関連記事：
はてなブログで、リンクを設定する際に、「新しいタブで開く」よ… – 人力検索はてな
コピペで実装するだけで、記事内のリンクだけを別タブで開く設定完了です。これが、今のところベストな設定だと思います。
はてなブログで、メニューバーとヘッダー画像の間の余白を消す簡単な方法
はてなブログのヘッダー画像下の余白、気になってませんか？僕は、はてなブログに来て1ヶ月ほどの間ずっと気になってました。
というわけで、はてなブログで、メニューバーとヘッダー画像の間の余白を消す簡単な方法をご紹介します。
メニューバーのCSSに、マージントップをゼロにして追加する
ほとんどのはてなブロガーさんは、メニューバーを使われてることと思いますので、その前提でお話しします。
「デザイン」→「カスタマイズ」→「デザインCSS」に行きます。「メニュー」に関する「CSS」にたどり着いたら、
#menu {
margin-top: 0px;/*トップ画像との余白*/
}
マージントップをゼロに指定して、追加するだけなので、超簡単です。
beforeの画像がこちらです。
メニューバーとヘッダー画像の隙間が、気になります。
afterの画像がこちら。
メニューバーとヘッダー画像の隙間が、なくなってます。
アレヤコレヤと悩んでいたのは、何だったんだ！こんな基本的なCSSで実装できるなんて、、、。と思われた方、心配しないでください。僕も、悩んでました！
僕は、CSSとHTMLの知識を多少独学で身につけていたんですが、まだまだわからないことだらけです。ですが、多少なりとも勉強しておいたので、カスタマイズを自分でできるようになります。ぜひ、CSSとHTMLを勉強することをおすすめします。
はてなブログの画像を、一括で中央寄せにする簡単な方法
はてなブログの画像、左寄りになってませんか？僕は、スマホでの表示の事も考えて、画像を小さめに設定してます。だから、パソコンで閲覧した時の画像がどうしても左寄りになる。
なんとなく、左寄りだとしっくりこないんですよね。
というわけで、はてなブログの画像を一括で中央寄せにする簡単な方法について、話を進めていきます。
cssのコピペで実装できる画像の一括中央寄せ
「うり (id:uriuridayo) 」さんの記事に飛んで、cssをコピーします。
【はてなブログ】画像を中央揃えにする方法【CSS】 – うりだよ。
「デザイン」→「カスタマイズ」→「デザインcss」にコピーしたcssを貼り付けます。はい、終わりです。簡単すぎましたね。
「before」はこちらです。
画像が思いっきり左寄りになってますね。
「after」はこちらです。
画像が、いい感じにセンタリング（中央寄り）されてますね。
画像の配置を色々考えるのも、楽しいですよね。いろんなブログを見て自分が見やすいと思った画像配置方法を真似するのもいいと思います。
はてなブログで、ページトップへ行くボタンを設置する簡単な方法
ブログにページトップへ戻るボタン設置してますか?僕は、設置していませんでした。僕が、毎日のように閲覧しているポジ熊 (id:pojihiguma)さんが、目次へ戻るボタンを設置していました。
僕も、ページトップへ戻るボタンを設置してやるぜ。
ということで、はてなブログでページトップへ戻るボタンを設置する簡単な方法について、お話ししていきます。
はてなブログで、ページトップへボタンを設置する簡単な方法
あくあのーと (id:AquaNote)さんのページに飛んで、JQueryとHTMLのコードをコピーします。
はてなブログにページトップへ戻るボタンをつけよう！ – No Hack No Life
パソコン版では、「デザイン」→「カスタマイズ」→「フッタ」に、コピーしたコードを貼り付けます。
スマホ版は、「デザイン」→「スマートフォン」→「フッタ」に、コピーしたコードを貼り付けます。
次に、「CSS」のコードをコピーします。
パソコン版では、「デザイン」→「カスタマイズ」→「デザインCSS」に、コピーしたコードを貼り付けます。
スマホ版では、「デザイン」→「スマートフォン」→「ヘッダ」に、コピーしたコードを貼り付けます。
<style type="text/css"> ここにテキストを入力 </style>
スマホ版は、もちろんスタイルタグで囲ってから、コードを貼り付けます。
ページトップへボタンの細かい調整
トップへ戻るボタンのサイズをいじりたいときは、CSSの数字を変えてみてください。やってみたら、感覚的にわかってくるかと思います。
色の変更は、ブログいじりをされてる方がほぼ皆さんご存じのWEB色見本、原色大辞典のページに行けば、好きな色が見つかるかと思います。
トップへ戻るボタンがあると、ユーザービリティ的にいいですよね。スクロールせずにパッと上まで戻れますので、ぜひ、設置してみてください。
はてなブログのタブメニューというサイドバーカスタマイズが、超おすすめ
サイドバーのカスタマイズしてますか？初期設定をちょっといじったくらいだと、まだまだ寂しい感じですよね。いろんな有名サイトさんを見た結果、タブメニューという設定が、便利で見栄えもいいと感じました。
てなわけで、はてなブログのタブメニューというサイドバーカスタマイズが超おすすめなので、ご紹介していきます。
タブメニューというサイドバーカスタマイズのやり方
ゆきひー (id:ftmaccho)さんのページに飛んで、タブメニューに入れたいものをサイドバーに準備します。
はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ – Yukihy Life
で、サイドバーに準備した３つか４つのタブの上にカスタムHTMLのモジュールを追加して、ゆきひーさんの作ったHTMLコードを貼り付けます。
次に、Jqueryのコードをコピーして、「デザイン」→「カスタマイズ」→「フッタ」に貼り付けます。
タブ1～タブ４までの文字を、ゆきひー (id:ftmaccho)さんのページに書かれている、はてなブログで指定されたクラスに書き換えましょう。
終いに、ゆきひー (id:ftmaccho)さんのページにあるCSSコードをコピーします。
「デザイン」→「カスタマイズ」→「デザインCSS」にコードを貼り付けます。
その他、細かい設定については、ゆきひー (id:ftmaccho)さんのページにあります。ですが、このままでも、充分いい感じに機能します。
完成したものがこちらです。
「人気」「最新」「月別」「カテゴリ」の４つのタブをクリックしたら、それぞれ下に「内容」が表示される仕様です！！いい感じでしょ？
ただ単に、縦に冗長に４つサイドバーが並んでいるよりも、見た目的にかなりスッキリすると思います。
まとめ
はてなブログのカスタマイズには、いろんなやり方があります。まずは、いろんな方のブログを片っ端から見ていきましょう。その中で、これいいなと思うような機能だったり、デザインだったり、レイアウトを、自分なりにカスタマイズして取り入れて、見やすいブログを作っていきましょう。
コメントを残す