暑中お見舞い申し上げます m(__)m

真夏の栃木県中央公園

盛夏の候、例年にない暑さが到来しております。
毎日こんな暑さじゃあバテバテなのは動物も一緒。ですが…猫のはなちゃんは暑くてもお気に入りの場所で外を見たがります。
窓が目隠しタイプのガラスなので そのままでは見えない。。故に、
「んなおぉ~~ん」デカくて野太い声で「窓あけれ~!」と人間を呼ぶ。

hanao-20180805.jpg

外を通る人を見ているうちに~~~すやすや・・
熱風入って来て部屋暑いんですけど。
なので、寝てる間に窓閉めます。^^;

ウサギのいなばさんは、先日届いたam〇zonの空段ボールがお気に入り。

inaba-20180805.jpg

筒状にしてるのがミソ。暑いからね~。
時々トイレハイで大騒ぎしているはなちゃんに、突撃されて(箱が、f(^-^;)吹っ飛ばされたり壊されたりする事も。


この酷暑の中、旦那さんの実家(富山)2FのAC、うちの実家(新潟)1FのAC が壊れた。
旦那さんの実家に帰省するのが来週…修理も新品も間に合いませんって。
帰省時 寝るのが2Fなんだけど、来週少しは涼しいと良いんだけどなぁ。無理かなぁ。
うちの実家へは9月に帰省。こっちは注文済み。
まぁ1F暑いけど、2FのACの冷気を下に行くようにして何とか暑さを凌いでいる。

でもね、涼しい場所が有るだけ幸せなんだよ

本日のテンプレート更新は、当方素材サイト web material *Essence のURLが変更になったので、著作権部分を修正しました。
テンプレートの作り自体は一緒です。m(__)m

テーマ : 小動物全般 - ジャンル : ペット

2018/08/05 21:29 | 我が家のペットComment(2)Trackback(0)  Top

レスポンシブテンプレートの使い方(CSS変更・その他)

その他の箇所のカスタマイズ(^-^;です。
暗色系・シンプル系等、全く異なったイメージを作る際に是非変更してみて下さい。

1) 薄く透過されている大枠の背景
[al_responsive〇c]のスタイルシート編集枠をほんの少し下げた所に有る
#wrapper{ という部分の背景色を変更します。

rgba-w.jpg何も加工が無ければ
←こんな感じです。(クリックで大きく表示)
#wrapper の下記の部分が透過背景色です。
background-color:rgba(255,255,255,0.7);
これは『白の透過度70%』

RGBAとは、ディスプレイ画面で色を表現するために用いられる、red・green・blueにalphaが加わったものです。alphaは色の透明度です。
RGBAカラーモデルで色を指定する際は、今まで16進数カラーコード(#339966等)を指定していた箇所に、カンマ(,)で区切った3つの数値でRGBの色を指定した後に、数値で透明度を指定します。
rgba(R赤,G緑,B青,Aアルファ値);
RGBの色は0-255、または0%-100%で指定し、透明度は0(完全に透明)~1(完全に不透明)の数値で指定します。
(rgbでは255,255,255, は白、0,0,0, は黒になります。)
この #wrapper の background-color: のrgba値を変更すると

rgba-g.jpgカラーコード#9ACD32透過度0.3(30%)のRGBAカラーモデル、
rgba(154,205,50,0.3)
←ではこんな感じです。(クリックで大きく表示)

rgba-v.jpgカラーコード#000080透過度0.2(20%)のRGBAカラーモデル、
rgba(0,0,128,0.2)
←ではこんな感じです。(クリックで大きく表示)

カラーコード、カラーネームについては↓コチラ
web material *Essence(当方素材サイト) ColorCode ColorName
RGBAカラーモデル変換ツールは↓コチラをご利用下さい。
web material *Essence RGBA color model

2) 丸みを帯びた角を直角に戻す。
記事を取り囲んでいる枠や、タイトルの背景などの角に丸みを持たせております。
スタイルシート枠内上から
〈セレクタ名: blockquote, h2, .topimg, .menu_title, .menu3, .menu3_title, .con2(3c), .con1(2c), .entry_state, .trackback_waku, #pagenavi a,#pagenavi span, #pagetop,#pagebottom, header, #copyright
に使用している、
b-radius.jpg-moz-border-radius:〇px;
-webkit-border-radius:〇px;
border-radius:〇px;

を削除すると角の丸みが無くなります。
←(クリックで大きく表示)

詳しくはこちらへ→MDN web docs


3) 記事掲載時にYouTube等の動画をレスポンシブで埋め込む。
YouTubeの埋め込みしたい動画の下にある共有をクリックし、ウィンドウが表示されたら埋め込むをクリックします。
埋め込みコードが表示されるのでオプションを設定しコピーをクリックします。
コピーしたコードをブログなどにペーストして完了です。が、レスポンシブで表示するためにもう一つ。
下記のようなスタイルシートを用意してありますので、動画掲載時にご利用下さい。

/* 動画サイズレスポンシブ用(iframeをdiv class="player"で括る) */
.player{
position:relative;
height:0;
padding-bottom:56.25%; /* アスペクト比16:9の場合 */
overflow: hidden;
}


スタイルシート内にも書いてありますが、埋め込みコードを div class="player" で括ると、モバイル端末でも表示サイズが可変するようになります。
<div class="player"><frame width="560" height="315" src="//www.youtube-xxxxxx" frameborder="0" allowfullscreen></iframe></div>
YouTubeの記事掲載時はこんな感じに。

以上、[al_responsive〇c]のカスタマイズや説明が必要な箇所を掲載致しました。
その他ご不明な点、不備・不具合等お気付きの点がございましたら、メールやコメントなどでお教え下さいませ。m(__)m

テーマ : 共有テンプレート - ジャンル : ブログ

2018/07/08 23:35 | カスタマイズComment(16)Trackback(0)  Top

レスポンシブテンプレートの使い方(トップ画像変更)

rose-t.jpgトップ画像の変更方法です。
背景画像を横幅100%でレスポンシブ対応させる方法は幾つか有りますが、パーセント指定と 背景画像変更② でのbackground-size:contein; を使った方法です。
background-size:cover; では、画像の幅と高さの比率を固定して領域を覆うように表示されますが、はみ出した部分は表示されません。
background-size:contain; も画像の幅と高さの比率を固定しますが、表示領域が変更された場合でも画像が全て表示されます。

テンプレートの管理画面下段の [ al_responsive〇c ] のスタイルシート編集枠内
スクロールすると1/4手前位に下記のような箇所が有ります。

/* トップ画像 */
.topimg{
height:0;
padding-top:21.64%; /* 表示したい画像の比率(縦サイズ÷横サイズ×100) */
margin:0 10px;
background:url('アップロードした画像のURL') no-repeat;
background-size:contain;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}

高さを0に指定してpaddingで高さを出し、背景の表示領域を確保します。
paddingの高さはパーセント指定で、
表示画像の高さ(縦サイズ)÷表示画像の幅(横サイズ)×100
という計算式で求めます。
(青文字の部分は表示したい画像のアップロード先URLを入れて下さい。)

パーセント指定をすることでブラウザのサイズに合わせて高さが変わるようになり、background-size:contain; で表示領域に画像が全て表示されるようになります。
元画像のサイズによっては、高さ(縦)が高くて記事部分が随分と下がってしまったり、幅(横)が足りなくて画像が引き延ばされて画質が荒くなることが有りますので、色々試してみて落ち着くサイズを探してみて下さい。m(__)m
(因みにテンプレートで使用している画像のサイズは 670px×145px です。)

テーマ : 共有テンプレート - ジャンル : ブログ

2018/07/06 23:06 | カスタマイズComment(0)Trackback(0)  Top

レスポンシブテンプレートの使い方(背景画像変更 ② )

rose-sm.jpg引き続き、背景画像の変更方法です。
大きい画像を背景に、ディスプレイサイズに合わせて表示するようにします。
←使用する画像はこちら。表示位置が分かり易いよう見本を表示するBoxに背景色(#e2eccb;)を付けています。

背景画像のサイズを調整するプロパティは、背景(background)に
background-size: サイズの値;
を使います。
指定できる値は下記のとおりです。

background-size:auto;

background-size:auto;
background-size :auto; 縦横比:画像サイズは自動算出されるため、基本そのままのサイズです。


background-size:contain;

background-size:contain;
background-size: contain; 縦横比:そのまま 表示領域に対して、元画像が全て収まるように調整されます。


background-size:cover;

background-size:cover;
background-size: cover; 縦横比:そのまま 表示領域一杯に覆うサイズにして、表示領域をはみ出した部分は表示されません。


background-size:px;

background-size:px;
background-size: px; 縦横:指定したサイズ(px)で大きさを調整します。(見本は120px×120px)


background-size:%;

background-size:%;
background-size: %; 縦横:表示領域に対して指定した割合で表示します。(見本は50%×50%) Boxのサイズが200px×150pxなので、 背景画像は表示領域の50%である100px×75pxで表示されます。

詳しくはこちらへ→MDN web docs


前置きがとっても長くなりましたが^^;、上記の事を踏まえて背景を変更します。
変更するCSSは前記事と同じです。
body::before{
background-image:url(アップロードした画像のURL); /* --背景画像を変更-- */
background-color:#ffffff; /* --画像非表示時のための背景色-- */
background-repeat:no-repeat; /* --no-repeatに変更-- */
background-size:cover; /* --プロパティ追加-- */
background-position:center center; /* --中央寄せなら追加-- */
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

赤文字の部分を変更して下さい。m(__)m

上記のスタイルシート
background-image:url(アップロードした画像のURL); /* --背景画像を変更-- */
background-color:#ffffff; /* --画像非表示時のための背景色-- */
background-repeat:no-repeat; /* --no-repeatに変更-- */
background-size:cover; /* --プロパティ追加-- */
background-position:center center; /* --中央寄せなら追加-- */

5行分をまとめたbackgroundショートハンドだったらこんな感じ↓
background:url(アップロードした画像のURL) #fff no-repeat center center;
background-size:cover;

の2行か、全部まとめて
background:url(アップロードした画像のURL) #fff no-repeat center center /cover;
で、良いかと。ただ、1行表記の場合で気を付けなければいけないのが、
background-sizeは、background-positionの指定の後に、「/」で区切って指定しなければならない。
という事。でないと background-sizeが効かないそうです。

テーマ : 共有テンプレート - ジャンル : ブログ

2018/07/04 04:49 | カスタマイズComment(0)Trackback(0)  Top

レスポンシブテンプレートの使い方(背景画像変更 ① )

al-mihon1.jpg今時とってもLegacyな テンプレートですが、その分『見掛け』を自分流にカスタマイズ出来るように、CSSも(多分)分かり易く作っております。
可愛い愛犬・愛猫や、旅先で撮った素敵な画像等々…お好きなように飾って下さい。(^-^)


上の画像は、クリックすると当ブログでの見本表示になりますので是非ご確認を。
詳しくはこの記事の次
『レスポンシブテンプレートの使い方(背景画像変更 ② )』でご説明致します。m(__)m (ちょっと派手めですが。^^;)



先ずは基本形。現状テンプレートの簡単背景変更から。
テンプレートの管理画面下段の [ al_responsive〇c ] のスタイルシート編集枠内
スクロールするとすぐ下に下記のような箇所が有ります。

body::before{
background-image:url(https://blog-imgs-115.fc2.com/s/o/r/sorauta1/hahana.png); /* --透過背景画像-- */
background-color:#e2eccb; /* --透過背景画像の背景色-- */
background-repeat:repeat;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

赤文字の部分が今現在の花柄背景画像です。
hahana.png←背景画像
この画像は透過PNGを使用しているので、青い文字のようなカラーコードを指定すると背景色が変わります。
b-img_b.pngb-img_g.pngb-img_o.pngb-img_p.pngb-img_y.png
上記に使っている背景色のカラーコードは
background-color:#d1eafc; (ブルー)
         #d3e1c0; (グリーン)
         #ffddb0; (オレンジ)
         #ffd8d8; (ピンク)
         #eeebbb; (イエロー)
になっており、青い文字部分のカラーコードを変えるだけで背景のイメージも随分変わります。
また、ご自身で用意した背景画像も、『ファイルアップロード』でアップロードした画像のURLを赤い文字の部分に入れれば変更する事ができます。
(上記の場合は敷き詰めるタイプのリピート画像です。)

カラーコード、カラーネームの参考は下記をどうぞ。m(__)m
カラーコード表(216色) カラーネーム表(147色)

テーマ : 共有テンプレート - ジャンル : ブログ

2018/07/02 15:18 | カスタマイズComment(0)Trackback(0)  Top

レスポンシブテンプレートの使い方(エントリー全文表示)

レスポンシブテンプレート、al_responsive 3c(3カラム), 2cr(2カラム右), 2cl (2カラム左)の記事表示の変更方法をです。
共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の要約表示になっています。
これを従来の全文表示に変更する方法です。

◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[al_responsive〇c]のHTML編集枠を開いて「トップページここから」という所までスクロールし、下画像のように変更して更新。

上画像の赤い部分を削除して下画像のように変更・更新します。
(クリックで大きく表示)

hyouji1.png

下のように変更後更新ボタンを押す。

hyouji2.png

更新が出来ましたらした画像のようになります。

hyouji3.pnghyouji4.png
(クリックで大きく表示)


HTMLは下記です。コピー&ペーストする場合は

<!-- トップページ ここから--> ~ <div class="entry_state">

までを貼り換えて下さい。

戻したい時はこの逆を行って下さい。m(__)m
不具合が有った時のために複製を作成して作業すると安心です。

続きを読む »


テーマ : 共有テンプレート - ジャンル : ブログ

2018/06/30 12:53 | カスタマイズComment(2)Trackback(0)  Top

レスポンシブテンプレートの使い方(設定)

従来のオーソドックスなデザインですが、表示サイズ可変対応のレスポンシブテンプレートです。
al_responsive 3c(3カラム), 2cr(2カラム右), 2cl (2カラム左)が共有化されましたので、レスポンシブテンプレートの使い方を簡単に説明致します。

1) レスポンシブテンプレートはパソコン・スマホ共通なので設定を変更する。
PCやモバイル端末等の閲覧で、画面サイズが変化するレスポンシブデザインテンプレートを使う場合、初めに「スマートフォン版の表示設定」を変更して下さい。
管理画面左の『環境設定』 → 『ブログの設定』 →『スマートフォン版の表示設定』を無効にして更新。

2) 検索バーはレスポンシブ未対応なので非表示にする。
FC2ブログ上部に有る検索バーはレスポンシブ未対応なので、画面の表示サイズによっては途切れて表示されてしまうため表示を無効にします。
管理画面左の『環境設定』 → 『ブログの設定』 →『検索バーの設定』で[利用しない]を選択して『更新』。

先ず、上記2点の設定をお願い致します。m(__)m

テーマ : 共有テンプレート - ジャンル : ブログ

2018/06/30 03:13 | カスタマイズComment(0)Trackback(0)  Top

 | Blog Top |  Next»»