IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / cms-style / はてなブログをWordpress風に! cms-style(1)

はてなブログをWordPress風に! cms-style(1)

2017/04/14 cms-style, CSS, はてなテーマ, はてなブログ

このサイトは「はてなブログ」を使って書いているのですが、テーマを WordPress や Joomla!など CMS 風にしています。それなりに手のこんだことをしていますので自分のメモも兼ねて解説をしていこうと思います。

  • WordPress や Joomla! ぽさって何だろう?
  • はてなブログの HTML 構造
    • body 要素の class 属性がページの内容を示している
    • ヘッダ/タイトル下、フッタに HTML を記述
    • グローバルヘッダー

WordPress や Joomla! ぽさって何だろう?

WordPress, Joomla! どちらも CMS と呼ばれるもので、サイトの基本構造は固定で作っておき、日々のページ作成はテキストや画像をフォームに入力していくだけという Contents Management
Sytstem のことです。システムには PHP が使われていることが多いです。

見た目のデザインはテーマやテンプレートと呼ばれ、ビジネス(コーポレイト)系、eコマース系、ニュースサイト系、ブログ系、ポートフォリオなど、無料のものから有料のものまでたくさん公開されています。ただ、最近は出尽くしている感もあり、画像は違っていても同じようなデザインのものが多いです。

下の画像はWordpress 日本語サイトに公開されていたテーマです。


テーマディレクトリ — 無料の WordPress テーマ

ここ2,3年目立つようになったスタイルではないかと思います。で、何を抑えればこういう印象になるかを整理しますと、おおむね次の点かと思います。

  1. トップページに大きな画像
  2. 最上部にメニューバー
  3. アニメーションやスライダー
  4. トップページにサイト内の Features, News, Latest Articles などを画像やブロックを使ってリンク付表示
  5. フッターに About Us やリンクなどの情報を固定
  6. トップページは1カラム

こんな感じていってみようと思います。

はてなブログの HTML 構造

まずは、はてなブログの HTML 構造を確認してみましょう。

<body class="page-entry enable-top-editarea enable-bottom-editarea">
<div id="globalheader-container" ></div><!-- [ブログにヘッダとフッタを表示しない]チェックで消える -->
<div id="container">
<div id="container-inner">
<header id="blog-title">
<div id="blog-title-inner" >
<div id="blog-title-content">
<h1 id="title">ブログ名</h1>
</div>
</div>
</header>
<div id="top-editarea"></div><!-- ヘッダ/タイトル下HTML -->
<div id="content">
<div id="content-inner">
<div id="wrapper">
<div id="main">
<div id="main-inner">
<article>
<div class="entry-inner">
<header class="entry-header"></header><!-- 記事タイトル -->
<div class="entry-content"></div><!-- 記事内容 -->
</div><!-- #entry-inner -->
</article>
</div><!-- #main-inner -->
</div><!-- #main -->
<aside id="box1"></aside><!-- 未使用 -->
</div><!-- #wrapper -->
<aside id="box2"></aside><!-- サイドバー -->
</div><!-- #content-inner -->
</div><!-- #content -->
<div id="bottom-editarea"></div><!-- フッタHTML -->
</div><!-- #container-inner -->
</div><!-- #container -->
<footer id="footer"></footer><!-- [ブログにヘッダとフッタを表示しない]チェックで消える -->
</body>

この構造のどの要素をどこに配置するかを決めていくわけですが、まず基本的なことの確認です。

body 要素の class 属性がページの内容を示している

  • page-index ____ トップページ
  • page-entry ____ 記事ページ
  • page-archive ____ カテゴリー、月別アーカイブ、検索結果
  • page-about ____ プロフィール

これを利用すればトップページだけデザインを変更することが出来ます。たとえば、

.page-index #box2 { display: none; }

とすればトップページだけサイドバーが消えます。もちろん、他にコンテンツブロックを100%にするなどの指定も必要になります。

ヘッダ/タイトル下、フッタに HTML を記述

これはちょっとこったテーマにしようとする場合は必須要件ですね。デザイン > カスタマイズ のそれぞれフォームに HTML を書けば自動的に div要素が追加されます。ここには Javascript も書けます。

  • ヘッダ/タイトル下 ____ div#top-editarea (上の HTML 構造参照)
  • フッタ ____ div#bottom-editarea (同上)

同時に、body に `enable-top-editarea enable-bottom-editarea’ のクラスが追加されます。

グローバルヘッダー

最上部に表示される黒い(デフォルト)バーで、はてなブログのロゴや管理画面へのリンクなどが表示されるものですが、今回は邪魔なので消します。

設定 > 詳細設定 > ブログにヘッダとフッタを表示しない(PC版のみ) にチェック

なお、(PC版のみ)とあるのは、スマホ用にはてなデフォルトのデザインを使う場合はここをチェックしても消えませんよということで、今回のようにレスポンシブデザインにする場合は、スマホでも表示されなくなります。

まとめるのは大変ですね。時間がなくなってしまいましたので次回です。

サイトデザイン変更/はてなブログを Joomla! (WordPress) 風にする
デスクトップはメニューバー、スマホはオフキャンバスメニュー cms-style(2)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/02/1

WordPress:期間指定で人気記事を表示(プラグインなし)

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress60
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com