スポンサードリンク


2013年11月29日

(゚д゚ll)!ブログの表示崩れ祭りの顛末とツイッターアイコンを囲める幅の《クリスマスリース》&ダイヤモンドとキラキラ効果配布

フリー素材 イラスト クリスマスリース ツイッター アイコンを 囲めるスリムタイプ キラキラ ダイヤモンド サンプル画像
※こちらはサンプル画像となります。



本日の素材は
ツイッターアイコンを囲める幅の《クリスマスリース》&ダイアモンド&キラキラ効果
でございます。

以前配布させていただいたものは幅がありすぎて、アイコンの枠を囲めませんので、今回配布のものは少し細めです。
その他、twitterヘッダー画像のサンプルセット、ラインストーン素材、キラキラ効果素材も同梱しております。

内容:
・twitterヘッダー画像&アイコンのサンプルセット
フリー素材 イラスト クリスマスリース ツイッター アイコンを 囲めるスリムタイプ キラキラ ダイヤモンド サンプル画像
・ダイアモンド&キラキラ効果
・クリスマスリース400px×400px(緑、白)
・クリスマスリースツイッター用150px×150px(緑、白)






素材は日々一素材/パントリー『ichipan!(イチパン!)』 
よりダウンロードできます♪

フリー素材 イラスト クリスマスリース ツイッター アイコンを 囲めるスリムタイプ キラキラ ダイヤモンド サンプル画像
※こちらはサンプル画像になります。

ツイッターアイコンを囲める《クリスマスリース》&ダイアモンド&キラキラ効果zip
ダウンロードは『ichipan!(イチパン!)』より♪





海産物、スイーツショップ、手紙、金魚、観葉植物、ハロウィン、クリスマス各シリーズへのリンクは、サイドバーに格納しております。
また、サイドバーに格納している素材以外にも素材は多数ございますので、ご入用の素材が見当たらない場合はキーワードで検索してみてくださいね♪






(゚д゚ll)!ブログの表示崩れ祭りの顛末


昨日が一周年記念で浮かれていたスキにブログの表示が崩れまくっていてビックリ( ̄□ ̄;)!!

通常
CSS 表示 崩れ タグ <DIV>

昨日
CSS 表示 崩れ タグ <DIV>

「表示がおかしいということはCSSでなにかトラブルでも?」と、ファイルを確認したのですが特に変わった様子はありませんでした。(そもそもここしばらくいじった覚えもありません…)

一応、左サイドバーやブログボディなんかのwidthのpxを減らしてみたり、別のテンプレートに変えてみたりして様子を見たのですが、それでも崩れは直らずでした。

「ここまでやってみてなにも変わらないってことはウチだけの問題じゃなくてSeesaaのサーバー自体がおかしいとか?」と、ツイッターで検索してみたのですが、「Seesaaブログの表示が崩れた」とツイートしている方はひとりもいらっしゃらず…


とち狂ってこんなツイートまでする始末…





「一応最後に…」と、藁にもすがる思いで『Seesaaブログ・よくある質問と回答』を見返してみたところ、あっさりとど真ん中の回答が見つかりました。。。。↓
ブログ全体の表示が崩れてしまった
記事文中やコンテンツ内に入力したHTMLタグに間違いがある可能性があります。特に、</div>終了タグが2重に重なっている場合や、終了タグが削除されている場合によく見受けられます。

<DIV>タグと聞いて思い当たることが;;;
昨日はくつきがデザインを担当させていただきました家計簿&日記のご紹介を、わかったブログのかん吉さん作の超便利ツールヨメレバを利用しさせていただいたのですが…↓



多分そのコードをコピペする際にこの</DIV>↓
CSS 表示崩れ <div>タグ
が抜けてしまったのだと思います。

なんという単純ミス…;;;

このヨメレバのコードを一度削除し、貼り直したところあっさり完治!

良かった良かった…( ´Д`)=3


って詰みモードになるの早すぎ自分…

すぐ人(Seesaa様)のせいにして引越し先をググってましたし…(;・∀・)



ブログも1年と1日経ちましたが、落ち着きのないところは去年と変わらず…;;
人様より周回遅れでも後退するよりはマシかな( ´Д`)=3と自分に言い聞かせて黙々と作業している日々でございます。。。



というわけで、皆さまもブログの表示崩れでお困りの際は記事内に余計な、もしくは足りない<DIV>タグがないか確認してみましょう;





でっは〜(*´∀`*)ノシ


ヨメレバで発見したお知らせexclamation


楽天アフィリエイトがPC/モバイル対応しました。新たにアフィリエイトIDの入力が必要です。
詳しくはこちら⇒カエレバ・ヨメレバの楽天リンクを、PC・モバイル兼用にしました


オススメ無料ツール


フリーツールやフリーソフトでもPhotoshopとは違った感じの効果を入れることが出来ます。

h4 イメージ Photoshop系のツールがオンラインで使えます⇒PixarEditor
h4 イメージ お絵かき系フリーソフト⇒Pixia




にほんブログ村 デザインブログ フリー素材へ
にほんブログ村
ランキングに参加しています☆お気に召しましたらクリックよろしくおねがいします顔文字イラスト ニコポッ揺れるハート

バナー 日々一素材 リンクフリー バナー イチパン! リンクフリー






posted by ヒビイチソザイ at 18:27 | Comment(0) | TrackBack(0) | SEO関係 | このブログの読者になる | 更新情報をチェックする

2013年11月27日

キラキラ☆クリスマスツリーイラスト《ツイッターヘッダー&アイコン》と、サイトスピードとセキュリティ強化中の話

フリー素材 イラスト クリスマス ホワイトクリスマスツリー オーナメント ツイッター ヘッダー画像 サンプル画像
※こちらはサンプル画像となります。



本日の素材はホワイトクリスマス☆イラスト《ツイッターヘッダー&アイコン》でございます。






素材は日々一素材/パントリー『ichipan!(イチパン!)』 
よりダウンロードできます♪

フリー素材 イラスト クリスマス ホワイトクリスマスツリー オーナメント ツイッター ヘッダー画像 リンクアイコン
※こちらはサンプル画像になります。

ホワイトクリスマス☆イラスト《ツイッターヘッダー&アイコン》zip
ダウンロードは『ichipan!(イチパン!)』より♪




海産物、スイーツショップ、手紙、金魚、観葉植物、ハロウィン、クリスマス各シリーズへのリンクは、サイドバーに格納しております。
また、サイドバーに格納している素材以外にも素材は多数ございますので、ご入用の素材が見当たらない場合はキーワードで検索してみてくださいね♪






サイトスピードとセキュリティ強化中の話


ただいま『日々一素材』ではブログのユーザビリティを強化するため試行錯誤中でございます;;
今後はしばらくは、これまで素材作りにいっぱいいっぱいでなかなか手をかけて来られなかった『日々一素材』及び『イチパン!』のサイトスピード、セキュリティなどのユーザビリティボトムアップに関する記事が続くかと重います。


お役に立ちそうな情報がストックできましたら、後日まとめますね。





サイトスピードPageSpeedの通信簿


まずはグーグル様のPageSpeed成績↓
/auth/article_preview/ サイトの状況 ページの読み込み時間のパフォーマンス PageSpeed nsights
が、あまりにも悪かったので、アドバイスを上から実行していくことにしたのですが…

ブラウザキャッシュを活用する。
スクロールせずに見えるコンテンツのレンダリングブロックを排除する
圧縮を有効にする。

色々とググってみて、上の赤3つは無料ブログではなかなかいじりづらいというのがわかってきました。

例えばSeesaaですと簡単にHTMLとCSSはいじれるようになっていますが、逆に既存のjsは個人でいじれないようですし、ましてやApacheの設定などはできる気がしません;;
(『ブラウザキャッシュを活用する』の改善策として代表的なのが『.htaccessファイルの設置』なのですが、こちらはApacheというウェブサーバーの設定ファイルのようです。)

一応調査は続行中ですが、ここを改善するのは無料ブログのままではちょっと難しい気がします。




セキュリティ関連


スピードも大事ですが、もっとも優先なのがサイトの安全性です。
セキュリティに関しては素材作りで時間がない時にもちょいちょいツールで計測したりウェブマスターツールに変なメッセージが出ていないか確認していたのですが…

先日、McAfee(マカフィー)サイトアドバイザーをインストールしてから『日々一素材』から『イチパン!』リンクした時に、タイミングによって注意マーク(黄色)が出ることに気づきました;
基本的にはちゃんと安全マーク(緑)なのですが、時たま黄色マークに;;
サイトパフォーマンス McAfee マカフィー サイトアドバイザー 判定 黄色 緑 注意 安全
一体どういうタイミングで緑だったり黄色だったり変化するのかは謎なのですが…


ひとつだけ思い当たったのが、WordPressのダッシュボード。
ここに居るときにだけはなぜか常に黄色マークが出ています。
ですので、WordPressにログインしている状態でその管理人が自分のサイトにアクセスすると黄色マークになってしまうのかと思い、一度ログアウトしてから再度アクセスしてみたのですが……

結果は変わらずでした;



もしかしてと『イチパン!』を検索してみたところ、常に『イチパン!』は黄色表示(Google、Yahoo!、bing検索いづれも)ということにも気づきました…(゚д゚lll)ガーン;;
サイトパフォーマンス McAfee マカフィー サイトアドバイザー 判定 黄色 緑 注意 安全

ちょ…これはまず;;;


心配になっていつもお世話になってるこちら⇒Google スパムサイトチェック
サイトパフォーマンス サイト判定 セキュリティ Google スパムサイトチェック
http://blog.hibiichi-sozai.com/ の現在の状況
現在のところ、このサイトは疑わしくないと認識されています。
Google がこのサイトを巡回したときの状況
Google は過去 90 日の間、このサイトを巡回していません。
不正なソフトの感染を広げる媒介をしていたかどうか
過去 90 日間に ichipan.phpapps.jp が他サイトへの感染媒体となっていた形跡はありません。
サイトで不正なソフトウェアをホストしていたかどうか
いいえ、このサイトでは過去 90 日間に不正なソフトウェアのホスティングは検出されていません。

"Google は過去 90 日の間、このサイトを巡回していません。"は微妙に気になりますけど、特に問題ないようで、一安心…( ´Д`)=3


同じくウェブマスターツールの方も確認しましたけど、特に重大なエラーメッセージはありませんでした。
サイトパフォーマンス サイト判定 セキュリテ

ィ Google ウェブマスターツール

※日々一素材の方はアナリティクスと連携した直後なので、そのメッセージになってます。

セキュリティの問題
貴サイトからはセキュリティの問題は検出されませんでした。サイトに関連するセキュリティの問題について詳しくは、ハッキングされたサイトに関するリソースをご確認ください。






判定について問い合わせしてみようとMcAfeeの

サイトアドバイザーの評価に関する問い合わせ方法 - McAfee
に行ったところ…

そのページが赤判定でした… エェッ!?(* □ )~~~~~~~~ ゚ ゚
サイトアドバイザーの評価に関する問い合わせ方法 - McAfee サイト判定 セキュリティ Google ウェブマスターツール
なにか事情があるのかもしれませんが、このページがぱっと見赤に見えるってどうなんでしょう;;;




それはともかく、マカフィーの判定はあまり正確ではないようでサイトアドバイザー判定も含め、ネットの評判もまちまち。。


ですのでそれほど気にするほどのことでもないかもしれませんが、やはり自分のサイトが『注意!』の黄色マークだったりすると放ってはおけませんよね;;

というわけでMcAfeeには直接問い合わせをし、記事にて経過をご報告したいと思います。
(問い合わせ手順がなんだかんだ面倒ですので、あまりにもわかりづらそうでしたら図説したいと思います。)




今後の予定


PageSpeedのサイトパフォーマンスの点数が赤点レベルなので、モバイル、パソコン共に70点以上を目指す。

ブラウザキャッシュを活用する。
スクロールせずに見えるコンテンツのレンダリングブロックを排除する
圧縮を有効にする。
しかし、無料ブログのままでは改善の対応がしづらいかもしれないので、あまりにも問題が残るようなら最悪ブログ引っ越しも視野に入れよう。。。(;・∀・)



◆『イチパン!』でマカフィーサイトアドバイザーの表示が黄色になるので、McAfeeに問い合わせをして表示を緑にしてもらうよう依頼する。


◆その他今回使用した便利ツール
h4 イメージ Google スパムサイトチェック
h4 イメージ Pingdom Website Speed Test


冒頭でも申しあげましたが、改善を試行錯誤し、お役に立ちそうな情報がありましたら記事にまとめる予定です。








でっは〜(*´∀`*)ノシ



オススメ無料ツール


フリーツールやフリーソフトでもPhotoshopとは違った感じの効果を入れることが出来ます。

h4 イメージ Photoshop系のツールがオンラインで使えます⇒PixarEditor
h4 イメージ お絵かき系フリーソフト⇒Pixia




にほんブログ村 デザインブログ フリー素材

へ
にほんブログ村


ランキングに参加しています☆お気に召しましたらクリックよろしくおねがいします顔文字イラスト ニコポッ揺れるハート

バナー 日々一素材 リンクフリー バナー イチパン! リンクフリー




posted by ヒビイチソザイ at 19:21 | Comment(0) | TrackBack(0) | SEO関係 | このブログの読者になる | 更新情報をチェックする

2013年11月24日

『JPEGmini』で複数同時圧縮する方法と、年末のお買い物セット《イラスト素材》配布♪

フリー素材 師走 お買い物 買い出し スーパーの袋 パック詰めロース肉 りんご みかん ネギ 紙袋 イラスト素材 サンプル画像
※こちらはサンプル画像となります。



本日の素材は年末のお買い物セット《イラスト素材》となります♪

いきなりクリスマスと何の関係もない素材ですが、サンタ素材の時に作った小物がもったいないので配布することにしました。

◆フリー素材:年末のお買い物セット内容◆
スーパーの袋(商品セット済み)
カスタマイズ用スーパーの袋全面単品
紙袋(みかんセット済み)
ロゴ無し紙袋(みかんセット済み)
カスタマイズ用ロゴ無し紙袋
りんご単品
みかん単品
ネギ単品
パック詰めロース肉単品

フリー素材 師走 お買い物 買い出し スーパーの袋 パック詰めロース肉 りんご みかん ネギ 紙袋 イラスト素材 サンプル画像
※ロゴ無し紙袋(みかんセット済み)、カスタマイズ用ロゴ無し紙袋は画像に含まれておりません。

スーパーの袋とか鍋の材料とか年末のお買い物セットです。
鍋の材料というにはロース肉ってヘンですよね;;




素材は日々一素材/パントリー『ichipan!(イチパン!)』 
よりダウンロードできます♪

フリー素材 師走 お買い物 買い出し スーパーの袋 パック詰めロース肉 りんご みかん ネギ 紙袋 イラスト素材 サンプル画像
※こちらはサンプル画像になります。

年末のお買い物セット《イラスト素材》zip
ダウンロードは『ichipan!(イチパン!)』より♪





海産物、スイーツショップ、手紙、金魚、観葉植物、ハロウィン、クリスマス各シリーズへのリンクは、サイドバーに格納しております。
また、サイドバーに格納している素材以外にも素材は多数ございますので、ご入用の素材が見当たらない場合はキーワードで検索してみてくださいね♪






画像圧縮サービス『JPEGmini』で複数同時圧縮する方法


昨日の記事
WPプラグインが使えない無料ブログで画像圧縮の比較などしつつ…クリスマスリース☆イラスト素材《まめ電セット済み》配布♪
の補足記事です。

ただいま『日々一素材』ではサイトパフォーマンス向上の一環として『画像圧縮』を研究中でございます。

昨日は画像圧縮ソフト『『縮小専門』』と画像圧縮サービス『JPEGmini』のガチンコを記事にさせていただきましたが、本日はその『JPEGmini』で、複数枚の画像を同時圧縮する方法になります。
思った以上に面倒でしたので、別にまとめさせていただきました。



PNG画像を圧縮してくれるサービスTinyPNGなら、いちどきにPNGファイルをドロップエリアに放り込めば、パンダが笹を平らげるようにぺろっと全部処理してくれる(しかも早い)んですけど、JPEGminiの方はそうもいかないようです。

縮専とJPEGminiのガチンコではほぼほぼ互角(時と場合によって使い分け)という結果になったのですが、TinyPNGとJPEGminiのガチンコとなりますと、いまのところ複数圧縮の手軽さでは パンダ(TinyPNG)>イケメン(JPEGmini) という感じ。
JPEGmini 画像圧縮 比較 複数同時圧縮 サンプル画像
パンダ「ドヤっ」(二度目)

JPEGminiの方がいろいろ面倒な手続きが多いようです。
さすがイケメン様は敷居が高い。。。


というわけでJPEGminiの複数同時圧縮するのにまず何が必要かというと、JPEGminiへのサインアップです。




JPEGminiのサインアップ方法


サインアップ方法と言っても定番の手順なのですが一応…

1 まずはイケメンの元へ…JPEGminiトップへ行き、右上の『サインアップ』をクリック♪
JPEGmini 画像圧縮  複数同時圧縮 方法




2 JPEGmini登録画面が表示されますので、お好きな方法を選択してください。
JPEGmini 画像圧縮  複数同時圧縮 方法

◆Facebookの連携の場合はFacebookログイン画面が表示されますので、ログイン情報を入力し、
『JPEGminiは次の情報を受け取ります』 ⇒『OK』をクリック。

◆Gmailでの連携の場合は、アカウント選択画面が表示されますので任意のアカウントを選択し
『Jpegmini.com が次の許可をリクエストしています』⇒『承認』をクリック

で、それぞれログインできます。





3 新規登録の場合は、メール&パスワード入力をし、『Sign Up Now』をクリックするとメールが届きますので、認証URLをクリックすれば登録完了です。
JPEGmini 画像圧縮  複数同時圧縮 方法







JPEGminiでの複数同時圧縮方法


次にいよいよ複数同時圧縮の方法です。

1 まずは、右上の『My MENU』プルダウンより『My Album(私のアルバム)』を選択します。
JPEGmini 画像圧縮  複数同時圧縮 方法




2 画面右上の『Upload YOUR PHOTOS』をクリックすると『Upload Photos to a new Album』のダイアログが開きますので、『Select Photos』をクリック。
JPEGmini 画像圧縮  複数同時圧縮 方法





3 任意のフォルダより複数の画像を選択し、『開く』をクリック。
JPEGmini 画像圧縮  複数同時圧縮 方法





4 アルバム名を入力するダイアログが開きますので、適当なアルバム名を入力し、『Create Album』をクリック。
JPEGmini 画像圧縮  複数同時圧縮 方法





5 圧縮には意外に時間がかかりますのでメールが来るまで気長に待ちます(笑)
※今回の場合は500px×500pxの画像3枚で3分程待ちました。

わかっていればなんということはないのですが、初めはメールもなかなか来ないしアルバムも作成されていないしで、何か手順を間違ったのかと焦りました…(;´∀`)





6 圧縮終了!とのメールが届いたら、zipリンクをクリックすれば圧縮済みの画像がダウンロードされます。
JPEGmini 画像圧縮  複数同時圧縮 方法

もしくは、『MyAlbum』ページに作成されているアルバムの左下『DOWNLOAD』ボタンをクリックして圧縮済みの画像zipをダウンロードします。
JPEGmini 画像圧縮  複数同時圧縮 方法




念のためzipが圧縮済みなのか確認しました。
JPEGmini 画像圧縮  複数同時圧縮 方法

・オリジナル 476kb
・個別圧縮テスト 327kb
・複数同時圧縮テスト328kb

ということで、微妙な差はあれど個別で圧縮した画像と同じ圧縮率でちゃんと圧縮されているようです。




JPEGminiの注意点


◆アルバム保存期間には期限(1週間)があります。
JPEGmini 画像圧縮  複数同時圧縮 方法


◆個別圧縮の際『Press to Upload Photos』ボタンが反応しない場合。
JPEGmini 画像圧縮 使い方
グーグル自動翻訳が出ている時にアップロードbuttonが反応しないことがありました。
その場合は『原文を表示する』をクリックした後、再度ボタンを押していただければ反応します。



というわけで、JPEGminiでの複数同時圧縮方法は以上となります。




明日はまめ電をカスタマイズする際の簡易なコードの描き方や、本日配布素材(スーパーの袋と諸々食材)のカスタマイズ方法などの記事となります。
サイトパフォーマンスを改善するための「.htaccessファイル」の記事はもう少し先になりますね。(調査中でもありますので、スミマセンが…)



では皆様もJPEGminiで画像のダイエットをし、イケメン様たちに「あなたの体重が減っそうです」と褒められ?ましょう♪


でっは〜(*´∀`*)ノシ



オススメ無料ツール


フリーツールやフリーソフトでもPhotoshopとは違った感じの効果を入れることが出来ます。

h4 イメージ Photoshop系のツールがオンラインで使えます⇒PixarEditor
h4 イメージ お絵かき系フリーソフト⇒Pixia




にほんブログ村 デザインブログ フリー素材へ
にほんブログ村
ランキングに参加しています☆お気に召しましたらクリックよろしくおねがいします顔文字イラスト ニコポッ揺れるハート

バナー 日々一素材 リンクフリー バナー イチパン! リンクフリー




posted by ヒビイチソザイ at 18:50 | Comment(0) | TrackBack(0) | SEO関係 | このブログの読者になる | 更新情報をチェックする


スポンサードリンク









エフェクソールXR