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

関連記事

トップページキャプチャ

Stinger3の子テーマ「Stinger-minimum」を2/11リリースします。【予告】

タイトルで言い切ってしまっていますが、近日中にStinger3の子テーマ「Stinger-minim

記事を読む

wordpress_stickers_everywhere

【WordPress】とっても簡単に目次を入れてくれるプラグイン「Table of Contents Plus」

このブログでも使用しているこのプラグイン。いろいろなところでお目にかかることがあり、面白そうだなと思

記事を読む

Wordpress1

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

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

記事を読む

neko

過去のあの日あの時書いた記事を表示させるプラグイン「Remember Old Post Widget」

なんだか面白いなと思ったので導入してみたかったのですが、圧倒的な記事の少なさ。 なので、いつかこの

記事を読む

Wordpress1

WordPressでカテゴリーごとにデザインを変更する方法【Stingerカスタマイズ】

表題についてお問い合わせを頂きましたので、ブログにてご返答させて頂こうと思います。 今回は、エント

記事を読む

コメントを残す

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

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