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

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

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

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

みたいなのもありますよね、、、アメブロとかの無料ブログだと、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
岡山市のパソコン教室 スマホでCSS変換sそそnそのそ1

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

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

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

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

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

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

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

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

4.【WEB】に戻り

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

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

5.【アメブロアプリ】

box10 の箇所に貼り付け

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

6.【WEB】に戻り

box10 p の部分

中身をコピーします。

こちらも全部です。

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

7.【アメブロアプリ】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こんな感じになります。

このコードは?

<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://lin.ee/jDgHyR”

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

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

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

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

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

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

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

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

岡山市北区のキュリオステーション岡山店
岡山県内でパソコン・プログラミング教室をお探しなら岡山市北区のキュリオステーション岡山店へ、パソコンやスマホ、プログラミングのスキルアップに、園児から通えるロボット教室、英語教室など楽しくスキルアップできる地域に愛される教室を目指しています
岡山市北区の初心者向けパソコン教室「キュリオステーション岡山店」
岡山でパソコンを楽しく学ぶならワクワク感満載の岡山市北区のキュリオステーション岡山店へ、パソコンの便利な使い方など、使えるようになるとパソコンをさわるのが楽しくなると好評です。よくわかると好評の岡山市北区のパソコン教室へ相談にお越しください。
岡山市北区のプログラミング教室「キュリオステーション岡山店」
岡山でパソコン・プログラミング教室をお探しなら、キュリオステーション岡山店へ、岡山地域で一番の問題解決力「私には解りやすかった」との感想が多い岡山市北区のプログラミング教室です。驚きの回答と効率よい学び方の相談などお気軽にお問い合わせを!!
岡山市北区~ヒューマンアカデミーロボット教室~【岡山表町教室】
岡山でロボット教室|ロボットプログラミング教室をお探しなら、岡山市で発想力と応用力を養う習い事と話題のヒューマンアカデミーロボット教室「岡山表町教室」へ。準備も片付けも自分で!普段見られない姿が見られるロボット・ロボットプログラミング教室
岡山市北区のこども英会話教室【岡山表町教室】
岡山で子ども向け英語教室・英会話教室をお探しなら、岡山市北区の恥ずかしがり屋な子ども向け英語・英会話教室ヒューマンアカデミージュニアランゲージスクール岡山表町へ、外国人講師と楽しくオンラインで英会話を楽しみながら英語を学ぶ英会話教室です。

岡山市のパソコン・プログラミング教室の料金設定

 

パソコン・スマホのスキルアップなら、岡山市北区のパソコン教室「キュリオステーション岡山店」
通いやすい仕組みの料金設定にしています。

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