・無料テーマー UnderShirt の基本カスタマイズやダウンロードが分かる！
・UnderShirt の特徴や利点が分かる！
・はてなブログの始め方が分かる！
・よくある質問集が分かる！
ブログ運営を 4 年ほど経験しているのでいろいろとアドバイスできるかなと思います。
というわけで、早速本題について詳しく見ていきましょう。
【はてなブログ初心者向け】UnderShirt ブログの基本カスタマイズを解説！
まずは UnderShirt ブログの基本カスタマイズについて詳しくお話ししていきます。
UnderShirt の基本カスタマイズ 6 つ
UnderShirt で基本的にカスタマイズしておくべきポイントとは？と疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. UnderShirt でカスタマイズしておくべきポイントとは？
・オリジナルヘッダー
・記事の二列にする
・プロフィール
・メニューバー
・サイドバー
・フッター
UnderShirt ブログのカスタマイズ手順についてはこのあと詳しくお話ししていくのでぜひ参考にしてみてください。
※ 今ならはてなブログ 40%OFF で独自ドメイン 1 年間無料キャンペーン中。
Q. 一日あれば UnderShirt ブログをカスタマイズできる？
のんびり UnderShirt ブログのカスタマイズをしていなければ一日で充分足りますよ。
あとデザインとかにも余りこだわらなければもっと早くできるはずです。
オリジナルヘッダーを付ける
オリジナルのヘッダーを付けるには？と疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. そもそもオリジナルヘッダーとは？
ヘッダーとは、ブログの最上部に表示されている画像・写真のこと。
つまり、上記でいうと最上部の黒いヘッダーのことを指していて、そのヘッダーをオリジナルのヘッダーにカスタマイズしちゃいましょうということです。
Q. どうやってヘッダーをカスタマイズするの？
UnderShirt のオリジナルヘッダーのカスタマイズは 4 ステップです。
因みに、上記タグの内 src="https:/ … 038.jpg" alt というタグだけあればおけです。
<a href="ブログ URL ">
<img src="ヘッダー画像タグ"alt="saimonblog" height="100%" width="100%">
</a>
| ヘッダー画像タグ | フォトライフで取得したヘッダーの画像タグを貼る |
| ブログURL | ブログの URL を貼る |
<style type="text/css">
.header-image-wrapper {display:none;}
#blog-title{display:none;}
.headernew img{
max-width:1380px;
margin: auto;
display: block;
}
.headernew a{
display:block;
background-color:#fff;
}
.headernew{
margin:0px!important;
}
</style>
最後に、上記コードをデザイン設定のヘッダー下に貼れば設定完了です。因みに、ヘッダー画像の形式は重量の PNG よりも軽量の JPEG がおすすめです。
ブログ記事を二列にする
UnderShirt のブログ記事を二列化するには？疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. そもそも記事の二列化とは？
トップページにあるブログ記事をコンパクトに二列表示させるということですね。
因みに、2 列化は PC でもスマフォでも適用され上記のようにお洒落になります。
Q. どうやってブログ記事を二列化するの？
UnderShirt のブログ記事を二列化するカスタマイズは 3 ステップです。
まず、はてなブログにログインします。
@media (max-width: 767px){
.archive-entry {
width: calc( 50% - 6px);
}
.archive-entry:nth-child(2n) {
margin-left: 12px;
}
.page-archive .entry-thumb {
height: 28vw;
}
}
上記をコピーして、デザイン設定のカスタマイズのデザイン CSS を開きます。
因みに、UnderShirt の二列化にはデザイン設定のスマフォがレスポンシブデザインになっているのが前提です。
プロフィールを付ける
プロフィールを付けるには？と疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. そもそもプロフィールとは？
プロフィールとは、ブログの運営者をざっくり紹介するためのページのこと。
はてなブログの基本機能を使えば簡単に設定できるので詳しくお話ししていきますね。
Q. どうやってプロフィール設定する？
UnderShirt のプロフィール設定は 3 ステップです。
まずは、はてなブログにログインしてデザイン設定のカスタマイズを開きます。
因みに、プロフィールをもっとお洒落にカスタマイズすることも可能です。
詳しくはサイドバーのお洒落編集にて解説ししてるのでぜひ参考にしてみてください。
メニューバーを付ける
メニューバーを付けるには？と疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. そもそもメニューバーとは？
メニューバーとは、ブログの上部やサイドに設置できる一覧のこと。
読者がブログ記事を簡単に見つけやすくするための役割を担っていて、当サイトでもサイドバーにて設置しています。
Q. どうやってメニューバー設定する？
UnderShirt ブログのメニューバーを設定するにはカテゴリを分かりやすく表示するを使用する必要があります。
FontAwesome のアイコンもメニューに埋め込めるのでぜひ試してみてみてください。
サイドバーを付ける
サイドバーを付けるには？と疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. そもそもサイドバーとは？
サイドバーとは、メインコンテンツの左右にある領域のこと。
つまり、上記でいうと赤枠の領域がサイドバーというものでして、はてなブログではそのサイドバーに 12 種類もの機能を設定することが可能です。
Q. どうやってサイドバー設定する？
はてなブログのサイドバー設定は 4 ステップです。
因みに、当サイトはよく検索と月間アーカイブと HTML という機能を使っています。
フッターを付ける
フッターを付けるには？と疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. そもそもフッターとは？
フッターとは、ブログの最下部に設定できる情報のこと。
つまり、上記でいうと最下部の黒いフッターのことを指していて、お問い合わせページやプライバシーポリシーの設置に使われることが多いです。
Q. どうやってフッターを設定するの？
UnderShirt のフッター設定は 3 ステップ。
まずは、はてなブログにログインしデザイン設定のデザイン CSS を開きます。
#bottom-editarea {
width: 100%;
margin: 0 auto;
background: #444444;
padding: 0;
color: #fff;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
#footer {
text-align: center;
color: #fff;
background: #444444;
width: 100%;
margin: 0;
padding: 2em 40px 1em 40px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
text-align: center;
font-size: 80%;
}
#blog-title-content a {
font-size: 00px;
font-weight: 100;
color: #fff;
}
.footer-links ul {
list-style: none;
padding: 0;
}
.footer-links ul li {
display: inline-block;
padding: 0 6px;
font-size: 14.5px;
box-sizing: border-box;
}
.footer-links ul li a{
color: #ffffff;
}
.copyright {
font-size: 10px;
}
/*自分で設定したフッターとページ下の余白を消す*/
#container {
margin-bottom: 0;
}
上記のコードをコピーしてデザイン CSS に貼り付けます。
<footer id="footer">
<div id="footer-menu">
<div id="blog-title-content">
<a href="ブログの URL "><img class="hatena-fotolife" title="ブログ名" src="ブログのフッター画像" alt="ブログ名" height="50px" width="50px">
</div>
<nav>
<div class="footer-links">
<ul>
<li>
<a href="お仕事ページの URL ">お仕事のご依頼</a>
</li>
<li>
<a href="お問い合わせページの URL">お問い合わせ</a>
</li>
<li>
<a href="プライバシーポリシーの URL">プライバシーポリシー</a>
</li>
</ul>
</div>
</nav>
<p class="copyright">© ブログ名 2019-2023</p>
</div>
</footer>
| プライバシーポリシー URL | プライバシーポリシーの URL を貼る |
| お問い合わせページ URL | お問い合わせページの URL を貼る |
| お仕事依頼の URL | 仕事依頼ページを貼る |
| ブログフッター画像 | フォトライフで取得したフッター画像の HTML タグを貼る |
| ブログ名 | ブログ名を記入する |
因みに、はてなブログ無料版ではフッターの設定ができません。
でも、非表示にすることはできるので詳細は当サイト後半を参考にしてみてください。
※ 今ならはてなブログ 40%OFF で独自ドメイン 1 年間無料キャンペーン中。
【 UnderShirt ブログ】関連質問集！
ここからは、UnderShirt ブログに関する質問集について詳しくお話ししていきます。
はてなブログの UnderShirt ブログを無料でダウンロードするには？
はてなブログの UnderShirt ブログを無料ダウンロードするには？と疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. そもそも UnderShirt ブログは無料でダウンロードできるの？
はてなブログのブログテーマー UnderShirt のダウンロードは今もなお無料ですよ。
人気度も健在で現在上位 3 位です。因みに、14,221 回もダウンロードされていて当サイトも使用しています。
Q. UnderShirt ブログをダウンロードするには？
① はてなブログアカウントを開設する
② アカウントを開いてデザインを開く
③ デザインテーマーのストアを開く
④ UnderShirt ブログを開く
⑤ ダウンロードする
因みに、UnderShirt ブログのダウンロードには大体 2~3 分掛かります（はやすぎ）。
はてな無料版フッターは非表示可能？
はてなブログ無料版のフッターは非表示可能なの？と疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. はてなブログ無料版のフッターは非表示可能なの？
はてなブログ無料版のフッターを非表示にすることは可能ですよ。
デザイン設定のデザイン CSS に下記のコードを貼り付けるだけでおけです。
UnderShirt ブログの特徴と利点は？
UnderShirt ブログの特徴と利点とは？と疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. UnderShirt ブログの特徴とは？
・レスポンシブデザインに対応している
・利用者が多く関連情報も豊富にある
・トップページの記事 2 列化ができる
・文字の質感が柔らかい
詳しくは UnderShirt ブログ紹介にて解説しているのでぜひ合わせてみてみて下さい。
Q. UnderShirt ブログの利点とは？
| 利点 ① | カスタマイズが結構自由にできる |
| 利点 ② | ブログ記事の 2 列表示ができる |
| 利点 ③ | 文字の質感が丸っこくて可愛い |
| 利点 ④ | ダウンロード・維持費が無料 |
因みに、ブログ記事の 2 列化ができるブログテーマーはごく少数しかないので、簡単に 2 列化できる UnderShirt は超希少です。
UnderShirt ブログの開発者は誰？
UnderShirt ブログの開発者は誰？と疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. UnderShirt ブログの開発者は誰？
UnderShirt ブログの開発者はロクゼウドン（Rokuzeudon）先生ですね（いずれはてなブログテーマーの開発王になるお方と思っている）。
Twitter 発信もしており UnderShirt のあれこれを DM にて聞くことが可能です。
Q. ロクゼウドン先生はどんなお方？
・UnderShirt ブログのあれこれを超丁寧に教えてくれる
・ラーメン屋のおやじと仲が良い
・名古屋シティ住まいのブロガー
ブログに詳しすぎるので多分エンジニアの卵です。
はてなブログの始め方は？
はてなブログを始めるには？と疑問に思う方もいるでしょう。
というわけで、上記の質問についていろいろと詳しくまとめました。
Q. はてなブログの始め方は？
| はてなブログメリット・デメリット | ★★★ |
| 独自ドメインを取得・設定しよう！ | ★★★ |
| 独自ドメイン取得後にやるべきこと | ★★★ |
| はてな（無料版・Pro）への登録 | ★★★ |
はてなブログにアクセスしてブログを始める手続きを行いましょう。
詳細は上記の始め方と関連記事をぜひ合わせて参考にしてみてください。
Q. はてなブログを始めるならおすすめは無料版？それとも Pro ？
ブログで稼ぐつもりなら圧倒的にはてなブログ Pro がおすすめでしょう。
でも、日記を書く・お試し程度であればはてなブログ無料版でも十分です。
※ 今ならはてなブログ 40%OFF で独自ドメイン 1 年間無料キャンペーン中。
最後に
最後に、当サイトからのお願いが一つだけあって聞いてもらえると嬉しいです。
Q. 当サイトからのお願いとは？
| YouTube | ユーチューブチャンネルにチャンネル登録する |
| ツイッターアカウントをフォローする | |
| Ouen | 投げ銭・プレゼントを贈る |
当サイトがすこしでも役に立った・学べたと思った方は応援をよろしくお願いします。
ということで、今回は以上となります。ご視聴ありがとうございました。
