青空コメントアウト

WEBのこと、デザインのこと、ご飯のこと、趣味のこと。青空の向こうの誰かに届きますように。

はてなブログテーマ「ソラノタビ」をカスタマイズしておしゃれに使おう!

このエントリーをはてなブックマークに追加

日曜WEBデザイナーのあろえりーな(@aloerina_)です。
土曜日も活動しています。

さて、今回はてなブログのテーマ「ソラノタビ」を公開致しました。

f:id:cocoro27:20160410235204j:plain

コンセプトカラーは前回と同様に、空の青花々の赤です。爽やかで親しみやすい雰囲気テキストの可読性を重視しましたので、どなたでも気軽に使えるものになっているかと思います。また、誰でも簡単にカスタマイズできるよう、いろんなものを仕込んであります。今回は簡単なカスタマイズ方法を公開します。




テーマのインストール

まずはインストールして自分のブログに適用することから。以下のリンクからどうぞ。

ソラノタビ - テーマ ストア - はてなブログ

ちなみに、ヘッダー画像は少し高さのあるものを用意し、実際に表示させたい部分よりやや上に設定するときれいに表示されます。通常のテーマよりも画像を大きく表示するテーマですので、お気に入りの画像をはめこんでみてください。




カスタマイズ

SNSシェアボタンを設置しよう

各自好きなSNSシェアボタンを置くこともできますが、このテーマにはSNSシェアボタンのデザインが既に組み込まれています。そのデザインを利用する場合は、 ダッシュボード ≫ デザイン ≫ 記事 ≫ 記事上下のカスタマイズ に下記コードを埋め込みましょう。

記事上用

<!--SNSシェアボタン-->
<div class="share-buttons header">
    <!--はてなブックマーク-->
    <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share-button share-button-hatena" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="icon-hatebu"></i></a>
    <!--Facebook-->
    <a href="http://www.facebook.com/share.php?u={URLEncodedPermalink}" class="share-button share-button-facebook" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="fa fa-facebook"></i></a>
    <!--Twitter-->
    <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-button share-button-twitter" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-twitter"></i></a>
    <!--Google+-->
    <a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="share-button share-button-google"><i class="fa fa-google-plus"></i></a>
    <!--Pocket-->
    <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share-button share-button-pocket" target="_blank"><i class="fa fa-get-pocket"></i></a>
</div>


記事下用

<!--SNSシェアボタン-->
<div class="share-buttons footer">
    <!--はてなブックマーク-->
    <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share-button share-button-hatena" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="icon-hatebu"></i></a>
    <!--Facebook-->
    <a href="http://www.facebook.com/share.php?u={URLEncodedPermalink}" class="share-button share-button-facebook" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="fa fa-facebook"></i></a>
    <!--Twitter-->
    <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-button share-button-twitter" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-twitter"></i></a>
    <!--Google+-->
    <a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="share-button share-button-google"><i class="fa fa-google-plus"></i></a>
    <!--Pocket-->
    <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share-button share-button-pocket" target="_blank"><i class="fa fa-get-pocket"></i></a>
</div>


少し種明かしをすると、埋め込むコードの class="share-buttons" がミソです。「share-buttonsという名前がついている部分にデザインを適用してね」というコードをテーマデザインに仕込んであるのです。逆に言えば、独自のデザインのシェアボタンを追加したい場合は、この名前が被らないように注意が必要です。



グラデーションを変えよう

ヘッダー画像にはグラデーションがうっすらかかります。これが不要な場合は、 ダッシュボード ≫ デザイン ≫ デザインCSS に下記コードを追加しましょう。

#blog-title-inner::before {
      content: none !important;
}


グラデーションの色を変えたい場合は、まずグラデーションさせたい2色のカラーコードを用意しましょう。カラーコードとは『#に続く6桁数字のコード(3桁の省略可)』です。2色用意できたら、上と同様デザインCSSの箇所に下記コードを追加しましょう。
追加できたら、#000000の箇所を用意した2つのカラーコードで置き換えましょう。

#blog-title-inner::before {
      background: #000000 !important;  /* 好きなカラーコードにしましょう。グラデーション未対応時に表示される色です。*/
      background: -webkit-linear-gradient(to right, #000000 , #000000) !important; /* 2つのカラーコードで#000000を置き換えましょう */
      background: linear-gradient(to right, #000000 , #000000) !important;  /* こちらも2つのカラーコードで#000000を置き換えましょう */
}




おわり

このテーマを気に入ってくれた方のブログが少しでも素敵なものになり、お気に入りのものになり、読者に愛されるものになれば幸いです。
これからもテーマの改良は続けていきます。次はスマホ対応をする予定ですが、うまく動かないところや気になる箇所がある場合は、ご気軽にあろえりーな(@aloerina_)までご連絡ください。もちろん、ブログカスタマイズの相談も受け付けています。

TOP