フォト

プロフィール

お問い合わせ・ご相談

  • お問い合わせ・ご相談のお申し込みにつきましてはこちらのページをご覧ください。

ブログランキング

ココログ

2018年6月12日 (火)

レスポンシブデザインへの変更@ココログ-その1-

以前の記事に書きましたが,ブログをレスポンシブデザインに変更しました。
変更にあたって,いくつか悩むところもあったので,備忘も兼ねて,手順を公開しておきます。
(※ プランはココログプロを使用しています。)

ビューポートの設定

まずは,設定→「ブログのサブタイトル」に以下のとおり記述します。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0">

スタイルシートの記述

レイアウトは,ココログのテンプレートのうち「両サイドバー付」を使っていましたが,レスポンシブデザインに変更するにあたって,

・ブレイクポイントは480px,800pxで区切る。
・カラムの並び順を記事→右サイドバー→左サイドバーとして,縦並びにする。
・右サイドバーの並び順を,最近の記事→カテゴリー→バックナンバーとして,カレンダーを非表示にする。
・バナー画像はオリジナルのものを用いる。

とすることにしました。

これらを踏まえたスタイルシートが以下のものになります。

@media screen and (max-width: 480px) {
#container {
font-size: 105%;
width: auto;
}

#header {

width: auto;
}

#header-inner {

width: auto;
}

#banner {

background: url(http://kmrysyk.cocolog-nifty.com/banner-m1.png) no-repeat top left;
background-size: auto;
width: auto;
height: auto;
min-height: 120px;
}

#banner-inner {

width: auto;
padding: 28px 0 0 90px;
}

#banner-header {

font-size: 18px;
width: auto;
}

#banner-description {

font-size: 13px;
width: auto;
}

.entry-header,

.entry-header a {
font-size: 17px;
width: auto;
}

.layout-three-column #pagebody {

width: auto;
}

.layout-three-column #pagebody-inner {

width: auto;
display: flex;
flex-direction: column;
}

.layout-three-column #alpha {

order: 3;
width: auto;
}

.layout-three-column #gamma {

order: 2;
width: auto;
}

.layout-three-column #beta {

order: 1;
width: auto;
}

.layout-three-column #beta-inner {

padding: 0% 4% 0% 4%;
width: auto;
}

.layout-three-column #gamma-inner {

width: auto;
display: flex;                  
flex-direction: column;
}

.layout-three-column #recent-entries {

order: -2;
width: auto;
}

.layout-three-column #archive-category {

order: -1;
width: auto;
}

.module-header {

font-size: 1em;
width: auto;
}

.module .module-header a,

.module-header .edit a {
font-size: 1em;
width: auto;
}

.module-content {

font-size: 1em;
width: auto;
}

.module-calendar {

display: none;
width: auto;
}

#footer {

width: auto;
}

#footer-inner {

width: auto;
}

}


@media screen and (min-width: 481px) and (max-width: 800px) {

#container {
font-size: 125%;
width: auto;
}

#header {

width: auto;
}

#header-inner {

width: auto;
}

#banner {

background: url(http://kmrysyk.cocolog-nifty.com/banner.png) no-repeat top left;
background-size: container;
width: auto;
height: auto;
min-height: 170px;
}

#banner-inner {

padding: 55px 0 60px 195px;
width: auto;
}

#banner-header {

font-size: 24px;
width: auto;
}

#banner-description {

width: auto;
}

.layout-three-column #pagebody {

width: auto;
}

.layout-three-column #pagebody-inner {

width: auto;
display: flex;         
flex-direction: column;
}

.layout-three-column #alpha {

order: 3;
width: auto;
}

.layout-three-column #gamma {

order: 2;
width: auto;
}

.layout-three-column #beta {

order: 1;
width: auto;
}

.layout-three-column #beta-inner {

padding: 0% 4% 0% 4%;
}

.layout-three-column #gamma-inner {

width: auto;
display: flex;                  
flex-direction: column;
}

.layout-three-column #recent-entries {

order: -2;
}

.layout-three-column #archive-category {

order: -1;
}

.module-header {

font-size: 1em;
}

.module .module-header a,

.module-header .edit a {
font-size: 1em;
}

.module-content {

font-size: 1em;
}

.module-calendar {

display: none;
}

#footer {

width: auto;
}

#footer-inner {

width: auto;
}

}

2018年5月 1日 (火)

サブカテゴリーの設置方法@ココログ

ココログの場合,サブカテゴリーを設置する機能は公式には実装されておらず,以下の方法も,あくまで見た目がサブカテゴリーを設置したように見えるだけですが,備忘も兼ねて公開しておきます。

まず,カスタムCSSに以下のとおり記述します。

.module-inner #sub {
padding-left:1em;
}

.module-inner #sub2 {
padding-left:2em;
}

.module-inner #sub3 {
padding-left:3em;
}

そして,カテゴリーを新しく設ける際に,

<span id="sub">カテゴリー名①</span>
<span id="sub2">カテゴリー名②</span>
<span id="sub3">カテゴリー名③</span>


と記述します。
これで,カテゴリー名①が1字下げ,カテゴリー名②が2字下げ,カテゴリー名③が3字下げで表示されるようになります。

なお,カテゴリーの並び順については, カテゴリーを新たに設ける際に,

<!-- 01 --><span id="sub">カテゴリー名①</span>
<!-- 02 --><span id="sub2">カテゴリー名②</span>
<!-- 03 --><span id="sub3">カテゴリー名③</span>


等と記述することで自由に変更可能です。

2018年3月21日 (水)

ブログデザイン変更(レスポンシブ化)@ココログ

これまで,スマホからのアクセスについては,ココログのデフォルトのスマホ用サイトにリダイレクトされていたのですが,このリダイレクトを外し,レスポンシブデザインに変更しました。

また,ブログ全体のレスポンシブ化にあわせて,

・トップページの記事数を減らす
・カテゴリの表示にサブカテゴリーを加える
・各記事下のボタンもレスポンシブ化する

などの変更を加えました。

テキストメインのブログで,かつ,長文の記事もあるため,ココログのデフォルトのスマホ用サイトでは読みづらいのが気になっていましたが,ようやく解消できました。

2018年2月15日 (木)

ブログデザイン変更@ココログ

各記事の下に、

・Twiitter
・Facebook
・Google+
・はてなブックマーク
・mixi

のボタンを設置しました。

気になる記事がございましたら、シェア等していただければ幸いです。

2017年1月31日 (火)

ブログデザイン変更@ココログ

デザイン変更といっても,全体の幅と記事の表示幅を変更しただけなのですが,
全体を1080pxに,記事の表示幅を600pxに変更しました。

テキストメインのブログですので,なるべく読みやすいデザインになるよう試行錯誤しているところですが,しばらくはこのデザインでいこうと思います。