マキバ号のブログ一覧

今回は国旗で国ごとのアクセスがわかるフラッグカウンターの設置をしてみましょう(^o^)/




まず無料のFLAG COUNTERをゲットしましょう

http://www.flagcounter.com




サイトにアクセスすると上の画面が出るので
まず基本になる設定をしていきます。

画像にあるShow on your siteのFlagMapは世界地図に国旗が出るだけなので、これは説明いたしません

設定を変更して行くとプレビュー画面も変わるのでお好みの表示にしましょう(^o^)/
②④⑤はお好みで、あとの設定は画像と同じでいいです
それ以外は飛ばして次の画像に行きましょう（笑）


①Show on your siteの
Top Countriesを選択

②Maximum Flags to Show
表示される国旗の数を選択
画面では54になってますが最大250まで表示します


③Columns of Flags
表示される国旗の列数を選択
3がベストです

④Label on Top of Counter
一番上に表示する文字を入れます
使えない文字を入力すると警告されます
customを選択して文字を入力
画面ではek access

⑤フラッグカウンターの色を決めましょう
Background Color # 背景の色
Text Color # 文字の色
Border Color # 枠の色

⑥Show Flag Labels　
国の略称を数字の左側に表示

⑦Show Pageview Count
ページビュー数を表示

⑧Show Visitors As
Numberは国のアクセス数を表示 他は%表示

⑨Flag Size
国旗の大きさ設定
Smallがベスト

⑩お好みに設定できたらGET YOUR FLAG COUNTERをタップ




GET YOUR FLAG COUNTERをタップするとこの画面になります
Skipでもコードはでますが
アドレスを打ち込んでContinueをタップして登録すると
管理画面URLとパスワードが発行され

Regenerate Flag Counter データを引継ぎカウンター再生
Privacy Mode データを他人には見れないように
Repeat Visitor Preference 観覧者のカウント方法の設定
Reset Flag Counter カウンターのリセット

以上の事が出来るようになります。
設定の変更などができるのでアドレスを登録された方がいいと思います。

コードが表示されたら





⭕️ここは重要です
上の画面の青いアンダーライン部分のURLをコピーして
下のプログラムの【http://############】の部分と入れ替えます
下のプログラムをコピーしてメモ帳に貼り付けて作業するといいでしょう。

width:280px;
margin:0 auto;
height:500px;
background-image:url('http://############');
background-repeat:no-repeat;
background-position:50% 30px;

上の画面のURLの最後の部分は【flags_1/percent_0】となってますが
%表示にしない場合は【flags_1】だけでも構いません




マイページからスタイルシート→詳細編集→サイドメニュー を順番にタップ
同じ画面で下にスクロールします




⭕️ 何してる？フッター部分は

width:260px;
margin:0 auto;
height:5px;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/nanisiterufooter.gif) no-repeat top center;

と記述してあると思いますが全て消して
前にメモ帳で作っておいた

width:280px;
margin:0 auto;
height:500px;
background-image:url('http://############');
background-repeat:no-repeat;
background-position:50% 30px;

に書き換えます

⭕️ height:500px;の500pxは、下の画像のaの値になります
国旗が増えてきたらここを増やして文字と重ならないよう調整します。
最初は200pxぐらいでいいと思います。


「何してる？」に一度も書き込みをした事がないとカウンターは表示されないかも(^_^;)
何かカキコしておきましょう。
あと保存してから1分ほど待って確認してください。

以下はプログラムの説明なので飛ばして
プレビューで確認したらスタイルシートを保存して完了です。
お疲れ様でした(⌒-⌒; )



上の画像のアルファベット部分の詳細
(a) bg_FFFFFF（背景色）
(b) txt_000000（文字色）
(c) border_CCCCCC（境界色）
以上カラ―コードにより色を変えることができます
カラーコード表へ
http://html-color-codes.info/japanese/

(d) columns_3
国旗の表示列数
(e) maxflags_250　
国旗の表示数 最大250まで
(f) viewers_0
カウンターの一番上に表示する文字を viewers_######と入力
使えない文字を入力するとカウンターが表示されなくなります。
(g) labels_1
国名を国旗の横に表示
(h) pageviews_1
ページビュー数の表示
(i) flags_1
表示された国旗の数の表示

　0:表示なし　1:表示あり

またまたスタイルシートの弄りです(^o^)/
愛車紹介のヘッダー画像にアクセスカウンターを設置する方法を詳しく載せますね(^o^)/
例によって自己責任でお願い致します。

下のURLをタップして
まず忍者ツールズから無料のカウンターをゲット

http://www.ninja.co.jp




パソコンとスマホでは画面が違いますが
新規ユーザー登録をタップ




こちらはパソコン画面
登録するアドレスを打ち込んで
送信(^o^)/

するとアドレスにメールが届くので
内容通りに登録を進めます
ここが一番注意が必要ですが
いつも登録者がブラウザで見るスマホ又はタブレット パソコンから登録してください
いつもスマホで見るのにパソコンで登録してしまうと、カウンターがパソコンではカウントされませんが、スマホではカウントされてしまいます。

以下登録完了後の設定になります




登録するとブログやホームページ アクセス解析など利用出来るようになります。
今回は無料の忍者カウンターを選択してください。
すると上の画面になるので、みんカラと同じ名前でもいいので打ち込み
他2つも記入
作成ボタンをタップ

これでカウンターが利用出来るようになりました(^o^)/
もう少し頑張ってくださいね〜

忍者カウンター管理ページを出して




ここを自分の好みでカスタマイズします
わからない方は同じに設定すれば間違いないです(^o^)
カウンター画像の選択は次の設定画面から好きな画像を選んでください
種類も豊富で大きさも色々なので探すのが楽しいですよ〜




共有イメージ検索から好きなカウンターの画像を登録してください
そのままだと手裏剣のカウンターのまま表示されます




以上設定が終わりましたら
HTMLソース表示を選択してください。
ソースが上下2つありますね
私は下をコピーしました
ボタンを押してもiPadではコピーできなかったので
ソースをタップして全て選択からコピーしました

コピーしたらメモ帳にペースト




画像はコピーしたものですが
'' ''内の赤いURL部分が必要な部分です
青ではダメです
下のURL部分と比べて数字以外が同じなら
下の3行のプログラムをコピーして使用しても構いません
#######の部分は後で画像の数字と入れ替えればいいです
この数字が違うと他人のカウンターになってしまうので注意が必要です

background-image:url("http://ct2.shinobi.jp/ll/#######");
background-position:815px 12px;
background-repeat:no-repeat;


今度はスタイルシートを弄ります
ここまで出来れば簡単です




マイページからスタイルシート→詳細設定を選択して
下にスクロール




ヘッダータイトルの一番下に3行のプログラムを貼り付けます
赤い枠の部分ですね。前からあるプログラムは消さないでください。
後は数字を#######の部分に打ち込みます
後は保存をタップして完了(^o^)/

あっまだありました(^_^;)
画像の緑の線に注目



この数字を変えるとカウンターの位置を調節できます。2つとも0
にすると左上の赤い部分にカウンターが表示されます。
後はこのみで各自微調整してください
お疲れ様でした(^o^)/

忘れてましたが簡易編集でヘッダー画像や色などを変更して保存すると3行のプログラムが消えます(⌒-⌒; )
3行のプログラムはどこかにメモしておきましょう(^o^)/

次回はフラグカウンターの設置とメンテナンスを載せます

前回はブログの写真を大きくする弄りでしたが
今回はフォトギャラリーの写真を大きくする弄りになります。

これもスマホで観覧される方には変化がないかな？
スマホ持ってないのでわかりませんが(⌒-⌒; )
それが何か？（笑）





これもやはりスタイルシートを変更するので
https://minkara.carview.co.jp/userid/1736453/blog/37174882/
この前のブログでも説明したように現在のスタイルがカスタムになってる必要があります。確認してください(^o^)/





スタイルシートを弄って大きくすると、こんな感じになりますが
整備手帳の写真も同じ大きさになるのでご理解の上変更下さい(^_^;)

上の画像のURLはこちらから
http://minkara.carvio.jp/userid/1736453/car/1631304/4343003/

ではスタイルシートを弄ってみましょう(^o^)/
自己責任でよろしくです




①みんカラのマイページを開いて、画像の1のスタイルシートをクリック
ここで現在のスタイルがカスタムになってる事を確認しましょう。

②詳細編集をクリック

③愛車紹介をクリックすると上の画面になります




④一番下にスクロールすると上の画面になります
この画像はプログラムを変更前の物になります。
赤丸のギャラリー写真 ギャラリー本文をいじるのですが
ギャラリー本文の矢印部分
float:right;
を削除しましょう
これは文章を右側に配置する記述になります。

ギャラリー写真の
float:left;
は削除してもしなくても支障ありません。




後は矢印部分の
width:50%;
の数字を変更すればお好みで大きくなります
私の場合、ギャラリー写真を110.7としました
自分のスタイルにより微調整して決めてください。

もう一つ
ギャラリー本文の
margin:0 0 15px 0;
を
margin:0 0 45px 0;
にすると良い具合に写真と文字の隙間ができるのでお試しください


後はプレビューで確認して保存して完了(^o^)/


以下は写真のアップ方法

800×800で自動画像変換を使って写真をアップするとかなり画質が悪くなります。
せっかく大きく表示出来るようにしたので画質をあまり落とさずアップしましょう(^o^)/
以下はアップ方法です

画像をアップする時は以前紹介した圧縮アプリを使用します。
他にいいアプリがあればそれを使って
https://minkara.carview.co.jp/userid/1736453/blog/36489918/
300KBより小さく圧縮します。
私の使用してる圧縮アプリは圧縮後のサイズが不正確なので、圧縮後にサイズを調べるアプリで確認してからアップしてます。



画像のように自動画像変換しないを選択して、圧縮した写真を選択してアップしましょう(^o^)/
画質はある程度落ちますがタブレットで見ても綺麗な写真が表示されます。
スマホで見られてる方には画面が小さいので違いがわからないと思いますが、タブレットやパソコンで見ると自動画像変換だとかなり画質が悪く見えます。
気にならない方はそのままで(^_^;)

次回もスタイルシートの弄りでアクセスカウンターの設置を載せようと思います
説明が長く画像も多いのでちょっと大変（笑）

さぁいよいよスタイルシートを弄ります。
説明の通り進めれば簡単にできますが
おかしくなっても責任は持てませんので(^_^;)
自己責任でお願いします。

No.1の説明が一部間違っていたので修正しておきました(^_^;)




先ず設定前にブログに載せた写真を大きくしておきます。
画像のように大きくしても設定前は右側が
切れてしまいます





上の画像はスタイルシートを選択した時に最初に表示される画面ですが
現在のスタイルがカスタムになってますよね
この状態でないとスタイルシートを変更できないので

カスタムスタイルの適用ボタンをクリックして
簡易編集から背景画像やヘッダー画像を登録してオリジナルのページに仕上げてください
スタイルシートを弄ってもページのデザインを変えるだけなので、今までのブログなどは消えません
失敗してもスタイル選択でカスタム以外には普通の状態に戻るので挑戦してみては？
元々カスタムでデザインされてる方は、スタイルの操作からパソコンでバックアップを取っておきましょう(^o^)/

これから他にも幾つか紹介するアクセスカウンターなどの設置もカスタムになってる必要があります。





①まずみんカラのマイページを開いてみましょう

②画像の中の1(スタイルシート)をクリック
この時点でカスタムになってるかどうか確認してください。
なってない場合はスタイルシートのプログラムは記述されてません
オリジナルのページを作って保存してから次に進んでください。

③画像の中の2(詳細編集)をクリック
この時点で画面に「本文・サイドメニューの位置」の項目が右側であることを確認します。
左側なら右側に変更して画面一番下の保存をクリック
次へ進みます。
左側にメニューがある場合のプログラムの変更は色々試しましたが私には無理でした。

④画像の中の3(共通コンテンツ)をクリック
すると画像と同じ表示になるので

⑤コンテンツ領域の四角枠内の赤矢印の「 overflow:hidden; 」を「 overflow:visible; 」に変えます。

⑥書き換えたら一番下にスクロールして保存をクリックして保存します。

これで右側が切れなくなりますが、今度はサイドメニューの下に潜り込んで見えません
次は写真をサイドメニューの上に重ねる設定になります。




⑦⑥から続けて設定する場合は3のブログをクリックします。
すると上の画面になります

⑧赤枠内を下のプログラムに書き換えます

margin:5px;
position:relative;
z-index:4;

z-index:4; ←これを0にすると又一番下に潜り込みます。2でも不十分なので4で

上の記述だと写真の左側は空いてしまいます

⚫︎画面左側もいっぱいに載せたい時は
(まずブログの写真を載せる時に画像を980pxにしておけばiPadの画面いっぱいに表示します
これ以上大きくしてもヘッダー画像などがどんどん小さくなるだけで意味がありません。パソコンで見るとどんどん数値を増やせば大きくなりますが全てのユーザーに快適に見てもらうには980以上は避けた方が良いでしょう。)

ではスタイルシートの
margin:5px; この部分を

margin:0px 0px 0px -45px;

に変更します。
これが一般的なスタイルだと思います
(私の場合は
margin:0px 0px 0px -25px;
でした。)


⚫︎私のようにヘッダー画像と横のサイズを揃えたい時は
(まずブログの写真を載せる時に画像を930pxにしておきます。ヘッダー画像の左右の隙間が25pxなので980-25-25=930となります)

スタイルによって違いますが

margin:0px 0px 0px -20px;

の場合が多いと思います。
(私の場合は
margin:0px 0px 0px 0px;
でした)

揃わない場合は各自微調整してください

⑨書き換えたら一番下にスクロールしてプレビューをクリックして
前のブログの方法で626px以上にした写真を確認してみてください。
サイドメニューの上になって写真が見えるようになってたら成功です。

⑩成功したら愛車紹介の右上に出てる「プレビュー解除」ボタンをクリック、保存をクリックして保存します。
保存して変更した画面になるまでに数十秒かかる場所があります。何度かリロードしてみて下さい。

以上で626px以上に設定した写真がサイドメニューの上に表示されます。
スタイルシートの他の場所を変更されてる方がみえますが、必要最低限の変更のみ載せてみました。




ハイ(^o^)/こんな感じになります

iphonやスマホの小さい画面で見られてる方にはあまり関係ない話題かな？

でも載せた写真がタブレットやパソコンで見られてる方に大きく見せたい
と思われてる方、

せっかく綺麗な写真が撮れたので大きく見てもらいたいと思われてる方に


また以前圧縮アプリを
https://minkara.carview.co.jp/userid/1736453/blog/36489918/
こちらで紹介しましたが、圧縮してせっかく綺麗な写真をアップできてもブログで見る画像が小さいとあまり意味がないですね
そこでブログに載る画像を大きくする方法を紹介します。

検索すると何人かの方が載せてみえますが、私の覚えとしても載せようと思います。



この画像はiPadでブログを見た画像で
写真を大きくして載せたものです。
サイドメニューにかぶるまで大きくした写真と
一番下の切れてますがサイドメニューギリギリまで大きくした写真がわかりますね〜
見比べたい方は下から
https://minkara.carview.co.jp/userid/1736453/blog/37026045/





この画像は普通に載せた写真です
見比べたい方は下から
https://minkara.carview.co.jp/userid/1736453/blog/36064129/


普通に写真を載せると編集画面で

a href="/image.aspx?src・・・・・・・・
ct=493f439956d7" target=_blank><・・・style="WIDTH: 500px" al・・・
src="http://cdn.snsimg.c・・・・・・・

この様な訳のわからないプログラムが出ますよね。
500pxに注目してください
これは写真の横の長さを表す数字になります。

◎サイドメニューギリギリまで大きくしたい方は590〜625pxに変更してください。数字はスタイルにより多少異なりますので目安にしてください。
ここまではスタイルシートの変更無しでいけます。

◎このブログで説明するとサイドメニューの右に合わせるか右側いっぱいまで大きくしたい方は
925〜980pxに変更すればいいのですが
写真が右側で切れてしまいます。
そこでスタイルシートを弄る必要があります。
その方法は次回に(^_^;)

余談ですが980px以上に設定するとどうなるか確認してみました




思い切って1500pxにしてみました。
はいこんな感じに(^_^;)
こうなってる方、たまに見かけますね
これはiPadから見た時なので、パソコンで確認されてる方は写真が大きくなって良いのかもしれませんね。
でも一番スマートなのはNo.2でも紹介しますが980px以下で載せるのがいいと思います。