WordPressのテーマ制作に没頭して2週間程度...遂にオリジナルのテーマが完成した!!

WordPressのテーマはPHPで形成されているため、XHTMLのBloggerとは仕様が異なるのだけど、サイトデザイン自体はCSSでほとんどをまかなっているので、骨組みさえ作ってしまえばデザインは転用可能となる。

とりあえず、制作したテーマのデザインは以下の通り。

サイトデザイン

トップページ

クリックで全体像を表示

トップページは、2カラム構成で右側にサイドバーを配置したデザイン。
上から ヘッダ、メイン、フッター が並ぶ構成で、フッターにもウィジェットを配置できるようにした。

記事ページ

クリックで全体像を表示

記事ページは、記事エリアの下部にSNSボタンを配置した。
また、記事エリアの下に 関連記事、コメント が表示される仕様にした。

レスポンシブトップページ

スマホ用のレスポンシブデザインは、サイドバーをメインの下に回り込むように設定した。

また、ナビゲーションバーもレスポンシブ用のものが表示されるようにした。
このバーでは、ナビリストをタテ並び、サイドバーもタップで表示できる仕様にしている。

ファイルの構成

WordPressのファイルの構成は以下のようにした（Bloggerユーザには関係ないけど一応）。

・index.php：インデックス
・home.php：トップページ
・header.php：ヘッダー
・sidebar.php：サイドバー
・footer.php：フッター
・single.php：記事詳細ページ
・page.php：固定ページ
・comments.php：コメント設定
・archive.php：アーカイブページ
・search.php：検索ページ
・404.php：404 Not Found 用のページ
・functions.php：設定ファイル
・bread_crumb.php：パンくずリスト
・style.css：テーマのバージョン記述
・css/style.css：テーマのデザイン設定ファイル
・js/main.js：テーマの動作設定ファイル

画像の注釈

・画像はフリー素材を使用
・記事の大半ははテーマユニットテストデーターから導入
・自作の記事は青空文庫から適当に拝借

Bloggerへの移植

Bloggerのテンプレート制作について

ネットで色々検索してみたけど、Bloggerのテンプレート制作に関する情報は非常に少ない。

WordPressはサイトでも動画でもいくらでも出てくるのだけど、Bloggerに関しては全容について日本語で解説されているサイトが少ないので苦労しそうな予感がする。

とりあえず、今 漠然と解説サイトを眺めているのだけど、ワケがわからんというのが正直な感想。でも、随分前に部分的に改変してきた経緯があるので、昔とった杵柄ということでやってくうちに思い出せればやれるかも。

Bloggerに移植できるのか？

技術的には可能。まあ、自分の能力次第といった感じになりそう。

まだ、WordPressの自作テーマを完成させたところなので、移植については全く手をつけてないから何とも言えないのだけれど、まあ、やる気になれば何とでもなるんじゃなかろうか？

とりあえず、今はテスト用のブログに空のテンプレートを当てて少しづつパーツを移植していく方針で考えている。手始めにヘッダーにタイトルと説明を表示させるところから始めているのだが、タイトルが表示されるも説明が表示されず...なぜだ？（初っ端からすでにつまづいている模様）

追記：Bloggerに移植できました

20/9/3に このテンプレートのBlogger版をリリースすることができました。テンプレート名は「Hello, world!」です。無料配布しているので、よろしければ使ってみてください。