07≪ 2018/08 ≫09
12345678910111213141516171819202122232425262728293031
個別記事の管理2018-08-05 (Sun)
真夏の栃木県中央公園

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

hanao-20180805.jpg

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

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

inaba-20180805.jpg

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


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

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

本日のテンプレート更新は、当方素材サイト web material *Essence のURLが変更になったので、著作権部分を修正しました。
テンプレートの作り自体は一緒です。m(__)m
Theme : 小動物全般 * Genre : ペット * Category : 我が家のペット
* Comment : (2) * Trackback : (0) |

yomogimochi1012 様へ * by aki
コメント頂き、有難うございます。
お盆ですね。何となく道路が空いてます。

お盆と言えばお墓参り。
私の実家は新潟市の寺町と言われる西堀通りに近く、大小40以上の寺院が通り沿いに有るので、何処を通って帰っても墓場の脇を歩く事になるのです。
小学生の時、毎年夏休みに町内会の肝試しが有って、あちこちのお寺(墓場)が会場(!)でしたね。(^-^;
お墓参りに行く夜は、浴衣に着替えて小さい手持ちの提灯に火を灯して、家族みんなでお寺に行ったものです。
子供の頃は何となくこのイベント感がすごく楽しみだったんですけど、今はもうそんな子供ら…見かけませんね。提灯すら昔ほど売ってないし。
暗がりに提灯を灯して歩くのが『特別』なのに…寂しいものです。

今週は富山(旦那さんの実家がある)に帰省してきます。
一人暮らしのお義母さんが大変になるので、義兄さん家族(5人)の帰省日と重ならないように調整。
その間、『うさぎのいなばさんと猫のはなちゃん』は掛かり付けの動物病院(ペットホテル)でお留守番です。
ご長寿いなばさんは病院が一番安心して預けられるので。(^-^)

まだまだ暑い日が続きますが、yomogimochi1012 様もお身体をご自愛下さいませ。m(__)m

残暑お見舞い申し上げます * by yomogimochi1012
残暑お見舞い申し上げます。

暑い中、毎日がお忙しいことでしょう。
HPに関わる様々をよくお出来になると感心します。
私など理解できない分野です。

それにしても過酷な夏ですね。
階下に見る道路工事で、外で働く方に申し訳なく思いながら、
毎日、クーラーにかかりきりです。
夏の暑さは年々、耐えられなくなっています。
寒いのは平気なのですが。

ところで、aki様のお家に飼われた
いなばさんやはなちゃんたちは、食事の心配はなく、
外敵にも守られ、暑さ寒さも忘れて快適に過ごせるから、幸せですね。

困ったちゃんであるはなちゃんの動向を記事にしてくださるので、
本当に楽しみ。
写真や記事を見ながら、笑わせていただいています。
お世話が大変でしょうが、
どうぞ楽しんで共存共栄(笑)してくださいませ。

このお盆を過ぎれば、朝夕の涼しさがやってきますし、
日中の暑さも山場を過ぎれば、少しはなどと期待しますが、
この半端ない暑さは、まだまだ続きます。
ご自愛のほどお願いします。

動物たちの写真のup、ありがとうございます。(^^♪

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

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
Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ
* Comment : (16) * Trackback : (0) |

ゆきゆず 様へ * by aki
こちらこそ初めまして♪テンプレートのご利用 、誠に有難うございます。
早速ヘッダーの画像が猫ちゃん達になっていましたね。(^^)
当方のウサギの飼育歴は20年超有るのですが、猫に関しては20年位前に実家の祖父母が飼っていた程度で、あんまり手出しが出来ず知識がそれ程有りません。(^^;
夜鳴き(声がデカくて遠吠えに近い^^;)に悩み、トイレハイに戸惑い、マーキングの臭さと後始末に翻弄され、たった一匹の猫に悪戦苦闘の日々なので、ゆきゆず様宅の猫生活がどんなにか凄い事なのかと、ホントに感嘆しきりです。
でも、なんだかんだ言って 大変ながらも楽しいですよね。
うちの旦那さんは『元野良・成猫・雄(6キロ!)』という初めての猫が可愛くて仕方ないようです。
何歳なのか不明で どれ位一緒に居られるか分からないですが、素敵な出会いを大事に、末永く暮らせたら良いなと思っております。(^^)
分からない事は 是非是非、教えて下さいませね♪

テンプレート共々、今後とも末永くお付き合い下さいます様 宜しくお願い致します。m(__)m

はじめまして * by ゆきゆず
はじめまして!
こちらのテンプレートお借りしています。
とても可愛くてお気に入りになりました。
ありがとうございます!!
にゃんこさんの記事読みました♫
まるで私を見ているみたいでした笑
我が家も同じような経緯ではや9匹。
勝手に親近感です笑
毎日暑いですがにゃんことうさちゃんと
お元気にお過ごしください。
まずはお礼まで。
ありがとうございました。

名無し 様へ * by aki
いえいえこちらこそ。(^-^;
運営、頑張って下さい。陰ながら応援しています。

No Subject * by 名無し
何度もお手数かけてすいませんでした。
おかげで多くのスマホサイズに対応できるようになりました。
本当にありがとうございます。

また何かあったらよろしくお願いします。

名無し 様へ * by aki
テンプレート共々、無事表示できるようになって良かったです。(^^)
hr は、HTML4.01で非推奨だった size属性、width属性、align属性、とnoshade属性がHTML5で廃止されました。
この度のテンプレートはHTML5ですので、今後はCSSを使って記述して下さいませ。
それと一つご提案なのですが、当方のiPhoneSEで拝見するとブラウザサイズ(ベース解像度)が568×320なので、メニュー幅340pxでは右メニューの左端が欠けて表示されてしまいます。
iPhoneの最少幅が5やSEの320pxなので、このサイズに合わせればほぼどのスマホでも欠ける事無く表示できると思います。
修正箇所を下記に記しておきますので、是非改変をご検討下さい。
(現行の表示確認が出来ます。貴殿URLを入れてみて下さい。修正後の確認にもどうぞ。http://html5-lab.jp/checker/

/* メニューボタン */
#btn2 の width: 340px; を width: 320px;
#aside_close の padding-left: 295px; を padding-left: 265px;

/* メニュー */
aside の width: 340px; を width: 320px;
     right: -340px; を right: -320px;

HTML編集枠下のscript
$(function(){$("#aside_open") から .css({overflow:"visible",height:"auto"})})});
までの間に有る
{$("aside").animate({top:"0",right:"-340px"} を $("aside").animate({top:"0",right: "-320px"}

以上です。ご面倒でなければ、です。m(__)m

この度は(説明下手なもので)何度もお手数をお掛けして 申し訳ございませんでした。
また何かご不明な点がございましたら、何なりとお声掛け下さいませ。
今後とも末永くお付き合いの程、宜しくお願い致します。
p.s. 因みに関係無いですが、私のカラオケでの十八番は『syncopation』です。踊れませんが。(^-^;

No Subject * by 名無し
返事が遅れてすいませんでした。ご説明の通りしたら出来ました。
今までhtmlで
<hr size="2" color="#000000" width="100%">
のような単純な方法でラインを引いていたので今回は出来なかったようです。

今後も何か分からないことがあったら質問すると思いますので、その時はよろしくお願いします。



名無し 様へ * by aki
hr のスタイル変更ですが、記事投稿・編集の画面で『水平線(旧画面)』若しくは『横罫線(新投稿画面)』のボタンを使っていませんか?
ボタンを使って hr を入れると、そのままテンプレートのスタイルシートに設定されている線になります。
スタイルを変える方法は幾つか有るのですが、投稿画面(HTML)で直接タグを入れる方法が一番簡単です。
ボタンは使わずに、そのまま記事を書く画面にタグを入れて下さい。
例)<hr style="border-top: 1px dashed #3366ff;margin-right:100px;">
この例では右に100pxの余白を持った1pxの青い破線が出るはずです。(プレビューでも確認できます。)
幾つかスタイルシートに設定を作っておいて、その都度選んで hr を挿入したい場合は、テンプレートのスタイルシート編集枠内(できれば hr の下辺りに入れるとPCもモバイルも反映します)に数種類作っておいて、

hr.style1{
border-top: 1px solid #9900ff; /* 1px 直線 紫 */
}
hr.style2 {
border-top: 1px dashed #ff6600; /* 1px 破線 オレンジ */
}
hr.style3{
border-top: 1px dotted #ff69b4; /* 1px 点線 ピンク */
}

記事を書く際に入力画面(HTML)で
<hr class="style1">
とだけ入れれば、その部分に 1pxのsolidな紫線が表示されます。(プレビュー確認)
一度試してみて頂けますか?

No Subject * by 名無し
『✖』印は余白部分に移動しました。ありがとうございます。

それと、ライン(hr)の件ですが、cssの
h4{
margin:0 10px;
font-size:1.0em;
font-weight:normal;
color:#15adb3;
border-bottom:1px dotted #999;
}

の下にある
hr{
margin:10px 0;
border-top:dashed 1px #f0bdbd;
height:1px;
}

が影響してか、全てのラインがdashedになり、ここをsolidに変えると全てのラインがsolidになり、記事書き込み欄のhtml編集では線の太さも色も調整できません。

私の知識不足のせいだと思いますが、どうか教えていただけたらありがたいです。

名無し 様へ * by aki
こちらこそ、何度もスミマセン。m(__)m
×印の位置は前出のresで書いた箇所、CSSの /* メニューボタン */
#btn1#btn2
top:180px; を、5px(位で良いと思う^^;微調が必要ならそのように修正を。)に書き換えて下さい。

…レスポンシブチェッカー(http://html5-lab.jp/checker/)やブラウザのデベロッパーツールを使って確認しても、実際は広告枠等が入ったりするため、実機(iOSとAndroid)での確認をしてみると異なる表示になったりするので困りものです。(^-^;
色々とお手数をお掛けして申し訳ございません。

それとhr等の調整ですが、直接記事内にスタイルを指定する事ができます。
新規投稿(若しくは過去記事の編集)をHTML表示ができる画面にして、タグに直接記述します。
例)<hr style="border-top: 1px dashed #ff33cc;margin-right:100px;">

テンプレートのCSS以外のスタイルが欲しい場合は直接投稿・編集画面をHTMLにして記述するのが早いです。
的外れな回答?でしたらご指摘下さい。m(__)m

No Subject * by 名無し
何度もありがとうございます。

修正しましたところ閉じるための『✖』印が下がってしまいます。
下がった『✖』印を最上部の余白部分に戻すにはどうすればいいのか教えていただけるとありがたいです。

それと、これは別件ですが、ライン(hr)やテーブルラインを記事記入欄で調整することは出来ないのでしょうか?

個別記事の管理2018-07-06 (Fri)
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 です。)
Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ
* Comment : (0) * Trackback : (0) |
個別記事の管理2018-07-04 (Wed)
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が効かないそうです。
Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ
* Comment : (0) * Trackback : (0) |
個別記事の管理2018-07-02 (Mon)
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色)
Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ
* Comment : (0) * Trackback : (0) |
個別記事の管理2018-06-30 (Sat)
レスポンシブテンプレート、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
不具合が有った時のために複製を作成して作業すると安心です。

al_responsive 2c-l(2カラム左)


<!-- トップページ ここから-->
<!--topentry-->
<div class="con1">
<section>
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="left">
<a href="<%topentry_link>"><%topentry_image_w300></a>
</div>
<div class="right">

<div class="text_overflow">
<%topentry_description>
</div>
<p class="right-txt clearLeft"><a href="<%topentry_link>">続きを読む</a></p>

</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con1_body <!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->"><%topentry_body>
<!--more_link-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">ReadMore</a>
<noscript>
<a href="<%topentry_link>#more">ReadMore</a>
</noscript>

<div class="sidehide" id="more<%topentry_no>">
<hr>
<p><%topentry_more></p>
<p><a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more--><a name="more" id="more"></a><br>
<%topentry_more><!--/more-->

</div>
<div class="entry_state">



al_responsive 2c-r(2カラム右)

<!-- トップページ ここから-->
<!--topentry-->
<div class="con1">
<section>
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="left">
<a href="<%topentry_link>"><%topentry_image_w300></a>
</div>
<div class="right">

<div class="text_overflow">
<%topentry_description>
</div>
<p class="right-txt clearLeft"><a href="<%topentry_link>">続きを読む</a></p>

</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con1_body <!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->"><%topentry_body>
<!--more_link-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">ReadMore</a>
<noscript>
<a href="<%topentry_link>#more">ReadMore</a>
</noscript>

<div class="sidehide" id="more<%topentry_no>">
<hr>
<p><%topentry_more></p>
<p><a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more--><a name="more" id="more"></a><br>
<%topentry_more><!--/more-->

</div>
<div class="entry_state">



al_responsive 3c(3カラム)

<!-- トップページ ここから-->
<!--topentry-->
<div class="con2">
<section>
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="left">
<a href="<%topentry_link>"><%topentry_image_w300></a>
</div>
<div class="right">

<div class="text_overflow">
<%topentry_description>
</div>
<p class="right-txt clearLeft"><a href="<%topentry_link>">続きを読む</a></p>

</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con2_body <!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->"><%topentry_body>
<!--more_link-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">ReadMore</a>
<noscript>
<a href="<%topentry_link>#more">ReadMore</a>
</noscript>

<div class="sidehide" id="more<%topentry_no>">
<hr>
<p><%topentry_more></p>
<p><a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more--><a name="more" id="more"></a><br>
<%topentry_more><!--/more-->

</div>
<div class="entry_state">

Return

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ
* Comment : (2) * Trackback : (0) |

みやちゃん様へ * by aki
みやちゃん様
数あるテンプレートの中より 弊テンプレートのDL、誠に有難うございます。
トップページの要約表示を全文表示に切り替える方法の記事が少し間違っておりましたので、先程修正していたところです。

ご質問の件、大変失礼ながらお伺い致しますが、貴殿の行ったカスタマイズはどこまでですか?記事に有ったHTMLソースをコピペされましたか?
もしそのカスタマイズ後に表示がおかしくなったようであれば、改めて修正したHTMLをペーストし直してみて下さい。
ただ、その作業後でも表示が直らないのであれば、拝見させて頂きたいので 貴殿のブログURLを教えて頂けませんか?

大変お手数なのですが、何卒宜しくお願い致します。m(__)m

記事本文の表記に関してカスタマイズ * by みやちゃん
テンプレート製作ご苦労様です。

ブログのテンプレートを変更しようと探した所
al_responsive2c-rのデザインがとても気に入りました。

そこでテンプレートを少々カスタマイズしようとしましたが、
私のスキルでは無理なのでコメントしました。


現状記事を書くで「本文の編集・追記の編集」の2段で記事を書いた場合、
「本文の編集」の途中までしか表示されません。

それを「本文の編集」分を全て表記してさせたいので
HTML及びCSSのカスタマイズを御教授お願いできないでしょうか?


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

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

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

先ず、上記2点の設定をお願い致します。m(__)m
Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ
* Comment : (0) * Trackback : (0) |