近所の気ままなゆるブログ

アラサーの男が趣味全開でお送りするブログ。基本毎日更新を目標。

CSS無知が挑戦。はてなブログのカスタム記事一覧

はい。変えました。近所です(´・ω・`)

コチラははてなブログを始めた方やカスタムをする方の参考にもなると思いますので説明だけにとどめます。

あ、もうヘッダーは突っ込まないで(´・ω・`)そんな感じの裏話はまたあとで。

 

デザインテーマ

採用テーマは"Sengyo"。広告を貼ることを前提としたオシャレなテーマ。しかもレスポンシブにも対応と言うまさに神様のようなデザイン。


このデザイン製作者の"らいか"様に厚く御礼申し上げます。 

www.sakana.tech


製作者様のカスタマイズ例(一部取り入れました)

www.sakana.tech


基本的なところはこちらのデザインコードのCSSを一部変更したりして作り上げました。

 

その後非公開のテーマとして投稿しこのブログに適用しています。

変更点

元々メインの記事は大きいのですがさらに広げました。それに伴いそれぞれの空白の調整などを手探りで入れてます。

 

また本来タブレットなどで閲覧するとサイドバーが下に行くのですがどうせそこまで見られることはないと判断し思い切って非表示にしました。

 

メニューバーの数も減らしその分大きさなどの調整も入れてます。

 

その他自分では出来ない(分からない)部分の作り込みは、以下紹介のサイト様の記事を参考にしました。

個々人ではなく失礼とは思いますが御礼申し上げます。

 

2/18

デザインテーマを元にCSSを書き換えたいという方向けにCSSの解説記事を書きました。

はてなブログのカスタマイズに特化した知識なので専門的ではありません。

 

www.kinjyo8835.com

 

 

 

※ 注意 ※

一部は数値の変更や追加でコード埋め込んだりしてます。
そこについては細かくなるのでここに記載しませんが、もし「コレどうやったの?」とかあればコメントなり置いてください。ただ…分かる範囲ならお答えしますが、自分も探り探りでやったので完璧な回答は期待しないでください(´・ω・`)

 

参考にしたサイト様の記事一覧

同じ方の記事で何個も使ってる物もありますが、カスタマイズ毎に記載していますのでご了承ください。 

ちょこちょこ補足のコメント入れてますのでご参考ください。

極力使わせていただいたカスタマイズはブクマしておくようにしたんですが、色々試行錯誤をして使ったり使わなかったりがあるので漏れもありそうです。

分かり次第追記していきますので申し訳ございません。

 

フッターの作り込み

はてなブログのフッター、フッターメニューまわりのカスタマイズ - Minimal Green


ヘッダを横一杯+リンク付き

【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法 - 月無ことのは日記


記事やサイドバーに枠を付ける

はてなブログの便利過ぎるテーマ「Spirea」を作った|一瞬で自分だけのデザインにできる! - いつ俺〜いつから俺ができないと錯覚していた?〜


SNS系ボタン

PC用

はてなブログに11種類から選べるSNSフォローボタンをコピペ+αで実装するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた?〜

 

スマホ用

コピペ一発!はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ! - いつ俺〜いつから俺ができないと錯覚していた?〜

 

 

サイドバー追従

レスポンシブに対応したサイドバー固定Ver.2(はてなブログ向け) - NO TITLE

 

続きを読むボタン

【保存版】簡単コピペの"続きを読む"ボタンデザイン集【はてなブログカスタムVol.11】 - 急がば 急いでまわれ!

ネーミングにツボったオートマチックグラデーションサンダーぶるぶる震わせてみました。(TOPページでご確認ください)


見出しのデザイン

コピぺでOK!CSSのみで記事タイトルのデザインをおしゃれにする方法15【はてなブログカスタマイズ】 - North-Geek

 

コピペで簡単!CSSではてなブログの見出しをカスタマイズ! - NO TITLE

 

おススメ記事

おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ - NO TITLE

 

ダブルレクタングル

無料はてなブログにGoogle AdSenseダブルレクタングル広告設置 - かくてもあられけるよ

 

アドセンス挿入

【改良版】コピペで簡単!はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ

最新版では簡単にコードが作れる記事もありますが、個人的に入れたい設定があったのでこちらを元に作りました。

 

あわせて読みたいリスト

はてなブログに「あわせて読みたい」機能を追加するAlso readをリリースしました - すなばいじり

 

テーマ投稿の方法

自作テーマのススメ/はてなブログテーマ制作の流れなど - Minimal Green

 

はてなスターのカスタム

はてなスターの見た目を変えるアレコレ - kyabana's blog

 

読者になるボタン

はてなブログの読者登録ボタンの設置やカスタマイズ - NO TITLE