Webサービス はてなブログ コンピューター

はてなブログをカスタマイズする際に参考にした記事集(76記事・46カスタマイズ)

投稿日:

Hatena

 

※随時更新(最終更新2016年5月23日)

はてなブログ初心者で、HTMLやCSSも素人の私がブログをカスタマイズするために参考にした記事集のまとめです。
半分は自分用メモ。
基本、HTML・CSS初心者でもコピペでできる内容になっています。

記事にして解説してくれている方々、ありがとうございます。

【全般】はてなブログをカスタマイズするときに参考にした記事

外部CSS

外部にCSSファイルを置いて読み込み、管理しやすくする方法です。

リンクを新しいタブで開く設定

おしゃれなソーシャル(SNS)フォローボタンを設置する

はてなブログの読者になるボタン、Twitterフォローボタン、Feedlyフォローボタンをおしゃれにします。

ソーシャル(シェア)ボタンの設置

おしゃれなソーシャル(シェア)ボタンを設置します。

 

忍者ツールズを使うバージョン。
こっちは種類も多く、簡単。

記事の見出しのデザイン変更

見出しをおしゃれに見やすくカスタマイズします。

関連記事の表示

関連する記事を表示します。
いろいろなものが開発されているようです。

 

同じカテゴリ内の記事をランダム表示して関連記事みたいにします。

自動で目次表示

見出しタグから自動で目次を作ってくれます。

パンくずリスト

カテゴリや記事一覧に広告を表示

カテゴリや記事一覧ページにも広告を表示させる方法です。

カエレバ、ヨメレバのデザインをおしゃれに

カエレバ、ヨメレバのデザインをCSSでおしゃれに。

アプリーチのデザインをちょっと整える

アプリーチのデザインをちょこっといじって整えます。

Webフォントの使い方

Webフォントの使い方が説明されています。

記事中にAdSense広告を自動で入れる

【PC】はてなブログをカスタマイズするときに参考にした記事

構図

カスタマイズのヒントになる構図です。

フォントの変更

いろんな場所のフォントを変更する際の参考になります。

 

ブログタイトルを、Webフォントを読み込んでかっこよくします。 

ブログの幅を変える

ブログの幅を変えるのって結構難しいですね。

サイドバーの左右を変える、引用のデザインを変えるなど

画像を自動で中央揃え(センタリング)、リンク色の変更など

画像を自動で中央揃え(センタリング)にします。

 著名とタイムスタンプを非表示に

著名(自分のニックネームとID)とタイムスタンプを非表示にします。

ヘッダーに画像付き最新記事

まとめブログとかでよくあるやーつ。

サイドバーの最新記事と人気記事が画像付きでウィン! ってなるかっこいいやつ

マウスオーバーするとグレーがかった記事タイトルがウィンってなって画像が明るくなるやつ。 

サイドバーの過去記事にもっと読むを

サイドバーモジュールをタブで切り替えるように

複数のサイドバーモジュールをタブで切り替えるようにするやつです。

 カテゴリのタグクラウド化

サイドバーモジュールのカテゴリをタグクラウドにします。

メニューバー(グローバルナビゲーション)を設置する

グローバルナビゲーションの設置の仕方です。 

 

グローバルナビゲーションのカテゴリを自動で追加する方法です。

 

アイコン付きのやつの作り方。

トップへ戻るボタンの設置

クリックすると上(トップ)にヒュンって戻るボタンを設置します。

うーんと……記事の一部がウィンってなるやつ

クリックするとウィンってなるやつだよ……

続きを読むのデザイン変更

タイトル表示をブログ名と違うものにする、トップページを記事一覧にする、記事を読む所要時間を表示、カテゴリーラベルの色変更、グローバルナビをFont Awesomeで装飾など

404 Not Foundページのカスタマイズ

【スマホ】はてなブログをカスタマイズするときに参考にした記事

上部のログイン、下部のはてなブログへのリンクなどを非表示

「はてなブログを始めよう」とか「はてなブログ開発ブログ」などのリンクを非表示にします。

おしゃれに様々なカスタマイズいろいろ

スマホカスタマイズのいろいろ。

日付部分のデザイン変更など

グローバルナビゲーション(メニューバー)

2スタイルあります。

トグルメニュー

「MENU」をタップするとカテゴリが表示されるやつ。

ホーム、人気記事、カテゴリ、トップへ戻るのメニューバーを画面下固定で設置

ホーム、人気記事、カテゴリ、トップへ戻るの4種のボタンのあるメニューバーを画面下固定で設置します。

トップに最新記事と人気記事

グローバルナビゲーションとは別に最新記事と人気記事のタブみたいなのをつけます。

AdSense広告のガタガタ横スクロールを直す

AdSense広告に横スクロールが発生してガタガタするのを直します。

【レスポンシブ】はてなブログをカスタマイズするときに参考にした記事

ドロップダウンメニューとトグルメニュー

【テーマ限定】はてなブログをカスタマイズするときに参考にした記事

『Blank』、『Innocent』の記事幅の変更

『Blank』、『Innocent』の記事の幅を変更します。

『Innocent』にナビゲーションバー

『Innocent』の上部に画像つきおすすめ記事を追加

『Blank』、『Innocent』のパンくずリストの「>」を正しい位置に

おまけ:カスタマイズの補助

カラー

Webフォント

 

-Webサービス, はてなブログ, コンピューター

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

cheero Energy Plus 12000mAhを購入した感想

cheero Energy Plus 12000mAh(CHE-050)を購入したので、開封した感想。 購入したのはこちら。 cheero Energy Plus 12000mAh マルチデバイス対応 …

はじめてのNexus 5で困ったこととその解決方法

はじめてのNexusデバイス(Android 4.4)でできなくて困った、うまくいかないなどの疑問点とその対策方法をメモ書きしとく。  Androidの設定画面の開き方がわからない ・ステータスバーを …

他人のツイートログをEvernoteに自動で保存する方法(2-A)

下記の記事からの続きで、ステップ2-AのEverRSSを使う方法。 他人のツイートログをEvernoteに自動で保存する(1)   この方法では、最短2時間ごと、最長1日ごとに、まとまった1つのノート …

キヤノンの『Creative Park』が無料なのにすごい!

こんにちはひふへほ。今回はプリンターでおしゃれ楽しいキヤノン『Creative Park』というサイトを紹介します。 サイトはこちら→Canon Creative Park なにがすごいのか 誰でも利 …

ネタに困ったりモチベーションが下がったらブログチャレンジをしよう

はてなブログのブログチャレンジ、やってますか?実は私、最近この機能を知りました。タスクをクリアするごとにポイントが溜まって、レベルが上がってくんです。これはモチベーションアップにいいなって思いました。 …

書いている人


《高梁ゆう》
パンツ大好きぱんつブロガーの高梁ゆうだよ!
無職になったウェーイ\(^o^)/
あっしの詳細はプロフィールを見てね!

ブログ更新情報

パンツ好きすぎてブログ作っちゃいました

広告

カテゴリー

アーカイブ