ノートの落書き感覚で発信する情報ブログ、その名も「デジテクノート2」。 沖縄から不定期で好き勝手更新しています!今年で13周年目!

【報告】SIMPLESTER Ver5とSTINGER5でかっちょいい自作テーマ作りました

4_20150921_degitekunote2-theme

どうも、T90chiというT100taの上位種を危うくポチろうとしてしまいました私(@こふす)です。Macbook Pro購入してまだ4ヶ月なのに新PCを購入しようなんて私は馬鹿か(笑)

さてさて、degitekunote2が三度の飯よりも好きという方なら気がついた方も居るかもしれませんが、実はデザインが変わりました。デザインのチェンジは特に決まっていなくて気分によって変えているんですが、デザインに関してはシンプル→ゴテゴテ→シンプル→ゴテゴテと自分も気づかない内にサイクルが決まっているみたいです。

ちょうど以前のテーマがSIMPLESTERオンリーのテーマでシンプルだったので、今回はSIMPLESTER Ver5をフルにカスタマイズしてゴテゴテで作ってみました。

というわけで今日から新デザインでの更新です。

 

 

というわけで新テーマの見どころをご紹介。まぁこの記事見なくても既にご覧の方は実際に見ていただくほうが早いんですが、紹介したいんで書きます。

トップページ

まずはトップページがコチラです。以前よりもかなりゴテゴテしたデザインになりました。でもかなり気に入っています。

1_20150921_degitekunote2-theme

ロゴはヘッダーに表示する形にして、ロゴ横にはカテゴリー等のメニューが表示されます。ちなみにヘッダーはスクロールしても上部に固定されます。

ヘッダーの下には人気の記事を4つ表示するようにして、人気の記事を直ぐ見れるように工夫。その下には以前はAdsenseのみでしたが、Adsenseは左にずらして右側にはランダム記事が表示されます。ちなみに個別記事になるとここの部分にタグに関連した関連記事が表示されます。

 

個別記事

記事部分のデザインはこんな感じに。記事が始まる部分から3カラムになり左端に著者情報やSNSシェアボタンが表示されるようになります。私的にこの著者情報部分にこだわってみました。ちなみにLIGブログからアイデアを拝借しました(ありがとうございます!)

2_20150921_degitekunote2-theme

 

Facebookボタンを搭載

記事下にはFacebookのいいねボタンを搭載してみました。このボタンはキャリコさんの記事を参考にしました。

3_20150921_degitekunote2-theme

コピペで OK!バイラルメディア風オリジナル SNS ボタンの設置方法

 

SIMPLESTER Ver5ならSTINGER5をここまで変身できまっせ

ちゃっかりSIMPLESTERの宣伝もしちゃいましょうというわけで、私が公開開発しているSTINGER5の子テーマに興味がある方はコチラからご覧ください。

STINGER5専用シンプルデザイン子テーマ「SIMPLESTER 」

個人的には今回のデザインはこれまでのdegitekunote2のデザインの中では1番良いかなと思っています。このデザインからも何となく目指している方向性が見えるかもしれませんが、degitekunote2はポータルサイト的な運営を目指しています。

ライター自体もいずれは私1人だけではなく、複数人体制で色んな情報を発信できるサイトにしていきたいと思っています。今回のデザインはそういった将来の運営を想定したデモンストレーション的な意味合いもあったりします。まぁそんなこと見ている方にはどうでもいいことなんですけどね。

でもデザインに関しては1pxレベルで色々と考えてデザインしていて、STINGER5にSIMPLESTER Ver5を適応してカスタマイズしています。意外や意外にカスタマイズ箇所はあまりなくて、今回のテーマ制作はシルバーウィークの土日で作ることができました。我ながらSIMPLESTERの完成度に驚いております(気持ち悪いですがガチで自画自賛してしまいました。うふ)

 

というわけで新しいテーマで運営していきますというお知らせでした。

PICK UP RELATED ARTICLE

RELATED ARTICLE

関連する記事をピックアップ! 関連記事
Powered by Google(関連コンテンツ)