デザインホームページ群馬県前橋市のWEBデザイナーHomeホームページ制作WEB運用事例お問い合わせHomeホームページ制作WEB運用事例お問い合わせStinger5カスタマイズ・サイドバーの左右を位置を変更するCSS2014.10.14いまだマイナーチェンジが続くStinger5ですが、骨子となる部分は固まってきた様子なので思い切ってStinger3からStinger5へアップデートを図ってみました。多くの方が通った道なのでしょうか魔改造を施したPC用のサイトはStinger3→Stinger5のテーマ変更でことごとくレイアウトが崩壊。Stinger5を理解して、ひとつずつ絡まった紐を解きほぐす作業ですね。いう事で今回はStinger3で一番簡単だったカスタマイズ「サイドバーの左右位置を変更する」から挑戦してみたいと思います。目次カスタマイズ再調整Stinger3でのカスタマイズは?まとめカスタマイズStinger3同様、style.cssのカスタマイズです。Stinger3はstyle.cssをエディターで開いたのちに”基本構造”で検索すると当該のコメント付近にたどり着いたのですがStinger5で試してみたところ、このコメントが検索にひっかかからない。仕方ないので“float”で検索したところ、複数検索がヒットしましたが、後ろの方にそれらしきソースがありました。Stringer3の時よりも少しCSSに手が加わっているので単純にはいかないと思いますが、まずは試しでStinger3の時の正解だった”leftとright”を入れ替えてアップロード。左右の移動には成功しましたが、右側のカラムが左に寄ってしまったようです。できた段差は20px程度ですので、CSSの320、300、0の組み合わせの調整でできそうです。再調整まずはmargin-leftの値を+20すると左カラムと右カラムの間にスペースが生まれました。margin-leftの値はいいでしょう。今度はmargin-rightの値を+20して340に設定してみる。すると今度は段差がより広がりました。margin-rightの値を320に戻した上で今度は返す刀で-20の300に設定してみると、概ねいい感じに収まりました。Stinger3でのカスタマイズは?Stinger3でのサイドバーの左右変更のカスタマイズはとっても簡単です。まとめStinger3→Stinger5へのテーマ変更の第1歩でしたが、だいぶCSSの変更が伺えました。サイトのいきなりの更新はリスクがあるので、まずはひとつづつ覚えながらですね。コピーimapyonデザインホームページ関連記事CSSStinger3カスタマイズ・記事タイトル色を変更して目立たせよう!Stinger3は、そのまま使っても十分優秀なテーマなんですが、使っているとやっぱり、黒文字だらけだとのっぺらしてるんですよね。目立たせるべきところは目立たせる。抑えるところは抑える。メリハリをつけてこそ見やすいサイトへの近道なんだと...CSSStinger3カスタマイズ「favicon.ico」を置き換えてブックマークを華やかにURLの先頭に出てくるアイコンは通称「favicon.ico」と呼ばれています。Stinger3ではこの部分はデフォルトで「rogo.ico」というファイルが読み込まれるよ...wordpressStinger3カスタマイズ「JQueryスライドショーbxSlider」を入れてみよう。トップページに動的コンテンツを入れると画面が華やいでみえますよね。Script」のスライダーを埋め込んでみたいと思います。このページのトップにも使っています。画面右上の「Dow...CSSStinger3カスタマイズ「続きを見る」「もっと見る」の背景色を変更スティンガー3を使い始めて、真っ先に思ったのは「続きを見る」の背景色が目立たなくて、デザインに埋もれているなって事でした。デフォルト色が微妙なグレーで押してる状態がぼんやりしたピンク色。配色自体の組み合わせはいいんですけど、サ...wordpress同じディレクトリ内に「index.php」と「index.html」を置いたときに.htmlファイルが優先されて表示するのを変更する方法wordpress導入で「index.php」と「index.html」を同じディレクトリに置く必要が出てきてしまったが、「.html」ファイルが優先されて表示されてしまう。ENTRY」中の記事タイトルの下に35文程度の「記事の出だし」があります。2019.11.202019.11.22管釣り・釣掘検索サイト「管理釣り場ドットコム」2019.11.20同じディレクトリ内に「index.php」と「index.html」を置いたときに.htmlファイルが優先されて表示するのを変更する方法2017.11.07Stinger5カスタマイズ・サイドバーの左右を位置を変更する2014.10.14Stinger3カスタマイズ・サイドバーの左右位置を変える2014.10.132014.10.14タイトルとURLをコピーしました。