最終更新日 2025-10-21
このブログでは「Founder」という無料テーマを利用しています。この記事では、私が「Founder」を選んだ理由やシンプルなデザインのテーマを選ぶメリットなどをご紹介します。
目次
「Founder」をテーマに選んだ理由とシンプルなデザインのメリット
なぜこの「Founder」を選んだかと言えば、シンプルすぎるくらいシンプルだから。
デザイン的に見るとちょっと簡素すぎるかもしれませんが、あえて無駄のないこのデザインを選んだのは、普段から感じるちょっとしたストレスの積み重ねからです。
例えば、こういったシチュエーションを経験したことはありませんか？
- 本文にいろんな装飾や吹き出しが多くて読みづらい
- サイドバーなどにプロフィールやオススメの記事、広告などが所狭しと並んでいる
- スクロールすると、ポップアップが本文の上に出てくる
上記のようなデザインが好きな方もいると思いますが、私自身は記事の周辺にたくさんの情報が散らばっていると、集中力を欠いてしまいます。
「記事を読みたいと思ってアクセスした人が中身に集中できる、本来の目的を重視したデザインにしたい」
「いっそ本くらい簡素にしたい」
といった思いが、シンプルなテーマ選びの出発点でした。
また、シンプルなデザインには以下のようなメリットもあります。
- 無駄が省かれていて、初心者でも操作がしやすい
- 細部にこだわる時間を省くことができる
- 万が一、テーマのデータが壊れた時などに修復しやすい
- 洗練されたWebサイトに見える
- 誰にとっても取っ付きやすいデザインである
このような観点からも、特別なこだわりがなければ、無難にシンプルなデザインを選ぶことをおすすめしたいです。
国内のブログはカラフルで凝ったレイアウトも多いですが、英語系メディアのブログはすごく簡素なデザインが多い印象でしたので、今回はテーマも海外のものから探して、スマホからでも読みやすい1カラムのこのテーマを選びました。
「Founder」について
「Founder」には無料版と「Founder Pro」という有料版があります。 これからご紹介するのは、無料版の方です。
【Founderの特徴】
- シンプルな1列のテーマ
- ロゴを挿入できる
- 50以上のSNSアイコンを利用できる（世界中の有名所のSNSは網羅されている）
- 投稿の抜粋部分の語数をカスタマイズできる
これらは全て無料版の機能に入っています。多少HTMLとCSSの知識がある人は、ちょっとデザインをカスタマイズするくらいなら、無料版で全く問題ないと思います。
また、上部のプルダウン式の部分（上にありますが、コードの名称的にはサイドバー）も、「ウィジェット」でカスタマイズ可能です。
私は、この部分だけブログのカテゴリーと投稿カレンダー、アーカイブの3カラムにして挿入しました。
デモページは、こちらから。
上部のアイコンからPC・タブレット・スマホの縦横表示を、それぞれの見え方でチェックできます。デモページのサンプル投稿の文章がラテン語になっているところも遊び心があったり……。興味がある方は一度デモページを一通り確認してみてください。
「Founder」の類似テーマ
「Founder」を作成したCompeteThemeでは、その他たくさんのテーマを配布しています。写真に特化したテーマや2カラムのデザインなど多種多様です。
「Founder」を元に作られた「Unit」というテーマもあり、こちらもかなりシンプルなのでお好みでどうぞ。
デモページはこちらから。
※「Unit」を使う際は、「Founder」が親テーマになります。
このWebサイトのカスタマイズした点
「Founder」をWordPressにインストールすると、テーマのダッシュボード画面からスタートガイドのページを開くことができます。
こちらのページには、カスタマイズしたい場合のやり方などを画像やYouTube動画と共に掲載されています。
また、こちらのサポートページには「CSS Snippets」というページもあり、カスタマイズしたい部分のコードを表記してくださっているので、そちらを追加CSSにコピペすれば簡単に編集できます。
私がデザインをカスタマイズしたのは、主に以下の点になります。
・ロゴやSNSのリンクなど全体の色をすべて紫系にした
・メニューリンクの文字サイズを大きくした
・プルダウン内部（ウィジェット）部分の文字サイズを大きくした
・トップページ「続きを読む」の文字サイズを大きくした
・トップページ「コメントする」のリンクを非表示にした
・投稿の見出し部分をオリジナルデザインにし、余白を大きくした
・全体の行間を180％に広げた
・フッターのテーマのクレジットの文字を自分のコピーライトに置き換えた
追加CSSの部分に書いた私のコードの一例を掲載しておきます。もし参考になれば幸いです。
またこの他にも「ここのデザインのCSSを教えてほしい」などあれば、お問い合わせフォームからお気軽にどうぞ。
ロゴ
- .title-container a:hover {
- color: #b3a1fd;
- }
メニュー部分
- .menu-primary-items a,
- .menu-primary-items a:link,
- .menu-primary-items a:visited,
- .menu-unset a,
- .menu-unset a:link,
- .menu-unset a:visited {
- font-size: 14px;
- }
- .menu-unset a:hover {
- color: #b3a1fd;
- }
SNSアイコン
- .social-media-icons a:hover {
- color: #b3a1fd;
- }
ウィジェット部分
- .widget * {
- font-size: 14px;
- border-bottom: none;
- }
- .widget a:hover {
- color: #b3a1fd;
- }
トップページの行間
- .wp-container-4 {
- line-height: 180%;
- }
トップページ「続きをみる」と「コメントする」
- .home .more-link {
- font-size: 0.8em;
- }
- .home .post-comments {
- display:none;
- }
投稿ページの見出しと行間
- .single .main h2 {
- margin: 1em 0em;
- padding: 0.3em 0.5em;
- background: #eae4ff;
- border-left: solid 10px #b3a1fd;
- }
- .single .main h3 {
- position: relative;
- padding-left: 1.2em;
- line-height: 1.4;
- }
- .single .main h3:before {
- font-family: “Font Awesome 5 Free”;
- content: “\f00c”;
- font-weight: 900;
- position: absolute;
- font-size: 1em;
- left: 0;
- top: 0;
- color: #b3a1ff;
- font-weight: 900;
- }
フッターのテーマクレジット
- .site-footer {
- font-size: 0px;
- }
- .site-footer:before {
- content:’© 2025 UjiLog’;
- font-size: 14px;
- display: block;
- padding: 8px 0;
- }
もし追加CSSではなくテーマファイル自体を編集する場合は、必ずバックアップを取り、自己責任でお願いします。
まとめ
「Founder」は、こんな人におすすめ
- シンプルな見た目がいい
- スマホ向けに1カラム表示がいい
- 細かい装飾にこだわらない、または時間をかけたくない
- ちょっとしたデザインのカスタマイズは自分で出来る
コメント