読者です 読者をやめる 読者になる 読者になる

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

黒板風囲み枠CSSでブログの解説記事をまとめよう

CSS ブログカスタマイズ

f:id:syofuso:20170225092001p:plain
色白おばけ (id:lightgauge) さんのブログ記事で使われていた”黒板風囲み枠”にインスパイア(笑)され、私も黒板風囲み枠のCSSを作ってみました。
はてなブログで独自のWEBフォントを利用する方法 - 攻めは飛車角銀桂守りは金銀三枚
CSSは参考せず自分で組みました。borderで太枠囲んでるだけですけど。

HTML&CSS

続きを読む

はてなブログのトップページと個別記事ページの違い

はてなブログ ブログカスタマイズ

f:id:syofuso:20170222005939p:plain
はてなブログを使っていると気づくと思いますが、はてなブログのトップページと個別記事ページ(エントリーページ)では表示される要素に違いがあります。

Point
  • はてなスターと公式のソーシャルパーツ以外の記事上、記事下のカスタマイズはトップページに表示されない
  • サイドバーの関連記事はトップページには表示されない
  • パンくずリストはトップページに表示されない

  • 記事上・記事下のカスタマイズ部分について
  • はてなブログのページ構成
  • パンくずリスト
  • 記事ページ固有のものはトップページに表示されない
続きを読む

『Vertical Timeline』の使い方 タイムライン表示で旅の過ごし方コンテンツを作りました

サイト制作 CSS

f:id:syofuso:20170216154418p:plain
Vertical TimelineはCSS3とjQuryで表現された縦のタイムラインで時系列にコンテンツを作るためのライブラリです。レスポンシブ対応でシンプルミニマルなデザインでアニメーション付きのタイムライン表現が実装できます。これはフラットデザインというよりマテリアルデザインに近いのでしょうか。
スクロールするとコンテンツが左右からフェードインされるアニメーションが印象的です。
DEMO:Responsive Vertical Timeline

Vertical Timelineの使い方

続きを読む

おすすめ!1カラムのおしゃれなはてなブログテーマまとめ

はてなブログ テンプレート

f:id:syofuso:20170208194936p:plain
たまにテレビではてなブログを使ったブログの画面がニュースなどで流れることがあります。
最近だと歌手のASKAさんのブログは有名で、ワイドショー報道とリアルタイム更新していた時ははてなのサーバーが落ちましたねw
テレビで見ていてふと思ったのです、ブログにサイドバーは要らないんじゃないかなと。
ASKAさんのブログは以前のはてなブログのデフォルトテーマ「Evergreen」ですが、シングルカラムって読みやすいんですよね。
サイドバーがない1カラムのブログはコンテンツに没入感があって、読むのに集中しやすいのです。
現在のデフォルトテーマも1カラムですね。Life - テーマ ストア

  • サイドバーはブロガーのためのもの
  • おすすめ1カラムはてなブログテーマ
    • Material
    • ornament
    • Afterrain
    • Sailor
    • 淡々

サイドバーはブロガーのためのもの

続きを読む