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

関連記事

h2-i

ブログの悩みどころ見出しデザイン(h2)をすこし考えてみました。

ブログをやっていて見出しデザインというのは、結構悩みどころだと思います。 現在はとってもシンプルに

記事を読む

Stinger-minimum

Stinger3子テーマ「Stinger-minimum」のスマホテーマ対応をしました!

今回このスマホ用「Stinger-minimum」を作りました。 子テーマ「Stinger-min

記事を読む

h2

ブログの見出しデザインに困ったのでこのジェネレータを使ってみた『 CSS見出しジェネレーター | Web道』

このブログは、Stinger3というテーマをもとにゴニョゴニョ…カスタマイズしているのですが、見

記事を読む

wordpress-logo-1-550x350

記事の読了時間”およそ○○分”を表示してくれるプラグイン「estimated」

こういうプラグインあったんですね。探せばだいたい見つかるWordPressプラグイン素敵です! 読

記事を読む

piyo

子テーマ「Stinger-minimum」の全貌を備忘録+CSS3のtext-shadow

子テーマ「Stinger-minimum」をリリースしてから早いくとせ。。経ちました最近ブログにお問

記事を読む

コメントを残す

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年9月
    « 12月    
     1234
    567891011
    12131415161718
    19202122232425
    2627282930  
電子書籍ストア BookLive!
PAGE TOP ↑