記事下のパーツの順番を変える

まず、デザインCSSに以下のコードを貼ってください。(貼り方) /*--記事下のパーツの順番--*/ .entry-footer-section {order:5;} /*著者名、日付*/ .hatena-star-container {order:2;} /*はてなスター*/ .social-buttons {order:1;} /*twitterやはてなブッ…

トップページではてなスターやコメント欄を表示する

このテーマではトップページの.entry-footerは(美観上)オフにしているのですが、表示したい場合はデザインCSSに以下のコードを貼ってください。(貼り方) .page-index .entry-footer {display:block;}

はてな無料版のキーワードリンクの下線を消す

はてなブログの無料版では、勝手に記事本文にこんなかんじで→キーワードリンクがついてしまいますね。これ自体は有料版(Pro)にアップグレードしないとどうにもならないのですが、見た目だけはなんとかできます。デザインCSSに以下のコードを貼ってください。…

検索ボタンを虫眼鏡アイコンにする

検索ボックスの「検索」ボタンを虫眼鏡アイコンにしたい場合、サイドバーの「モジュールを追加」→「HTML」にこれを貼ってください。 <form class="search-form" role="search" action="/search" method="get"> <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required=""> </form>

サイドバーを独立でスクロールする

見本としてこのページのサイドバーはスクロールできるようにしてあるので、試してみてください。Essayではサイドバーは固定となっています。(解除の方法はこちら)個人的にはサイドバーの情報量は画面に収まるくらいがいいかなと思ってこういう仕様にしてい…

はてなフッターの文字サイズを変える

Essayでははてなフッターのブログ名の部分のフォントサイズを大きめにしていますが、ブログ名が長いとちょっとうるさいかな、と思いました。以下のコードを貼ればフォントサイズを変えられます。(貼り方) .footer-address {font-size: 1.6rem;} /*数字の部…

ブログタイトル部分の高さやフォントサイズの変更

デザインCSSに以下のコードを貼ってください。(貼り方) こうしたい!というのがあればお気軽にコメントにどうぞ〜 高さを変える フォントサイズを変える おまけ:ブログタイトル部分の下のボーダー 線の種類 線の太さ 線の色 おまけ2:タイトルの上下左右…

背景色を変更する

Essayの背景色はこうなっています。 body {background:#fffef6;} ほんのりクリーム色の紙をイメージしているのですが、クリーム色の成分を濃く、または薄くするには以下のCSSを貼ってください。(貼り方) 背景色を変える 背景色を濃くする /*背景色を濃くす…

サイドバーを右へ

Essayの元になっているテーマPlainは自由なレイアウトが特長なので、Essayもレイアウトを自由にできます。サイドバーを単純に右にするだけでなく、1カラムにしたり他にも細かくいじれます。 サイドバーを右へ サイドバーを上げる サイドバーの位置が左の場…

サイドバーの固定を解除する

サイドバーって記事に集中している間は目に入らないので、そんなに情報量を多くしてもしょうがないのかな、と思います。なので、必要な情報を絞って固定してしまうのがいいんじゃないかと思い、Essayではサイドバーは固定になっています。 (記事を一通りス…

記事内の文字の太さを変える

このテーマのフォントはこちらのWEBフォントを使っています。デフォルトでは記事内の文字の太さ(font-weight)は300になっています。細くしたり太くしたり、変更するには、デザインCSSに以下のコードを追加で貼ってください。(貼り方) .entry-content {fo…

SNSシェアボタンを出す

はてなデフォルトでもSNSシェアボタンはありますが、このテーマに合わせて作りました。この記事の下にも出ています。「記事」→「記事下」のHTMLに以下のコードを貼ってください。(貼り方) <ul class="my-so-btns"> <li class="my-so-btn-hatenabookmark"><a href="http://b.hatena.ne.jp/entry/{Permalink}">はてなブックマーク</a></li> <li class="my-so-btn-subscribe"></li></ul>

フッターメニューを出す

このサンプルブログと同じフッタを出すには、以下のコードを「フッタ」のHTMLに貼ってください。(貼り方) <footer id="essayfooter"> <div id="essayfooter-left"> <div id="essayfooter-left-head"><i class="blogicon-hatenablog"></i>筆者:id:ユーザー名<a class="subscribe-btn" href="https://blog.hatena.ne.jp/ユーザーID/ブログのURL(http://は除く)/subscribe">読者になる</a></div> </div></footer>

ヘッダーメニューを出す

このサンプルブログとおなじヘッダーメニューを出すには、「ヘッダ」→「タイトル下」のHTMLに以下のコードを貼ってください。(貼り方) <nav id="essaytopmenu" class="ontitle-menu"> <ul> <li><a href="メニュー1のURL">メニュー1</a></li> <li><a href="メニュー2のURL">メニュー2</a></li> <li><a href="メニュー3のURL">メニュー3</a></li> <li><a href="メニュー4のURL">メニュー4</a></li> </ul> </nav>

Essayについて

Essayはテーマ「Plain」を元にカスタマイズしたはてなブログテーマです。ご不明点や「この部分のデザインをいじりたい」などあればお気軽にコメントにどうぞ!

サンプルエントリー(記事の見本)

サンプル記事です。このテーマで記事を書くとこうなる、という参考にしてください。