宮崎のホームページ制作会社Tedinc | TEDINC OFFICIAL BLOG

menu 0982-60-1084

TEDINC OFFICIAL BLOG

excel_top

こんにちは。 宮崎でWebサイト制作を行っているTedincの林田です。

今回はExcelシートで作成した請求書などをPDFで保存する方法とレイアウトが崩れた時の対処方です。

メニュー

1、ExcelシートをPDFで保存する方法
2、PDFで保存したレイアウトが崩れた時の対処方

ExcelシートをPDFで保存する方法


1、メニューバーのファイルから名前をつけて保存を選択。(下記写真の1と2を参照)

ショートカットKey(Mac:⌘+shift+s Win:F12key)

excel


2、保存のファイル形式をPDFに変更し保存(下記写真の3を参照)

excel2

3、【補足】セキュリティの為パスワードをかける場合は形式の下にあるオプションで選択(下記写真の4、5を参照)

excel3




2,PDFで保存したレイアウトが崩れた時の対処方



一概には言えませんが自分がレイアウト崩れた時に解決した方法を記載いたします。


上記の例で使用しているPDFも4Pの請求書になってしまいました。


excel4



解決方法

1,ファイルのページ設定を選択(下記の写真を1と2を参照)

excel5

2,ページ設定の【拡大縮小印刷】の【次のページ数に合わせる】のチェックを入れる(下記の写真を3と4を参照)

excel6

3,上記に説明した方法でPDFで保存すると意図した通りに保存完了(下記の写真参照)

excel7





いかがでしたか。 レイアウトが思うようにいかない場合は上記の方法で解決できるのではないかと思います。

参考にしてみてください。

こんにちわTedincの林田です。
今回は自分が技術向上の為に非常に勉強しやすく役だったサイトがあったのでご紹介します。

今回自分はjQueryを自分で自由に実装していと考え行き着いたサイトなので、下記の流れので説明していきます。

メニュー
1,jQueryについて&できる事&使用方法
2,簡単に実装させたい
3,【Progate】:自分でjQueryをカスタマイズする方法を学ぶ



1,jQueryについて&できる事&使用方法


jQueryについて

jquery
jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。
参照
https://ja.wikipedia.org/wiki/JQuery

jQueryでできる事

サイトに個性がある動きなどが表現できます。(スライダー、ナビ、ページスクロールetc…)

参考記事一覧
少しのコードで実装可能な20のjQuery小技集
jQueryでできること
jQueryプラグインまとめ集

使用方法

1,ベーシックな方法

https://jquery.com/からjQueryをダウンロードし、サイトに設置します。

headやfooterなどにようにして下記のように記載して、完了でこれでjqueryが使用できるようになります」。


2,もっと簡単方法(google ajax apiを使う)

「jquery/1/jquery~」この数字はバージョン1の最新版のjQueryを取得するという意味です。(細かい指定もちろん行えます )

JavaScriptのコードを書いていく

JavaScriptのコードを下記の 【// ここにコードを書いていく。】に書いていきます。




2,簡単に実装させたい

これは簡単な説明となります。

下記のイラストを参考にしてくださいしてください。

パソコンの前で腹に息を溜め、叫びます
・・・・・・・・・3
・・・・・・・2
・・・・1
google

・・・・

・・・・

・・・・

注意点(本当に叫んでしまった場合)

1、アパート住まいの方は隣近所の人と亀裂が入ります。
2、実家住まいの方は両親が食卓の時涙目で、「辛いことがあったら言ってね」と言われます。
3、彼女と同棲中の方は、「私がこの人守らなきゃ・・・・・」と彼女に不思議な責任感が生まれます。

・・・・

・・・・

・・・・


冗談はさておき

googleで主観的な表現の検索でも良いので、検索してください。

例えば:

jqueryで滑らかなページ遷移
と検索すると

google2

約 8,990 件も出てきます。

その中から自分が実装したい物と同じような物を探して、記事どうりに行えばイメージしたとおりのフェクトがサイトに実装できます。


3,自分でjQueryをカスタマイズする方法を学ぶ


1,コピペではなく自分でコードを書く

前述した【2,簡単に実装させたい】のように、しっかり覚えなくても実装はできますが、制作するサイトに「オリジナリティ」を少しでも表現したい場合はやはり、自分の想像通りのエフェクトを制作しなければなりません。

「よし、しっかりと頑張ろう!!!!」と思った人にオススメのサイトを紹介します。

progate

サイト名:Progate

内容:WEBの知識を効率よく学習できます。
【HTML&CSS】・【JavaScript】・【jQuery】・【Ruby】・【Ruby on Rails】・【PHP】・【Java】・【Pyton】・【Swift】

上記の内容のカリキュラムが初心者向けで設定されており、プログラムなど構築しながら勉強できるので、非常にわかりやすく技術も身につきます。



まとめ

この仕事をしていて、自分で技術力が上がったと感じるときは、

「問題が発生した時に、自分自信で調べて解決できた時こそ技術が身につく」

と自分は感じており、【Progate】はその観点で技術が身につくのも早いのと思い紹介いたしました。

もちろん色々紹介されているプラグインはレスポンシブなどの観点でも優秀ですので、プラグインと併用しながら自分なりのカスタマイズを行っていくとより良いものができると思います。

opg

こんにちは。Tedincの林田です。

今回はOGPタグについて解説していきます。

項目一覧

1,OGPとは?

2,WordPressの場合

3,OGP設定項目

4,og:imageのサイズ

5,OGPチェック方法

6,fb:app_idの設定




1,OGPとは?

”OGPはもともと、Facebookが策定した物で、FacebookやmixiなどのSNSでシェアされたときに、そのページのタイトル・URL・概要・画像を正しく伝えるためのもです。
方法はHTMLのmetaタグに記述します。”




2,Wordpressの場合

WordPressはプラグインを使えば、OGP簡単に出力されます。例:JetpackやALL in One SEOなど
備考:Jetpackのパブリックサイズ共有の自動で出力されるOGPは不評なのですが、アイキャッチや抜粋などをしっかりと記述すればちゃんと表示してくれます。




3,OGP設定項目

TEDINCで行なっているOGP設定を参考に下記に項目を記載します。




4,og:imageのサイズ

og:imageのサイズ

”1200 x 630 px 以上推奨”

”最低でも 600 x 315 px”

また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。

参考記事
OGP画像シミュレータ
OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法




5、OGPチェック方法はFacebookデバッガーの使用する


1,Facebookデバッガーにアクセスします。

2,URLを入力しOGPを確認

fb_db


3,エラー項目が表時されるので、修正

fb_db_2




6,fb:app_idの設定

エラーが出てしまったので、エラー項目をチェックします。

”Share App ID Missing
The ‘fb:app_id’ property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.”

fb:app_idがないので設定して下さいといっています。設定すればニュースフィードで高いクリック率がだせるとの事なので設定していきます。

app_idの取得方法

1、Facebookにログインした状態で、Facebook開発者アプリにアクセス
2,新規アプリケーションを作成

3、Facebookのニュースフィードを設置する場合は手順に沿ってサイトに反映します。

今回はとりあえずOGPのエラーを解除するためにapp IDを確認します。(写真の1でスキップもできます。)

fb_db_3


4、取得したIDを記載しサイトに反映




5,先程のまで出ていたエラーが消えました。
注意:サイトのキャッシュなどを一度削除し、下記記写真のScrape Againをクッリクして下さい。

fb_db_4





いかがでしょうか、とりあえずこれでOGPの設定は完璧だとおもわれます。参考にしてみてください。

CONTACT US

お気軽にお問い合わせ下さい

お問い合わせはコチラ