投稿日:

無料のHTML・CSSテンプレートをWordPress化する方法No.1

WordPressにテーマを認識させる素材ををダウンロードする

 

まず、商用OKの無料のフォルダをダウンロードして解凍しておきます。

商用OKですが、一部を抜粋すると、

  • アダルトサイト

  • 法律に反するサイト

  • モラルに反するサイト

などのサイトにはご利用できません。必ず、利用規約も必ず読んでくださいね。

今回ダロンロードするのは、No.14です。

今回カスタマイズするのに使用するデザインのサイト名とURLは下記のとおりです。

サイト名：CoolWebWindow
URL：http://www.coolwebwindow.com

 

現在WordPress&サーバーをお持ちでない方は、無料で使用できるMANPをインストールして編集に使ってみましょう。

 

MAMPをWindws10にイントールしてサーバーにアクセスする方法

テキストエディタには、Atomを使用します。

Atomの公式ページからダウンロードして、必要であれば、日本語化したりして使ってみましょう。

まず、ダウンロードしたpub014のフォルダを解凍します。

 

 

 

それでは、まず、WordPressが認識できるかどうか試しにサーバーにupロードしましょう。

 

・Xサーバーのファイルマネージャーからログインして【ドメイン名】→【public_html】→【wp-content】→【themes】の順にアクセスします。

・MAMPの方は、【MAMP】→【htdocs】→【wordpress】→【wp-content】→【themes】の順にアクセスします。

以下の説明以降UPロードと記載した時、MAMPの方は上記の手順でフォルダやファイル移動したり作成したりしてください。

ファイルの作成などはATOMを使うと便利です。

Atomを開いて【ファイル】→【フォルダを開く】→【MAMPをインストールしたドライブ】→【MAMP】→【htdocs】→【wordpress】→【wp-content】→【themes】の順です。

 

 

以下の画像は、フォルダを作成した後の画像ですが手順としては

①任意のテーマを入力します。私はmythemeとしました。

②フォルダ作成をクリックします。

すると以下の画像のようにフォルダが作成されます。

 

 

次に【mytheme】の中に

【style.css】と【index.php】のファルを作成します。

 

 

 

 

次にstyle.cssとindex.phpのをファイル編集をします。

まず、style.cssにチェックを入れ編集をクリックします。

 

 

 

※MAMPの方はAtomを使って以下の画像のようにファイルを作ります。

 

 

すると以下のようにか編集画面が表示されます。

※保存する時ファイル名の文字コードはUTF-8に必ずしておいてください。

 

 

 

次に以下のstyle.cssに以下のコードをコピペして記述してください。

 

 

 

 

index.phpにはダウンロードしてきたsample.htmlのファイルの中身を今回は使用しますので以下のコードをindex.phpとして記述してください。

 

 

wordpressの管理画面から外観→テーマをクリックすると以下の画像のようにテーマとして認識されますので一旦有効化しておきます。

画像を表示したい時はscreenshot.pngとして画像をテーマの中に置くことにより自動的に認識されるようになります。

 

 

先ほど、style.cssファイルを作った同じ階層に今度は【top.php】というファイルを作りダウンロードしたindex.tmlのファイルの中身をそのまま記述します。

 

 

次にダウンロードしてきたファル【pub014】の中から【CSS】・【images】・【js】のフォルダをUPロードしますのでまず、CSS・images・isのフォルダを作りその中にファイルをUPロードするか、FFFTPのソフトを使うと以下の画像のようにフォルダ毎upロードできます。

※【pub014】→【src】の順に開くとcss・images・jsのフォルダがあります。

以下の画像は、imagesとjsのフォルダはアップロード済みでcssのフォルダをアップロードする前の画像になります。

 

MAMPを使用されて方のatomの最終的なフォルダとファイル構成は以下の画像の通りです。

 

 

※今回は、Wordpressに認識してもらえるんだな!!という確認のためそのままサーバーを扱いましたが、次回からは、MAMPとAtomを使ってローカル環境で作業する方法をとり最後に出来上がったデータをサーバーにアップロードする方法をとりますので、MAMPとAtomが使用できるようにダウンロードしておいてくださいね。※もちろん直接サーバーにアップロードするのもOKです。

 

 

にほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ WordPressへ

投稿日:

MAMPにWordPressをインストールする(Win10)

環境:Windows10 home 64bit

 

MAMPにWordPressをインストールする。

 

MAMPにデータベースを作成する

MAMPにWordPressのデータベースを関連付けるためにMySQLを使用します。

MANPを起動してOpen start page をクリックします。

 

 

次にToolsの中にあるphpMyAdminをクリックします。

 

 

次に以下のようにdatabaseをクリックして

wordpress_testという名前のデータベースを作りCreateをクリックすると

wordPressという名前のフォルダができます。

 

 

WordPressをダウンロードする

 

WordPress日本語版でダウンロードします

 

次にダウンロードしたフォルダをディスクトップなどにすべて展開し解凍します。

 

 

 

MAMPにWordPressのフォルダを移動してインストールする

 

ダウンロードして解凍したWordPressのフォルダをドラッグアンドドロップでMAMPのフォルダに移動します。

MAMPをイントールしたドライブのMAMP→htdocs内に

  • Cドライブにインストールした場合・・【C\MAMP\htdocs】
  • Dドライブにインストールした場合・・【D\MAMP\hhdocs】

 

 

 

 

以下のようにアドレスバーにlocalhostと入力すると先ほどMAMPで作成したデータベース名【Wordpress/】が表示されるのでクリックします。

 

さぁ、いよいよwordpressのインストール開始です!

さあ、始めましょう!をクリックします。

 

 

以下のように

データベース名・・wordpress

ユーザー名・・root

パスワード・・root

と入力し送信ボタンをクリックします

 

 

次にインストール実行をクリックします。

 

 

次に以下の4項目を力して検索エンジンがサイトをインデックスしないようにするにチェックを入れてWordPressをインストールをクリックします。

サイトのタイトル

ユーザー名

パスワード

メールアドレス

※これは本チャンのサイトではないのでサイト名などは気にしなくていいですが、検索エンジンにインデックスされないようにしておきましょう。

 

次に先ほど設定したパスワードを入力してログインボタンをクリックします。

 

 

すると通常wordpressにログインするときの画面のようにログイン画面が表示されますので、ユーザー名とパスワードを入力してログインします。

 

 

お疲れさまでした。無事ログインできましたか？

 

にほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ WordPressへ
 

投稿日:

【WordPress】改行しても囲い枠内にピッタリ文字が納まった時のまとめ!

display:inline-block;でテキストの長さに合わせる

一行に連続した文字を入力した場合以下のようにdisplay: inline-block;をCSで指定すると以下のように自動で枠が広がっていくのですが

 

これはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますね

 

改行すると下のように右側に空白ができてしまいます。

これはfukidashi1のサンプルです。
ここで改行してます。
右に余白ができてしまいますね

 

labelに文字を表示する

 

そこで試したのが”label”に文字を表示させることです。
これは以前アコーディオンみたいなのを作っていた時に文字と枠の間に空白ができないのが記憶の片隅に残っていてこれは試す価値ありだな!!・・・と思い試してみました!
参考にさせて頂いたサイトは、[CSS]可変するレイアウト幅の最大値を制限する簡単な方法　です。ありがとうございました。

 

するとこれは通常と同じ表示なのですが

 

改行した時以下のように、右側にあった空白がなくなっていました。

 

もっとわかりやすく表示すると

↓こんな感じです。↓

これはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますね

 

Excel
Word
PowerPoint

 

 

 

文字数が少ないとわかりやすいですね!

にほんブログ村 IT技術ブログ WordPressへにほんブログ村 IT技術ブログへ

投稿日:

ExcelをWordPressなどのwebページに表示させる方法5選

WordPressやブログに表示させる方法

 

OneDrive経由で表示する

埋め込みコードを使って表示したデータは下のようにOneDrive経由で表示例

                                                 ↓　↓　↓

OneDriveは携帯電話、タブレット、コンピューターを使えばどのデバイスからでもアクセスでき更新もできるのでとても便利です。

OneDriveはWordPressだけではなくhtml形式で記入できるblogなどのWeb Pageであれば表示可能です。

OneDriveの登録がない方は、OneDriveを無料で新規登録しましょう。

OneDriveにアクセスして｢OneDriveに移動｣します。

 

OneDriveにファイルをアップロードする

PCなどの各デバイスからアップロードする。

OneDriveからご自分がアップロードしたいフォルダをクリックして開きます。ここでは「ドキュメント」をクリックします。

 

 

次に、OneDriveからExcelのファイルをアップロードします。

画面上部にある「アップロード」をクリックし「ファイル」を選択します。

 

次にご自身がPCなどに保存している「フォルダ」から「ファイル」をクリックし表示されてる画面右下にある「開く」ボタンをクリックします。

その他にも下記の通りOneDriveにアップロードしたり、保存する方法もあります。1.Excelを保存する時にExcelの「名前を付けて保存する」の画面からOneDriveに直接保存する。

2.お使いのデバイスにOneDriveアプリがある場合は直接OneDriveに保存する。

3.お使いのデバイスからOneDriveにドラッグする。

 

OneDriveから埋め込みコードを取得する

次にアップロードしたファイル右上にある「◯をクリック」すると◯の部分にチェックマークが入りますのでその後「</>埋め込み」をクリックします。

すると、下画像のように緑点線内に埋め込みを生成する画面が表示されますので「生成」ボタンをクリックします。

 

次に、埋め込み生成されたコードをクリックすると下画面のようにコードの背景色が青色に変わります。青色に変わったのを確認し、ショートコードの「Ctrl＋C」を使ってコピーするか、埋め込みコードが書かれているところで右クリックし、表示されたメニューの中からコピーをクリックします。

 

WordPressやblogに埋め込みコードを貼り付ける

さぁ❢いよいよWordPressやblogに埋め込みコードを貼り付けます

WordPressの場合

新規で作成するなら「ダッシュボード」→「投稿」→「新規」

現在投稿及び編集しているページに追加する場合は「ダッシュボード」→投稿→「投稿一覧」の中から編集したいページの「編集」をクリックし投稿したいページを表示します。

WordPress投稿画面右上にある「テキスト」をクリックし「Ctrl＋C」で貼り付けます。

幅や高さを調整したい時は、 width=”500″ height=”400″ の数値の部分を好みの大きさになるように変更します。

 

 

blogなどのwebページの場合

投稿画面の「テキスト」や「html」のタブをクリックして埋め込みコードを貼り付ければOKです。←htmlが記入できるところ❢と覚えておくと良いでしょう。

OneDrive経由で表示する時のまとめ

1.OneDriveに表示したいファイルをアップロードするか保存する。

2.表示したいファイルの右上にある◯をクリックしチェックをONにする。

3.OneDrive上部にあるメニューバーから「</>埋め込み」をクリックし、「生成」ボタンをクリックし、コードをコピーする。

4.ブログやWebページのhtml形式ノページに貼り付ける。

 

どうでしたか？無事表示できましたか？

サーバーにアップロードする方法

 

今回は、Excelをhtml形式で保存したファイルを「ドメイン名/関数一覧表.html」というアドレスにアクセスしてExcelを表示させる方法をご紹介します。

2018/5/22追記します。
Search Console モバイルフレンドリーテストでこのページはモバイル フレンドリーではありませんと怒られてしまったので、ファイルの横幅を短くし修正したものに変更しましたので現在のアドレスは「ドメイン名/excel1.html」になっています。

 

実際の表示例

↓　↓

　←画像にリンクして表示　したり、

関数一覧表　←文字にリンクをして表示ができます。

※Excelの詳しい保存方法は、前回の記事「初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法」の「2.Excelファイルをhtml形式にして保存する」で説明していますのでご覧になってください。

それでき、まず・・・

Xサーバーのログインからファイルマネジャーをクリックします。

次にユーザー名とパスワードを入力しログインをクリックします。

するとドメインを登録しているファイルが一覧で表示されますので、アップロードするドメインのファイルをクリックします。

するとxsever WebFTP というページが開き、ドメインをとったファイル名が表示されます。

 

 

すると下の画像のようにファイルの中にpubric.htmlというファイルがあります。

これがWordPressがインストールされているファイルになりますので「pubric.html」をクリックします。

 

次に表示された画面の右上にパス名が「ドメイン名pubric_html」となっているのが確認できると思います。

次にファイル選択をクリックします。

 

すると一覧で表示されるのでアップロードするファイルをクリッします。

今回アップロードするのは「関数一覧表」ですので

「 関数一覧表.html」をクリックします。

 

すると下の画像のようにファイルを選択の横に関数一覧.htmlと表示されているのが分かると思います。

次に、このファイルを保存した時文字コードを「UTF-8」で保存していますので文字コードを「UTF-8」にします。その後「アップロード」のボタンをクリックします。

これでサーバーにアップロードが完了できました。

後は、WordPressなどの投稿記事に画像や文字を入力しリンクを「ドメイン名/ファイル名」に設定すればOKです。

 

もし、下の画像のようにExcelをwebページとして保存した時にfilesのフォルダーとhtmlのファイルが同時にできた場合は、xサーバーのpubric_htmlの中に(pubric_htmlを開いた状態で)

1.「Excelデータベース関数・・・・files」の名前のファルダを作ります。

2.作ったfileフォルダの中にpcなどのデバイスからフォルダの中身を全てアップロードします。

3.htmlファイルは、pubric_htmlを開いた状態でアップロードします。

4.関連付けるリンクは「ドメイン名.com/Excel・・・・.html」ファイル名にします。

参考例・・・私のドメインはhttps://暮らしのハンドノート.comですので、下の画像をそままアップロードした場合は、「https://暮らしのハンドノート.com/Excelデータベース関数バージョン適用対象表.html」となりこれをリンク先に設定します。

 

補足:Excelを「.xls」や「.xlsx」のファイル形式のままアップロードするには、XサーバーでMINE設定をする必要があります。

Windows Server 2003 Service Pack 2 (SP2) 以降のバージョンでは自動的に登録されますがXサーバーはLinuxの為xサーバーのMINE設定が必要になります。

MIne設定をすることによりサーバー側で新しいファイル形式が認識されるようになります。

MINE設定とは、インターネットで使用される拡張子とファイルの種類を関連づけるもので、サーバーとファイルを関連付ける役目を果たします。

MINEタイプを設定する場合はご参考に❢

↓　　↓　　↓

MINEタイプ 拡張子 アプリケーション
application/msword .doc Microsoft Word2003以前
application/vnd.ms-excel .xls Microsoft Excel2003以前
application/vnd.ms-powerpoint .ppt Microsoft Powerpoint2003以前
application/vnd.openxmlformats-officedocument.wordprocessingml.document .docx Microsoft Word2007以降
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xlsx Microsoft Excel2007以降
application/vnd.openxmlformats-officedocument.presentationml.presentation .pptx Microsoft Powerpoint2007以降

 

WordPressの投稿記事に表示させる方法

WordPressのメディアにアップロードする方法

表示方法は、サーバーにアップロードした時と同じになりますが、これはかなり簡単です。

出来上がりの表示はこんな感じです。

↓　↓　↓

 ←エクセルの画像をupし画像にリンク先を設定しています

データベース関数適応対象表 ←文字を入力しリンク先を設定しています。

 

まず、wordPressの「ダッシュボード」→「メディア」→「新規追加」の順にクリックすると「ドロップするかファイルを選択する」ようになってますので今回は複数のファイルをまとめてアップロードしたいので、「ドロップ」します。

アップロードするファイルは、filesのフォルダの中の3つのファイルと

 アイコンの付いたhtmlファイル1つです。

まずフォルダをダブルクリックして、開きます。

すると下のようなファイルがありますので「.xml」以外のファイルを全て選択し、WordPressにアップロードします。

次に アイコンが付いたhtmlのファイルもアップロードします。

これで必要なファイルはアップロードできましたので

WordPressのダッシュボードに戻り「メディアファイル」→「ライブラリ」の順にクリックすると最後にアップロードした  アイコンのファイルが変わり<>表示されていますので「編集」をクリックします。

すると、アップロードしたファィルのURLが下の画像のように表示されますので、このURLをコピーし投稿記事のリンク先に設定します。

 

どうでしたか？案外簡単でしょ(*^^*)

 

WordPressの1記事にcssを適応させ記途する方法2選

投稿記事のみに全てのソースコードをコピペして投稿する

この記事を使った場合は下の表のようになりますがCSSを<style>~</style>で囲ってhtmlの中に入力しているので、どうやら非推進のようです。
↓↓↓

関数名 Windows版 Mac版 Online iPad iPhone Android Mobile Starter 2010
2016 2013 2010 2007 2003 2016 2011
DAVERAGE ○ ○ ○ ○ ○ ○ ○ ○ ○
DCOUNT ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DCOUNTA ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DGET ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DMAX ○ ○ ○ ○ ○ ○ ○ ○ ○
DMIN ○ ○ ○ ○ ○ ○ ○ ○ ○
DPRODUCT ○ ○ ○ ○ ○ ○ ○ ○ ○
DSTDEV ○ ○ ○ ○ ○ ○ ○ ○ ○
DSTDEVP ○ ○ ○ ○ ○ ○ ○ ○ ○
DSUM ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DVAR ○ ○ ○ ○ ○ ○ ○ ○ ○
DVARP ○ ○ ○ ○ ○ ○ ○ ○ ○
GETPIVOTDATA ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

この表示方法は前回投稿していますのでご覧になってください。

↓　↓　↓

 

初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法


WordPressのカスタムフィールドを使用し投稿する方法

以前プラグインのSimple Custom CSSを使用していて、cssの反映が上手くできなかったこともあり、Excelのcssを反映させるたびに追加cssなどを使っても・・と思い個別にcssが設定できないか検索してたところNaifixさんの「WordPressで記事ごとに個別のCSSを設定する方法3選」という記事に出会いました。

その記事の中からプラグインを使わずカスタムフィールドを利用する方法をそのまま使わさせて頂きました。Naifixさんありがとうございます＼(^o^)／

header.php に追記する

header.php に書かれている <head> ～ </head> に以下のコードを追記します。

コードの意味は、「記事ページであれば article_css という名前のカスタムフィールドに書かれた値を出力しますよ」というものだそうです。

2021.1.23追記します。
header.phpの上記コードに修正点がありました。
コードは以下のコードを参照してください。

詳しくはこちらで説明しています
↓　　　　　↓

WordPressで「Warning: Use of undefined constant article_css – assumed ‘article_css’」と表示された際の対処方法

カスタムフィールドを表示する

WordPressの「投稿」画面上に表示されている「表示オプション」をクリックし、「カスタムフィールド」にチェックをいれます。

すると投稿画面下にカスタムフィールドが使用できるようになっていますので「新規追加」をクリックします。

次に名前の欄に「article_css」と入力し、値の欄にCSSを入力する準備ができましたので次はCSSをこの値の欄に入れる為の準備をします。

※Excelの詳しい保存方法は、前回の記事「初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法」の「2.Excelファイルをhtml形式にして保存する」で説明していますのでご覧になってください。

 

cssとhtmlの整理をする

まず、webページしとて保存したfilesフォルダを開くと4つのファイルができています。今から使うのは「sheet001.html」と「stylesheet.css」のファイルです。

『sheet001.html』のファイルをダブルクリックで開くとwebページが開きますのでwebページ上で「右クリック」し、「フレームのソースを表示」をクリックします。

下の画像のようにこのフレームのソースが表示されますのでショートカットキーの「Ctrl＋A」で全て選択し「Ctrl＋C」でコピーします。

このソースをWordPressの画面に戻り投稿記事の「テキスト」に全て貼り付けます。

※TeraPadやメモ帳などに貼り付けて必要なソースだけをWordPressに貼り付けてもいいでしょう。

次に、少し下の方にいくと、</style>があります。その直前に「－－＞」がありましたらこの前にカーソルをあわせて不足しているCSSのコードを貼れる準備をします。

</style>はCSSコードの終わを示します。

 

次に、filesフォルダの中にある「stylesheet.css」のファイルをダブルクリックで開きます。

するとメモ帳などで開かれますので、これもショートカットキーの「Ctrl＋A」で全て選択し「Ctrl＋C」でコピーします。

次にWordPressの投稿画面に戻り下画面の位置「－－＞」の直前にカーソルをあわせた状態でCSSをショートコードの「Ctrl＋V」で貼り付けます。

 

Excelのcssをカスタムフィールドにコピペする

CSSとして必要なのは<style>~</style>の間です。

先程wordpressの投稿記事に貼り付けた中からこの部分を切り取りカスタムフィールドに貼り付けます。

現在wordpressの投稿記事にあるのは下記コードですね。

CSSとして必要なのは、このコードの中で14~274行目になります。

では、必要なコードをコピーし、切り取りしカスタムフィールドに貼り付けしてみましょう。

スカタムフィードに貼り付けるのは上記コードの中から<table~</table>までのコードなので、下記コードですね。

カスタムフィールドの「値」の欄に貼り付けが終わりましたら、「カスタムフィールドを追加」ボタンをクリックします。

これでCSSの入力は完了です。

WordPressの投稿記事に残っているコード内で不要なコードを削除する

それでは不要なコードを削除していきましょう。

Excelの表を記載するので、htmlとして必要なのは、基本的に<table>~</table>までなのですが、その中でも不要なコードがあります。

から始まっているコードで「サポートされていない場合は次の処理をしなさい!という条件式」です。

調べてみたところJavaScriptを使用したdisplayのコードでhtmlには不要なコードなので下記条件式のコードは削除します。

次に不要なコードは、一番上の

から始まり

で終わる間までの下記コードですので、このコードも削除します。

残りは、一番最後の</body>と</html>ですのでこのコードも削除します。

※<html と<body で始まるソースは削除してますので終わりの</html>と</body>も不用です。

後残ったコードは<table ~</table>までの下記コードですね。

 

すると下表のように表示されます。

↓　↓　↓

関数名 Windows版 Mac版 Online iPad iPhone Android Mobile Starter 2010
2016 2013 2010 2007 2003 2016 2011
DAVERAGE ○ ○ ○ ○ ○ ○ ○ ○ ○
DCOUNT ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DCOUNTA ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DGET ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DMAX ○ ○ ○ ○ ○ ○ ○ ○ ○
DMIN ○ ○ ○ ○ ○ ○ ○ ○ ○
DPRODUCT ○ ○ ○ ○ ○ ○ ○ ○ ○
DSTDEV ○ ○ ○ ○ ○ ○ ○ ○ ○
DSTDEVP ○ ○ ○ ○ ○ ○ ○ ○ ○
DSUM ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DVAR ○ ○ ○ ○ ○ ○ ○ ○ ○
DVARP ○ ○ ○ ○ ○ ○ ○ ○ ○
GETPIVOTDATA ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

どうでしたか？カスタムフィールドからCSSが設定できれば、個別に記事のスカタマイズもできるので便利ですね。

この記事が参考になったという方はポチッと応援お願いします。

↓　　　↓

にほんブログ村 IT技術ブログ WordPressへ

投稿日:

初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法

WordPressで表を作る時間がもったいないと思ったことありませんか？

Excelからhtmlに出来ればできれば簡単なのでhtmlやcssの知識がなくても大丈夫!(^^)!

今回は、Excelの機能とWordPressの機能をそのまま使ってExcelでの表作成以外のほとんどがコピペだけでWordPressの投稿記事『1記事』に適応させる方法をWordPress初心者でもExcel初心者でもわかりやすいように説明します。

初心者の方は、画像に沿って説明していますのでExcel2003の場合とExcel2016の場合をご覧になって下さい。

全バージョン共通では、ショートカットキーを含め文字のみでの説明にしています。

表示されている目次で理解できる方は目次を参照して下さい。

作成した環境：Excel2003=Windows7・Excel2016=Windows10で、WordPressはTwenty Seventeenです。

Excelの設定

1.Excelのワークシート内に含まれるふりがなを一括削除する

Excelにふりがなが表示されていない場合でもhtml側では、入力時にフリガナがExcel中に保存されていますのでふりがなを一括で削除します。

ふりがな付きＯＫの場合は、この項目は飛ばしてください。

 

Excel2003の場合

ワークシート内を全選択する

下画像の左上の□の部分をクリックすると全選択できます

 

すると下の画像のようにワークシート内が全て選択されます

 

 

コピーする

ツールバーにある「コピー」ポタンをクリックします。

 

 

すると下の画像のようにコピーされます。

 

 

新しいワークシートに数式を貼り付ける

①「新しいワークシート」を選択します

②ツールバーの「貼り付け」アイコン右横にある「▼」をクリック

③「形式を選択して貼り付け」をクリック

すると下の画像のようにポップアップウインドウが表示されますので「数式」を選択して「OK」ボタンをクリックします。

 

すると下の画像のように文字のみコピーされますが、書式がまだコピーされていませんので今度は書式をコピーします。

数式を貼り付けたワークシートに書式を貼り付ける

もう一度ツールバーにある貼り付けアイコン右側にある「▼」をクリックします。

次に「形式を選択して貼り付け」をクリックし、今度は「書式」を選択し「ＯＫ」ボタンを押します。

 

これで、元のデータと同じ表示になりましたね。

これでExcelのワークシート内に含まれるふりがなは削除されましたので、Excelをhtml形式に変換した時にふりがなは記途されません。

ワークシートの削除と名前の変更

適応対象表はExcelの中にふりがなが存在するので「適応対象表の見出しを右クリック」→「削除」で削除します。

Sheet3はデータが存在しないワークシートなので「sheet3の見出しを右クリック」→「削除」で削除します。

sheet2はwebで使用するシートなので「sheet2の見出しを右クリック」→「名前の変更」で見出しの名前を変更します。

 

次はExcelのデータをhtml形式に変換します。

 

Excel2016の場合

ワークシート内を全選択する。

下の画像のように全セル選択ボタンをクリックします。


すると下の画像のようにワークシート内が全て選択されます。

コピーする

・「ホーム」タブにある「コピー」アイコン右横にある「▼」ボタンをクリックし「コピー」をクリックします。

すると下の画像のように全てコピーされます。

 

新しいワークシートを追加する

シートを追加するには下の画像の、エクセル画面の下にある「＋」の部分をクリックします。

 

すると新しいワークシート「sheet1」が下の画像のように追加されます。

 

新しいワークシートに数式を貼り付ける

「ホーム」タブから「貼り付け」下にある「▼」をクリックして選択し、貼り付けの中にある「数式」ボタンをクリックします。

 

別の方法として、「ホーム」タブから「貼り付け」下にある「▼」をクリックして選択し、「形式を指定して貼り付け」をクリックします。

 

するとポップアップウインドウが表示されますので、そのメニューの中にある「数式」ボタンをクリックして「ＯＫ」ボタンをクリックします。

 

すると下の画像のように数式が貼り付けられます。

これではまだ未完成なので次に書式を貼り付けます。

 

書式を貼り付ける

数式を貼り付けたワークシートにもう一度「ホーム」タブから「貼り付け」の「▼」をクリックして選択し、その他の貼り付けオプションの中にある「書式設定」ボタンをクリックします。

 

別の方法として、「ホーム」タブから「貼り付け」下にある「▼」をクリックして選択し、「形式を指定して貼り付け」をクリックします。

 

するとポップアップウインドウが表示されますので、そのメニューの中にある「書式」ボタンをクリックして「ＯＫ」ボタンをクリックします。

 

すると下の画像のように書式が貼り付けられます。

これでExcelのワークシート内に含まれるふりがなは削除されましたので、Excelをhtml形式に変換した時にふりがなは記途されません。

ワークシートの削除と名前の変更

適応対象表はExcelの中にふりがなが存在するので「適応対象表」の見出しを右クリック→「削除」で削除します。


すると下の画像のように「このシートは完全に削除されます。続けますか？」と確認のメッセージが表示されますので「削除」をクリックします。


次にsheet1はwebで使用するシートなので「sheet1」の見出しを右クリック→「名前の変更」で必要に応じて見出しの名前を変更します。


次はExcelのデータをhtml形式にします。

 

全バージョン共通

ワークシート全体を選択します。

ふりがなを削除したいワークシートを選択し

Ctrl＋Ａを押すとアクティブ セル領域が選択されます。

もう一度Ctrl＋Aを押すとワークシート全体が選択されます。

 

コピーする

次に、ワークシートをコピーします。

ショートカットキーのCtrl＋Ｃを押します。

 

新しいワークシートを追加する

選択したシート見出しをマウスの右ボタンでクリックして、[挿入] をクリックします。次に、[標準] タブの [ワークシート] をクリックし、[OK] をクリックします。

※始めから何も入力のないワークシートがある場合は追加の必要はありません)Sheet2などの未入力のワークシートを使います。

数式を貼り付ける

新しいワークシート(セルがＡ1に選択されている状態）でマウスの右ボタンでクリックして「形式を指定して貼り付け」→「数式」を選択し「ＯＫ」を押します。

これで文字データのみコピーされました書式がまだ貼り付けられてませんので今度は、書式を貼り付けます。

書式を貼り付ける

数式を貼り付けたワークシート(セルがＡ1に選択されている状態）でもう一度、マウスの右ボタンでクリックして「形式を指定して貼り付け」→Excel2003=「書式」Excel2007以降「書式設定」を選択し「ＯＫ」を押します。

これで入力したデータと同じように表示されます。

ワークシートの削除と名前の変更
  • 必要のないワークシートは、「見出しを右クリック」→「削除」で削除します。
  • Webに使用するワークシートは「見出しを右クリック」→「名前の変更」で必要に応じて名前を変更します。

 

Excelのふりがなを一括で削除する時のまとめ

１．ふりがなを削除したいワークシート全体をコピーし新しいワークシートに「数式」を貼り付けし、「書式」もしくは「書式設定」のいずれか表示される方を貼り付ける。
２．必要のないワークシートは削除し、Webで使用する新しく作成したワークシートは必要に応じて名前の変更をする。

 

2.Excelファイルをhtml形式にして保存する

Excelの機能として従来からあった「webページとして保存」の機能を使用します。

Excel2003の場合

ブラウザでプレビュー

Excel2003ではブラウザでプレビューする機能がありますのでメニューバーの「ファイル」をクリックし「ブラウザでプレビュー」をクリックします。

ブラウザでどのように表示されるのか、プレビュー機能を使用して確認しておきます。この段階で修正がある場合は、修正しておきます。

修正する箇所としては、主にExcelの全体の記事の幅がWordPressの投稿記事幅になるように設定します。

Excelの幅が大きすぎてWordPressの投稿記事に入らない場合は、セルの書式設定などを利用して、Excelの列幅を小さくし全体を表示できるように調整します。

セルの書式設定方法

まず、調整したい列をクリックします。ここではA列を調整しますので「Ａ列」をクリックします。

次にマウスの右ボタンをクリック(右クリック)し、次に「セルの書式設定」をクリックします。

 

すると下の画像のようにダイヤログボックスが表示されますので「配置」のタブから「折り返して全体を表示する」をクリックして「ＯＫ」ボタンをクリックします。

その他の方法として、文字を小さくしたり、字体を変更するのも一つの方法です。
Webページとして保存する

いよいよExcelファイルをWebページとして保存します。

メニューバーの「ファイル」をクリックし「Webページとして保存」をクリックします。

すると下の画像のような画面が表示されますので画面右上にあるツールの「▼」ボタンをクリックし「Webオプション」をクリックします。

すると下の画像のようにWebオプションが表示されますので、「エンコード」タブをクリックし「このドキュメント保存する形式」の「▼」をクリックし表示されるエンコードの中から「Unicode(UTF-8)」を選択し「OK」ボタンをクリックします。

次に、①保存先のフォルダを「▼」から選択します。

ちなみに、私はExcelMyStyleと名前を付けてフォルダを作成し保存しています。

②上書き保存を「ブック全体」を選択します。

③ファイル名の拡張子に「～.html」

④ファイルの種類を「▼」から「webページ(*htm *html)」を選択し

⑤「保存」をクリックします。

すると保存したフォルダの中に下の画像のようにChromeのアイコンができます。

さぁ❢いよいよWordPressに投稿です。

もう少し頑張って～(*^^*)

Excel2016の場合

WEBページとして保存する

「ファイル」タブをクリックします。

 

次に「名前を付けて保存」をクリックし、保存するフォルダを指定します。

 

 

次に、画面下にある「ツール」の「▼」から「webオプション」を選択します。

すると下の画像のようにWebオプションが表示されますので、「エンコード」タブをクリックし「このドキュメント保存する形式」の「▼」をクリックし表示されるエンコードの中から「Unicode(UTF-8)」を選択し「OK」ボタンをクリックします。

 

ファイルの種類の「▼」から「webページ」を選択します。


次に、ファイル名の語尾に拡張子の「.html」を入力し、「ブック全体」を選択し「保存」をクリックします。


すると下の画像のように「Webぺージとして保存する場合、ブックの一部の機能が失われる可能性があります。この形式でブックを保存しますか？」とメッセージが表示されますので「はい」をクリックします。


すると「ファイル名.files」というフォルダとフォルダの下にHTMLファイルができます。


保存した時にフォルダが作成されずにGoogleのアイコンの付いたファイル「ファイル名.html」が1つだけ表示された場合はWordPressの投稿はExcel2003の場合を参照してください。

さぁ❢いよいよWordPressに投稿します。もう少しですよ(*^^*)

WordPressに投稿

Excel2003の場合(Google Chromeのアイコンが表示されたファイルのみの時)

先程できたChromeのアイコン をダブルクリックします。
すると下の画像のようにWebとして表示ができます。


次にこのwebページ上で右クリックし「ページのソースを表示」をクリックします。※ショートカットキーの「Ctrl＋U」でもOKです。


すると下の画像のようにソースが表示されます。

上の画像と下のソースでは色は異なりますが全てのソースを下に表示しています。

表示されたソースを「Ctrl＋A」で全て選択し、「Ctrl＋C」でコピーします。

 

次にWordPressの「ダッシュボード」→「投稿」→「新規追加」の順にクリックします

 

投稿記事のテキストに「Ctrl＋V」で貼り付けます。

 

 

これからWordPressでちょっとおまじないをします。

先程「テキスト」モードに貼り付けましたね。これを一旦「ビジュアル」モードにすると不要な文字が表示されます。でも、この不要な部分を今から削除するので大丈夫です。

 

 

それでは、もう一度「テキスト」モードしてください。

すると下のコードのように1行目~12行目が削除され、cssコードが一行にまとめられているのがわかると思います。

これで少しはいらないソースがなくなりましたね。

後2箇所不要なコードがありますので削除します。

 

削除する行としては、下のコードでは

1行目~21行目

27行目~86行目

になります。

必要となるのは、

23行目<style>~25行目</style>までがcssの部分で必要となる部分。

87行目の<table style~334行目の</table>までがhtmlで必要となるコードです。

これでWordPressの投稿を一旦保存し、プレビューしてみてください。

どうでしたか？無事成功しましたか？

Excel2016の場合(フォルダとhtmlのファイルが構成された時)

先程webページとして保存したフォルダの「.files」が付いたフォルダをダブルクリックします。

 

すると次の「filelist」「sheet001」「stylesheet」「tabstrip」という名前のファイルが4つあります。

この中でWordPressに使用するのは「sheet001」と「stylesheet」です。

まずは、「sheet001」を右クリックし、表示されたメニーの中から「プログラムから開く」の「＞」にポンイターを当て「Google Chrome」をクリックします。

するとExcelで作成したファイルがwebで表示されのすので、表示されたwebで右クリックし「フレームのソースを表示」をクリックします。

すると下のようなソースが表示されます。

この時表示されたソースを「Ctrl＋A」で全て選択し、「Ctrl＋C」でコピーします。

次にWordPressの「ダッシュボード」→「投稿」→「新規追加」をクリックします。

次に「テキストモード」にし投稿記事に「Ctrl+V」で貼り付けします。

次に、一度Excelのフォルダに戻り今度は「stylesheet.css」をタブルクリックします。

すると下記のようなcssコードがメモ帳で開きます。開いたファイルを「Ctrl+A」で全て選択し先程WordPressの投稿記事に貼り付けた画面に戻ります。

WordPressに貼り付ける場所としては、下の画像のように　–> の直前になりますので「display:none;}」の後で改行し空白行を追加した後、ショートカットキーの「Ctrl+V」で貼り付けます。

 

次にWordPressの投稿記事を一旦「ビジュアル」モードにします。

 

次に「テキスト」モードにして先程表示されてた不要な部分を削除します。

</style>~<table までがWordPressでは不要な部分になります。

これでWordPressの投稿を一旦保存し、プレビューしてみてください。

どうでしたか？無事成功しましたか？

 

WordPreesに投稿する時のまとめ

<style>～</style>=css　※フォルダで作成されたら–>の直前にcssを貼り付ける　

<table>～</table>=Excelで作った表のhtml   と覚えておくと良いでしょう。

 

長くなりましたので、OneDriveで表示する方法は次回にさせて頂きます。ご了承くださいm(_ _)m

にほんブログ村 IT技術ブログ WordPressへにほんブログ村 IT技術ブログへ