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

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

関連記事

Android 5.0 Lolipop(Nexus 5)のメモ

動作が重い・バッテリーの消費が激しい 再起動してRAMを空ける。 Amazon系のアプリをアンインストールすると良いとの情報。 また、OK Googleをオフにすると、マシになる気がする(私の主観)。 …

Nexus 5のバッテリーが壊れたのでLGに修理してもらった

Nexus 5のバッテリーが壊れた バツテリーがへたったようだ。まず、バッテリーの減りが異常で、2時間ももたない。それから、表示上はまだバッテリー残量がある状態で、突然、電源が落ちるようになってしまっ …

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

自分がフォローしている他人のツイートをEvernoteへ自動で送って、ログとして保存しておきたい。 検索するといくつか方法が出てきたが、どれも古い情報で、RSSフィードのサポートが終了している現在のT …

テーマ『Marukkoi -まるっこい-』を公開しました

HTML・CSS初学者のたかなしゆうです、こんにちは。この度、勢いとごり押しでテーマ『Marukkoi -まるっこい-』を公開しました。文字通り、まるっこい感じを目指したテーマです。 インストールは下 …

Twitterのお気に入りを見たら4件しか表示されない→できた

Twitterでバグ(仕様?)があったので解決法をメモ。   結論:『favolog』というサイトを使う。   このところ、Twitterの過去のお気に入りを整理していた。 具体的 …

書いている人


《たかなしゆう》
コミュ障が福祉の仕事に就くようです\(^o^)/
あっしの詳細はプロフィールを見てね!

ブログ更新情報

広告

カテゴリー

アーカイブ

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