saimonblog

Undershirt ブログ基本カスタマイズ【はてなブログ初心者向け解説】

f:id:retirerich:20210125222531j:plain

UnderShirt ブログで基本的にカスタマイズしておくべきポイントとは?ブログの初心者でよく分からないので詳しく教えてほしいです。できれば、UnderShirt ブログの特徴や利点とかも教えてもらえると助かります。
こういった悩みに答えていきます。

 

 

このブログを読むメリット

 

・無料テーマー UnderShirt の基本カスタマイズやダウンロードが分かる!

・UnderShirt の特徴や利点が分かる!

・はてなブログの始め方が分かる!

・よくある質問集が分かる!

 

ブログ運営を 4 年ほど経験しているのでいろいろとアドバイスできるかなと思います。

というわけで、早速本題について詳しく見ていきましょう。

 

【はてなブログ初心者向け】UnderShirt ブログの基本カスタマイズを解説!

まずは UnderShirt ブログの基本カスタマイズについて詳しくお話ししていきます。

UnderShirt の基本カスタマイズ 6 つ

UnderShirt で基本的にカスタマイズしておくべきポイントとは?と疑問に思う方もいるでしょう。

というわけで、上記の質問についていろいろと詳しくまとめました。

Q. UnderShirt でカスタマイズしておくべきポイントとは?

・オリジナルヘッダー

・記事の二列にする

・プロフィール

・メニューバー

・サイドバー

・フッター

UnderShirt ブログのカスタマイズ手順についてはこのあと詳しくお話ししていくのでぜひ参考にしてみてください。

\ はてなブログ Pro なら制限なし /

※ 今ならはてなブログ 40%OFF で独自ドメイン 1 年間無料キャンペーン中。

Q. 一日あれば UnderShirt ブログをカスタマイズできる?

のんびり UnderShirt ブログのカスタマイズをしていなければ一日で充分足りますよ。

あとデザインとかにも余りこだわらなければもっと早くできるはずです。

オリジナルヘッダーを付ける

オリジナルのヘッダーを付けるには?と疑問に思う方もいるでしょう。

というわけで、上記の質問についていろいろと詳しくまとめました。

Q. そもそもオリジナルヘッダーとは?

ヘッダーとは、ブログの最上部に表示されている画像・写真のこと。

つまり、上記でいうと最上部の黒いヘッダーのことを指していて、そのヘッダーをオリジナルのヘッダーにカスタマイズしちゃいましょうということです。

Q. どうやってヘッダーをカスタマイズするの?

UnderShirt のオリジナルヘッダーのカスタマイズは 4 ステップです。

STEP
はてなブログにログインする
まずは、はてなブログにログインしてフォトライフからオリジナルヘッダーにしたい画像を見つけます。因みに、サイズは 1600px・200px が推奨です。
STEP
HTML タグをコピーする

フォルダー編集からオリジナルヘッダーの HTML タグを取得します。
因みに、上記タグの内 src="https:/ … 038.jpg" alt というタグだけあればおけです。 
STEP
コード①の設定をする
<h1 class="headernew"> 

     <a href="ブログ URL "> 

        <img src="ヘッダー画像タグ"alt="saimonblog" height="100%" width="100%">

     </a>

ヘッダー画像タグ フォトライフで取得したヘッダーの画像タグを貼る
ブログURL ブログの URL を貼る
上記に運営しているブログの情報を設定して設定後はコードをデザイン設定のヘッダー下に貼り付けます。
STEP
コード②の設定をする

<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 ステップです。

STEP
はてなブログにログインする

まず、はてなブログにログインします。
STEP
コードをコピーする
/* UnderShirt - スマホでも記事を2列で表示 */
@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 を開きます。
STEP
デザイン CSS に貼り付ける
最後に、先ほどのコードをデザイン CSS に貼り付ければ二列化完了です。

因みに、UnderShirt の二列化にはデザイン設定のスマフォがレスポンシブデザインになっているのが前提です。

プロフィールを付ける

プロフィールを付けるには?と疑問に思う方もいるでしょう。

というわけで、上記の質問についていろいろと詳しくまとめました。

Q. そもそもプロフィールとは?

プロフィールとは、ブログの運営者をざっくり紹介するためのページのこと。

はてなブログの基本機能を使えば簡単に設定できるので詳しくお話ししていきますね。

Q. どうやってプロフィール設定する?

UnderShirt のプロフィール設定は 3 ステップです。

STEP
はてなブログにログインする

まずは、はてなブログにログインしてデザイン設定のカスタマイズを開きます。
STEP
サイドバーを開く

サイドバーを開いてモジュールを追加するを開きます。
STEP
プロフィールを設定する
最後に、プロフィールの設定をして適用&保存をすれば完了です。

因みに、プロフィールをもっとお洒落にカスタマイズすることも可能です。

詳しくはサイドバーのお洒落編集にて解説ししてるのでぜひ参考にしてみてください。

メニューバーを付ける

メニューバーを付けるには?と疑問に思う方もいるでしょう。

というわけで、上記の質問についていろいろと詳しくまとめました。

Q. そもそもメニューバーとは?

メニューバーとは、ブログの上部やサイドに設置できる一覧のこと。

読者がブログ記事を簡単に見つけやすくするための役割を担っていて、当サイトでもサイドバーにて設置しています。

Q. どうやってメニューバー設定する?

UnderShirt ブログのメニューバーを設定するにはカテゴリを分かりやすく表示するを使用する必要があります。

FontAwesome のアイコンもメニューに埋め込めるのでぜひ試してみてみてください。

サイドバーを付ける

サイドバーを付けるには?と疑問に思う方もいるでしょう。

というわけで、上記の質問についていろいろと詳しくまとめました。

Q. そもそもサイドバーとは?

サイドバーとは、メインコンテンツの左右にある領域のこと。

つまり、上記でいうと赤枠の領域がサイドバーというものでして、はてなブログではそのサイドバーに 12 種類もの機能を設定することが可能です。

Q. どうやってサイドバー設定する?

はてなブログのサイドバー設定は 4 ステップです。

STEP
はてなブログにログインする

はてなブログにログインしてデザインをクリックします。
STEP
カスタマイズをクリックする

カスタマイズのサイドバーをクリックします。
STEP
モジュールを追加する

モジュールを追加するをクリックします。
STEP
サイドバーを設定する

最後に、サイドバーの詳細設定をして適用をすれば完了です。

因みに、当サイトはよく検索と月間アーカイブと HTML という機能を使っています。

フッターを付ける

フッターを付けるには?と疑問に思う方もいるでしょう。

というわけで、上記の質問についていろいろと詳しくまとめました。

Q. そもそもフッターとは?

フッターとは、ブログの最下部に設定できる情報のこと。

つまり、上記でいうと最下部の黒いフッターのことを指していて、お問い合わせページやプライバシーポリシーの設置に使われることが多いです。

Q. どうやってフッターを設定するの?

UnderShirt のフッター設定は 3 ステップ。

STEP
はてなブログにログインする

まずは、はてなブログにログインしデザイン設定のデザイン CSS を開きます。
STEP
デザイン 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 に貼り付けます。
STEP
フッター設定をする
<!--コピーライト-->
<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 タグを貼る
ブログ名 ブログ名を記入する
上記に運営しているブログの情報を設定します。
STEP
フッターに貼る
最後に、デザイン設定のカスタマイズのフッターに先ほどのコードを貼り付ければ完了です。

因みに、はてなブログ無料版ではフッターの設定ができません。

でも、非表示にすることはできるので詳細は当サイト後半を参考にしてみてください。

\ はてなブログ Pro なら制限なし /

※ 今ならはてなブログ 40%OFF で独自ドメイン 1 年間無料キャンペーン中。

【 UnderShirt ブログ】関連質問集!

ここからは、UnderShirt ブログに関する質問集について詳しくお話ししていきます。

はてなブログの UnderShirt ブログを無料でダウンロードするには?

はてなブログの UnderShirt ブログを無料ダウンロードするには?と疑問に思う方もいるでしょう。

というわけで、上記の質問についていろいろと詳しくまとめました。

Q. そもそも UnderShirt ブログは無料でダウンロードできるの?

はてなブログのブログテーマー UnderShirt のダウンロードは今もなお無料ですよ。

人気度も健在で現在上位 3 位です。因みに、14,221 回もダウンロードされていて当サイトも使用しています。

Q. UnderShirt ブログをダウンロードするには?

① はてなブログアカウントを開設する

② アカウントを開いてデザインを開く

③ デザインテーマーのストアを開く

④ UnderShirt ブログを開く

⑤ ダウンロードする

因みに、UnderShirt ブログのダウンロードには大体 2~3 分掛かります(はやすぎ)。

はてな無料版フッターは非表示可能?

はてなブログ無料版のフッターは非表示可能なの?と疑問に思う方もいるでしょう。

というわけで、上記の質問についていろいろと詳しくまとめました。

Q. はてなブログ無料版のフッターは非表示可能なの?

はてなブログ無料版のフッターを非表示にすることは可能ですよ。

デザイン設定のデザイン CSS に下記のコードを貼り付けるだけでおけです。

#footer{
display:none;
}
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 がおすすめでしょう。

でも、日記を書く・お試し程度であればはてなブログ無料版でも十分です。

\ はてなブログ Pro なら制限なし /

※ 今ならはてなブログ 40%OFF で独自ドメイン 1 年間無料キャンペーン中。

最後に

最後に、当サイトからのお願いが一つだけあって聞いてもらえると嬉しいです。

Q. 当サイトからのお願いとは?

YouTube ユーチューブチャンネルにチャンネル登録する
Twitter ツイッターアカウントをフォローする
Ouen 投げ銭・プレゼントを贈る

当サイトがすこしでも役に立った・学べたと思った方は応援をよろしくお願いします。

 

ということで、今回は以上となります。ご視聴ありがとうございました。