Stingerを3カラムにしてみたよ!「DeepJaggy-threeColumn」リリース!【Stingerカスタマイズ】

カテゴリー:WordPress    |    タグ:

Stingerを3カラムにしてみたよ!「DeepJaggy-threeColumn」リリース!【Stingerカスタマイズ】

表題のとおりです!
3カラム需要あるかなぁどうかなぁと思いましたが、作りましたので良かったら使ってくださいねw

informationこの記事でのカスタマイズバージョン:stinger3ver20140327

3カラム「DeepJaggy-threeColumn」

図は左側にカラムが追加されたものですが、今回メインとサイドの間にカラムを追加したものと2つ作りました。
デザイン変更はPC版のみです!

モバイル端末では今回追加したカラムは表示されません。

出来上がりの図

3column

「DeepJaggy-threeColumn」デモ

真ん中にカラムを追加したもの

DeepJaggy-threeColumn_center

左側にカラムを追加したもの

DeepJaggy-threeColumn_left

追加した機能

機能というほどでもないですが、以下のようなものを使えるようしました。

  • ウィジェット
  • それぞれのカラムにはウィジェットが使えるようにしてあります。

  • アイコンフォント
  • FontAwesomeのアイコンフォントが使えます。

※アイコンフォントの使い方についてはここでは割愛させていただきます。

追記-----導入方法書きました。

削除したもの

横幅を1140pxに広げたので、あまり大きくない画面だとメインに割り込んでくるので、横についてくる各SNSのシェアボタンをまるごとごっそりなくしました。

「Jaggy-threeColumn」ダウンロード

今回、3カラムにするにあたり元のソースを弄っております。
Stingerをベースとして使用させて頂いておりますが、Stinger本来の力が100%発揮しなくかも知れません。

ご利用される場合はその点だけご留意ください。


真ん中にカラムを追加したもの

DeepJaggy-threeColumn_center.zip

左側にカラムを追加したもの

DeepJaggy-threeColumn_left.zip

ご利用方法

今回は、子テーマではないのでダウンロードしたらそのまま通常どおりアップロードして頂くだけです。
※CSSは元のものを変更しております。

さいごに

なんだか慌ててダダダーッツとリリースしました!
スマホ対応や子テーマデザインにするというところは全く手をつけていません。今回はとりあえずPC版のみで先行リリース。

もともとブログを3カラムにするというのは考えていないというか、最近のはやりでいえば1カラムだろ!みたいなところもあったので、どうかなぁだったので需要あればスマホデザインも着手してみたいと思っています。

何かお気づきの点などがありましたら、お知らせ頂けるとありがたいです。


これ読んでおいてね
style.cssというファイルに思うことを少しだけ書きました。
ご利用の際に一読頂けるとありがたいです。

ADVERTISEMENT

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

published:2014/07/19    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

wordpress_stickers_everywhere

アイキャッチ(サムネイル)画像の大きさを変更する【Stinger3カスタマイズ】

いくつかお問い合わせを頂いたので、アイキャッチカスタマイズについてこの記事でお返事とさせて頂こうと思

記事を読む

Stinger-minimum

子テーマ"Stinger-minimum"を新しくなった「STINGER5」用に作りなおしました。

最近新しくリリースされた「STINGER5」html5でレスポンシブにされており内容も充実して更にパ

記事を読む

Wordpress1

【WordPress】ウィジェットのタグクラウドをプラグインを使わずにカスタマイズする方法

タグクラウドをウィジェットを使って表示させたのですが、ウィジェット側では文字の大きさや並び順等を操作

記事を読む

Adventskalender

様々な想いを込めて。わたしが思う・考えるStiger3のデザイン  #Stinger-WP

皆さん!遂に2013年のAdvent Calendarが始まりました!この記事は#Stinger A

記事を読む

memo

【Stinger3カスタマイズ】バージョンアップしたのでこのブログで変更したところを書き留めておく備忘録 #3

つい最近デザインを変更してみたのですが、どうにもノリノリでかけなくなってしまったのでまたデザインを元

記事を読む

コメントを残す

2件のコメント

  • satomi
    2015年10月9日 6:46 PM

    初めてコメントを書かせていただきます。3カラムのテンプレートを利用したいとおもい記事中にブログランキングのバナーを設置したらなぜか青い枠に囲まれてしまいます。これをなくす方法はあるでしょうか。何分知識があまり無いのでよろしくお願いします。

  • niji_sansan
    2015年10月15日 12:15 AM

    satomiさん

    はじめまして。
    返信が遅くなりすみません。

    早速本題にはいります。
    バナーの青い枠が表示させないようにするには

    CSSファイルの416行目あたりの
    .kizi img{padding:10px; background-color: #EDF2FA; border: 1px solid #ddd;}

    こちらを消して再度サーバにアップしてください。
    この方法が簡単にできる方法です。

    ただこちらを消去すると、本文中の画像の枠も消えてしまいますので
    消えてほしくない場合は、CSSにそのように記載する方法になります。

    コメントありがとうございました。
    またなにかありましたらお気軽にコメントください。

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2016年8月
    « 12月    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
電子書籍ストア BookLive!
PAGE TOP ↑