これまで私がSTINGER5に行ったカスタマイズや設定のアレコレ

 2014/09/19

STINGER5はすでに不動の人気となっていますね。今までいろいろカスタマイズしてきたので備忘録もかねてエントリーにしたいと思います。

※2015年からは自作のテーマにて運営しています。

スポンサーリンク

サイトデザインのカスタマイズ

細かなところの色やボーダースタイルなどはカツアイです。

メニューの表示を色々変更

スマホのユーザビリティーを考慮し、何カ所かカスタマイズを行いました。細かにエントリーに書いたのでそれらをまとめた記事が以下の物です。

メニュー部分、サイドバーh4のデザイン

アイコンフォントをFont Awesomeからicomoonへ変更

icomoonは自作のSVG画像をアイコンフォント化できるので、Font Awesomeでは配布していないfeedlyやpoket、はてブなども使えるようになります。そのうちブログ独自のロゴを作って、アイコンフォント化とか目論んでおります。

シェアボタンをアイコンフォントを使用したオリジナルへ変更

以前のデザインはこちら

サイドバーにアイコンフォントを使ったフォローボタンを設置

ツイッター、フェイスブック、RSS、feedlyの購読ボタンを設置しています。

サイドバーのカテゴリ

サイドバーのカテゴリはカスタムメニューを使っていますが、カスタムメニューはなんかいらないクラスとかが勝手につくのでfunctions.phpにコードを記載してクラス名を消してます。

ヘッダー部分にアイコンフォントを使ったフォローボタンを設置

マウスホバーでぴょこぴょこ動くエフェクトがついています。かわいいエフェクトに萌ます。

ヘッダー画像を消した

header.phpの以下の部分を削除

  <!--カスタムヘッダー画像-->
<div id="gazou">
<?php if(get_header_image()): ?>
<p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
<?php endif; ?>
</div>
<!-- /gazou --> 

さらにfunctions.phpのカスタムヘッダーを削除

サイト名をロゴ画像へ

functions.phpでのテーマカスタマイザーのコードを削除したので、ダッシュボードからロゴ画像を設定できなくなりました。header.phpに下記の画像のパスを直接記述。画像はテーマのimagesフォルダに入れてます。

<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Shufulife-主婦ライフ-" width="250" height="60" /></a></h1>

スポンサーリンク

アドセンス

記事中へアドセンスを表示するため、サイドバー上が空いてしまいます。そこにA8.netなどの他の広告をいれています。尚且つその広告をカテゴリ別に変えています。

コンテンツ内デザイン

見出しh2

WEB道さんのジェネレーター使ってます。便利!

見出しh3

Webクリエイターボックスさんのサイトを参考にさせていただきました。

見出し(まとめ)h4

Webparkさんのサイトを参考にさせていただきました。

引用部分

ヨメレバ・カエレバのカスタマイズ

カエレバとヨメレバ、どちらにも対応しているスタイルです。

キャプチャ画像

簡単な設定で外部サイトのスクショとタイトルを記事中に挿入できるようにしています。

設定関係

タイトルにサイト名を吐き出す

OGPとツイッターカードの設定

固定ページにもカテゴリーを紐付できるようにした

簡単なコードをfunctions.phpに貼り付けるだけです!

まとめ

あれもこれもとカスタマイズ欲が出てきてしまいますが、読みやすいブログが一番ですね!

STNGER5

Please comment!

  

1件のコメント

  • ライトニング 2015年6月17日 10:11

    大変参考になりました!
    CSSやHTMLがよくわかっていなくても
    どうにかカスタマイズできています!
    ありがとうございました!
    自分の能力不足で何故かキャプチャリンクがスマホ表示の際、画像が左によってしまいますが……勉強します。

Messege




2件のトラックバック