お問い合わせ

TEL:086-206-5592

WEB:WEB予約

スマホ活用便利技!!スマホで魅せるブログの作成方法

岡山市のパソコン教室 パソコン お知らせ

岡山市で「解りやすい説明ですね」「間違い探すの早いですね」とよく言われるパソコン教室【キュリオステーション岡山店】では、スマホだけで、ブログ投稿する技も公開しています。

こんなのスマホでどうやって書いてるんだ?

みたいなのもありますよね、、、アメブロとかの無料ブログだと、CSSも独自で作れないですし・・・

※パソコン用のカスタマイズ可能CSSには追記できますが、スマホ向けと連動しておらず、スマホで見ると別物になります。

っと、いった結果になったので、CSSをあきらめて、、、HTMLで作る方法をまとめました。

アメブロさん記事でも公開してますが、、、消えてもいいように残しておきます。

 

知っておくとよいタグの話

岡山市のパソコン教室 パソコン

HTMLを記述するのに、知っておくべき基本的なタグ

<div> ・・・ 範囲指定
<p> ・・・ 段落指定
<span> ・・・文字指定みたいなイメージ

<a href> ・・・ リンクさせる
<img> ・・・ 画像を表示する

 

範囲指定ですので、開始~終了となります。
<div>~</div>
/スラッシュ付きが終了の意味合いです。

 

リンクを作る場合のURLは、コピペして作ること
間違いなくできるので・・・

 

※「リンクって何?」「コピペって?どうやって何をコピペするん?」ってなる人のことは考えていない記事です。
すいません。操作が解らない場合は、それぞれの機種で探して下さい。

 

綺麗な枠をCSSを使わずにHTMLでつくってみよう!!

CSS用のデザインコードがあるサイトより

コピペ作成してみましょう。

検索すると、いろいろ出てきます。

 

CSSで組み込むか、CSSを元にして、HTMLで記述するか?

アメブロでは、アプリ用のCSS編集ができないので、HTMLで作る例です。

 

パソコンで見る場合は、デザインでCSS編集可能なデザインを選ぶと、

CSS編集できますけど、アプリ向けは、別っとなっている状況ですので・・・

パソコンで記事を書く場合も、同じような作業となります。

 

 

1.サイトに行き、デザインを選択

岡山市のパソコン教室 スマホでCSS変換1

 

2.コードを見て、HTMLサンプルをコピー

岡山市のパソコン教室 スマホでCSS変換2

div と P タグをコピーします。

 

3.アメブロアプリの記事にて、タグの編集を開いて、貼り付け

※複数アプリの切り替えが必要です。

岡山市のパソコン教室 スマホでCSS変換3

メモアプリなどでも可能です。

Windows での「メモ帳」の代わりになるアプリケーションを使うと使いまわしできます。

 

4.【WEB】に戻り

box10の内容を選択しコピー
画面上切れてますが全部ですよ!!

岡山市のパソコン教室 スマホでCSS変換4

 

5.【アメブロアプリ】

box10 の箇所に貼り付け

岡山市のパソコン教室 スマホでCSS変換5

 

6.【WEB】に戻り

box10 p の部分

中身をコピーします。

こちらも全部です。

岡山市のパソコン教室 スマホでCSS変換6

 

7.【アメブロアプリ】

<P のあとに、貼り付けし、コードを綺麗に整形していきます。

/*~~*/ ← コメントなので削除

<div class の箇所を style= を先頭に付け、最後に”ダブルクォーテーションで囲みます。

岡山市のパソコン教室 スマホでCSS変換7

 

<p の後ろにも、style= を付け、”ダブルクォーテーションで囲み

「ここに文章」の箇所に表示させたい言葉を書きます。

岡山市のパソコン教室 スマホでCSS変換8

 

8.通常の入力画面に戻ると、、、

綺麗に枠が出ていれば正解、、、間違えると出てきません。

岡山市のパソコン教室 スマホでCSS変換9

 

簡単な操作。コピペ作業で出来上がりです。

 

後は、このコードを保存しておき、

コピペ作業で使いまわしするとか、

この記事から必要な部分をコピペして使うとか

アメブロだと下書き保存できるので、下書きとして残しておくことも可能です。

 

こんな感じになります。

このコードは?

<div style=”padding: 0.5em 1em; margin: 2em 0; color: #00bcd4; background: #e4fcff; border-top: solid 6px #1dc1d6; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);”>
<p style=”margin: 0; padding: 0;”>こんな感じになります。</p>

 

同じ作業で、見出しもできます。

見出しの場合は、

Html だけで記述もできますし、

CSSを使って統一することもできます。

 

LINE@の友達追加ボタンの画像を変える

LINE@とかされている方へ

LINE@のこのボタン
友だち追加

綺麗な画像付きのボタンに変えている人って見かけますよね

でも、押すと、同じ画面に遷移します。

 

どうやるの?

 

コードは、こんな感じです。

<a href=”https://lin.ee/jDgHyR“><img src=”https://scdn.line-apps.com/n/line_add_friends/btn/ja.png” alt=”友だち追加” height=”36″ border=”0″></a>

https://scdn.line-apps.com/n/line_add_friends/btn/ja.png

https://scdn.line-apps.com/n/line_add_friends/btn/ja.png

この分部を変えるか?

https://lin.ee/jDgHyR

こっち側を変えるか? となります。

 

アメブロで作業する場合は、

1.画像を記事に貼り付け、いったん保存、

2.再度開いて、タグの編集画面を開く

3.Https:の箇所を変える。

 

href の 部分がリンク先のアドレス

img src の部分が、画像の保存先となります。

この関係が理解できると、それほど難しい作業ではないでしょう。

 

岡山市北区のパソコン・プログラミング教室、ロボット教室、英語教室
岡山でパソコン・プログラミング教室をお探しなら岡山市北区のキュリオステーション岡山店へ、大人から子どもまでパソコンやスマホ、プログラミングのスキルアップに、園児から通えるロボット教室、英語教室など楽しくスキルアップできる地域に愛される教室を目指しています
岡山市北区のマンツーマン個別指導型パソコン教室
岡山でパソコン・プログラミング教室をお探しなら、「解りやすい説明でした」との感想が多い岡山市北区のパソコン・プログラミング教室【キュリオステーション岡山店】へ、気軽にスマホのことも相談できる教室です。無料体験・無料相談も随時しています。
岡山市北区のマンツーマン個別指導型プログラミング教室
岡山でプログラミング教室をお探しなら、岡山市北区地域で一番の解決力「問題解決するの早いですね!!」とよく言われるプログラミグ教室「キュリオステーション岡山店」へ、驚きとワクワク感のある無料体験も随時募集中です。楽しくプログラミグを!!
岡山市北区のロボット教室&ロボットプログラミング教室【岡山表町教室】
岡山でロボット教室|ロボットプログラミング教室をお探しなら、岡山市で発想力と応用力を養う習い事と話題のヒューマンアカデミーロボット教室「岡山表町教室」へ。準備も片付けも自分で!普段見られない姿が見られるロボット教室
岡山市北区の恥ずかしがり屋な子ども向け英語|英会話教室
岡山でこども英語教室をお探しなら、岡山市北区のシャイで恥ずかしがり屋な子ども向け英語|英会話教室「ヒューマンアカデミーランゲージスクール岡山表町教室」へ、英会話スクールと英語塾のいいとこ取りの仕組みとなっています。気になりましたら無料体験をご予約下さい。
岡山市北区のパソコン教室で安い料金ですねとよく言われる理由
岡山でパソコン教室をお探しなら、岡山市北...

 

コメント

タイトルとURLをコピーしました