アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

便利な紹介ツール・ヨメレバを使ってみました!

f:id:simpledancer:20180215105028j:plain


ブログにアフィリエイトリンクを貼ったりしてる人はご存知だと思いますが

ヨメレバ・カエレバ。

f:id:simpledancer:20170306125547p:plain

こういうやつ↑

他の方のブログでどうやってやるのかな〜と気になっていたもののずっとカスタマイズせずに放置していたんですが、やっと重い腰をあげました。

書籍紹介ブログパーツ ヨメレバ

ちなみに最近はRubyの勉強は滞り中。

大会終わったらまた復活しようかなと。

ヨメレバ作製法の流れ

  1. 楽天、amazonのみ私は作成します。のでそれぞれのアフィリエイトのIDを取得しておきます。
  2. http://yomereba.com/に移動して、取得したIDを入力します。

  3. 情報を保存したらそのまま本のリンクを作成するために、紹介したい本のJanコードを調べてコピペ、貼り付け。
  4. 生成されたリンクを自身のブログのhtmlに貼り付けます。

ブログ自体のcssのカスタマイズ

  1. 管理>デザイン>デザインcssにカスタマイズのcssを貼ります。こちらのサイトからコピペさせていただきました!

    www.ituore.com

  2. はてなブログProの方はスマホ版もカスタマイズできます!スマホマーク>記事>記事下 にコードを埋め込むだけです。

     

ヨメレバにするメリット 

  • 複数のサービスのボタンを設置できる。
  • 見た目がすっきりとしていて読み手側からも見やすい。

あたりだと思いますが、もし今普通にアフィリエイトリンクをペタッと貼ってるだけの方はチャレンジしてみてください!!

 

余談ですが最近世界的に有名なキャリーハンターさんというポールダンサーさんが

元Javaのプログラマーだったと知りテンションが上がりました!

 

ロゴジェネレーターで無料で簡単にブログのロゴを作る

f:id:simpledancer:20170130013241j:plain

 

ブログのヘッダー画像ってブログのイメージにつながりますよね?

「いい記事を書いていたらあまり関係ない」

という気がするようなしないような?

でも、やっぱりヘッダー画像の印象で読みたいか、読みたくないか?

とかサイトの趣向とかって出てくるような気がします。

 

私もいろいろいじってみたんですが(一時期文字を手書き風にしてみたり。)

先日ロゴを簡単に製作できるロゴジェネレーターの存在を知ったのでシェアしたいと思います!

 

 

ロゴジェネレーターで作る流れ

詳しいロゴの作り方は下記オススメサイトなどからジェネレーターの操作方法を確認しながら作ってみてください♪

大まかなはてなブログに貼る流れ

まずは気に入ったフォントを探す

各ジェネレータの仕様にもよりますが、ロゴにしたい文字を入力する

画像データで書き出す(htmlができるものもある)

 

はてなブログに戻って

管理画面の デザイン>カスタマイズ>ヘッダー

で画像をアップロードします。

f:id:simpledancer:20170224161557p:plain

表示設定はタイトルロゴなので下の画像だけ表示。

試しにシンプルなやつにしてヒゲマークをつけてみました

f:id:simpledancer:20170224161712p:plain

こんな感じ。これはこちらのサイトで作りました↓

Squarespace Logo

 

あと別でサイトを今作ってるんですが

f:id:simpledancer:20170224122503p:plain

こういうのも簡単にできます。

これは

Logo and Graphics Generator - Cool Text

で作りました!ロゴの種類豊富です。

 

注意点

ロゴを作る際に日本語だと文字がうまく反映できなかったりするので

その場合は一旦メモ帳などに書いたものをコピペして貼り付けるとうまくいきました!

(日本語対応のロゴのみ!)

オススメサイト

matome.naver.jp

girlsnet.ninpou.jp

ferret-plus.com

まとめ

ちょっと調べるだけでたくさんの種類のジェネレータがありました。

ロゴを作るだけで一気にオリジナリティも出たりブログに愛着がでます!

で、作るの自体が楽しいです♪

webの知識なんてなくても簡単にできるので是非試してみてください!

 

3分でできた!はてなブログにインスタグラムのフィードを表示させる方法

f:id:simpledancer:20170130013241j:plain

 

もともとアメーバブログで作っていた個人のダンスの告知ブログを

せっかくはてなブログproにしたこともあり、はてなに変更しよう!と決めて

新たに1つブログをまた作ることにしてみました。

 

自分のダンスの活動用のブログなので

  • 写真が多い方がいい
  • フォロワーが欲しいのでインスタグラムのフィードを埋め込みたい
  • お問い合わせページを作りたい

というのをまず決めて、インスタを表示する方法を調べてみました。

 

一番簡単な方法

まず、サイドバーに表示をさせたかったのですが、幾つか方法がありましたが

2種類やってみたのですが、一つ目の方が私はうまく表示できなかったのと

InstagramのユーザーID、アクセストークンをInstagramdeveloperから取得しなくてはならなくて結構時間がかかるかなと思ったので(もともとアプリの制作のために取得はしていたのですが)

snapwigitというサイトから作る方が恐ろしく簡単。だったのでご紹介します

 

SnapWidgetでフィードを埋め込む方法

1.まずSnapWidgitにアクセスします。

SnapWidget | Instagram Widget

ログインはFBのアカウント持ってたら色々入力しなくて済むので楽。

f:id:simpledancer:20170219113548p:plain

2.ログインしたら、Get Your Free Widgetを押して自分のインスタアカウント名を入れます。あと希望の設定を入れていきます。私はもともとの設定をとりあえず変えずに。

f:id:simpledancer:20170219113845p:plain

 

3.

表示形式が色々出てくるので

私は文章とかはいらないので写真のみの

3段表示で見やすくしたかったのでGRIDを選択しました。そしてGetwidgetをポチります。

f:id:simpledancer:20170219114148p:plain

4.そのあと貼り付け用のコードが生成されるのでそれをコピーして自分のはてなブログの デザイン>カスタマイズ>サイドバー>モジュールの追加>

でHTMLを選択してコードを貼り付け→適用。

f:id:simpledancer:20170219114534p:plain

こんな感じで表示が成功しました!

表示数を増やしたければ2のLayoutの数字を変更したりすると良いです。

ITエンジニアの無料カウンセリング【ポテパンフリーランス】

参考にさせていただいたブログ

 

もう少し時間がかかるかなと思ったのですが、意外にもあっけなく簡単に終わりました。

参考にさせていただいたブログはこちらです↓すごくわかりやすかったです!

www.mukaikaze.net

railsチュートリアル始めました②

f:id:simpledancer:20170206120749j:image

 

昨日は近所のカフェで大好きなカフェラテ飲みながらチュートリアルをやってました。

wifiあるしこじんまりしててオシャレで店員さんが丁寧。時々行くお店。

simpledancer.hatenablog.com

1章は簡単に10分くらいで終わるかなあ〜なんて思ってたらgemfileのところでちょっと戸惑ったりサーバー接続が良くわかんなかったりでちょっと時間かかってしまいました。

railstutorial.jp

1章のgit,herokuのあたりは今割愛します。これはこれでややこしいので自分で整理するためにも別でまた書きます。

今日は2章〜のToyアプリに入っていきたいと思います。

第2章Toyアプリケーション

Railsアプリケーションの基本的な仕組みを体験するために、別のプロジェクトを作成します。 この章のおもちゃのアプリ (toyapp) では、scaffold (コラム 1.2) を使って短時間でコードを自動生成します。ただしscaffoldで自動生成したコードは非常に読みづらいので、2では自動生成コードの解説は行いません。その代わり、生成されたURI (いわゆるURLs)5 をWebブラウザで確かめるだけにします。

 では、実際にToyappをやっていきます!

 

まずはrails new

1章と同じように新たに rails new toy_appと ターミナルにうちこみ、toy_appフォルダを作成して初めて行きます。

コードは全てrailsチュートリアルにあるので省略します!

Ruby on Rails チュートリアル:実例を使って Rails を学ぼう

gemfileを書き直し、bundle installをしましたが、私はうまくいかなかったので

bundle updateをしてみました。

そうするとsuccessしました。

そのあと使ったことのないBitbucket 

なるものを使うことになるのですが。。なにこれgitとどう違うの?

Bitbucketとは 

私githubは使っていたのですがbitbucketなんて初耳だし!

で、ググってみましたところ

GitHubとBitbucketの比較:Webデザイナーの業務にはBitbucketが向いている | Internet | ウェビンブログ

BitbucketはGitHubと同じ、バージョン管理ツールのリポジトリを預かってくれるホスティングサービスです。

とのことだったので、じゃあgithubでよくないか?と思ったのです。なので私はbitbucketではなくgithubでリポジトリを作ろうと思います。(だって面倒くさいんだもん。。。)と思ったら最初にbitbucketで操作してしまったので

 

Warning: Permanently added 'bitbucket.org,104.192.143.1' (RSA) to the list of known hosts.
Permission denied (publickey).

なんて警告が出た。からおとなしくBitbucketを使ってみます。

1章もまとめてBitbucketでリポジトリ作ったほうがよさげなので1章のappとともにやってみたいと思います! 続く。

 

Wordpressのバージョンをアップデートが必須だった理由

f:id:simpledancer:20170126000720j:plain

 

Twitterで

「いますぐwordpressを更新してください!」と流れてきたました。

 

大至急】WordPressを至急最新版に。いまちょっと検索したら世界で何十万、何百万規模でやられています。

何のこっちゃ〜?と思ったら

WordPress の脆弱性対策について

最終更新日:2017年2月7日

※追記すべき情報がある場合には、その都度このページを更新する予定です。

概要

WordPress.org が提供する WordPress は、オープンソースのCMS(コンテンツマネジメントシステム)です。
WordPress には、REST API の処理に起因する脆弱性が存在します。

 

本脆弱性が悪用された場合、遠隔の第三者によって、サーバ上でコンテンツを改ざんされる可能性があります。

2日ほど遅れてアップデートしました!

私自身のサイトは特に問題なく!

なぜバージョンアップが必要だったのか

 

問題は前のバージョン4.7.0or 4.7.1に脆弱性があり

細工したリクエストをwordpressのサーバに送り投稿内容が改ざんされる可能性があるとのことでした。

 

私のサイトが急にアダルトサイトとかになってたら確かに嫌かも閲覧数増えそうだけど(w)

個人のサイトが攻撃されることは稀でしょうが企業のホームページなんかだと確かに大変な損害ですもんね!

 

以前の意識と変わったこと

私だけかもしれませんが、前までは

「バージョンアップをしてください」って表示が出ても

放置or理由見ずに更新をしてました。

それがちゃんと公式サイトまでしっかり読んで更新するようになりました。(成長)

そんな意識の変化があったなあ〜なんて自分に感心してみました。(普通の人は当たり前にやってることかもしれないけど!)

 

WordpressはIT音痴にはハードルが高めだけど・・・

tabibit.net

サイトの中に経歴を入れてみましたが

レイアウトが下手だし

思うようにいかない!!!!

IT音痴だけど、本当にちょとずつちょっとずつカスタマイズできた時の喜びは

代え難い。でもイライラするけど。子育てのような楽しさ?(産んだことないけど)

地道にちょこちょこ更新します。。

 

話が逸れましたが

更新まだの方は自分のサイトが変な投稿されないようにバージョンアップしましょう!

simpledancer.hatenablog.com

 

Rails チュートリアル始めました①

f:id:simpledancer:20170130013241j:plain

 

最近railsから離れていたので不安になり

初心者お勧めRailsチュートリアルをやってみようと思います。



railstutorial.jp

www.railstutorial.org

Ruby on RailsチュートリアルはWeb開発者やIT起業家を目指す方向けの優れた入門書として書かれており、Rubyの基礎、HTMLとCSS、データベース、バージョン管理、開発技法などWeb開発のすべてが網羅されています。 本チュートリアルは初心者のみならず、Web開発のベテランにとっても有用です。MVCやREST、ジェネレータ、マイグレーション、ルーティング、ERBなど、Railsフレームワークのコア技術を本チュートリアルでまとめて学ぶことができます。 初心者・ベテランを問わず、Ruby on Railsチュートリアルを最後まで終えることができれば、Rails周辺のさらに高度な内容の書籍、ブログ、スクリーンキャストなどを読み解く力を身に付けられます4 

 私はcloud9で開発をすることにしました。ローカル開発環境も一応整ってはいるのですが、cloud9の方が慣れたので、まずはcloud9からやってみます。

simpledancer.hatenablog.com

このrailsチュートリアルでは13章の中で3つのアプリが作れるようになっていて、まずは最初の第1章での1つ目のアプリについて勉強したことを書いていこうと思います。

まずはworkspaceを作る

cloud9で

workspace→app名→private or publicを選択→rails tutorialのアイコンを選択。

これでrailstutorialのワークスペースができました。

f:id:simpledancer:20170205124010p:plain

railsのフォルダを作成

$ rails _5.0.0.1_ new hello_app

 

とターミナルに入力をするとhello_appのフォルダが生成されました。

フォルダの中にはたくさんのファイルができました!

そのファイルの中のgemfileを開きます。

細かい指示はrailsチュートリアルの中に説明があります。

gemfileを置き換える

リスト 1.5:

のファイルにgemfileを置き換える。

そしてターミナルにbundle installコマンドを実行

私の場合はそこから進まなかったのでbundle updateコマンドも実行しました。

rails serverを立ち上げる

私の場合はcloud9なので

rails s -p $PORT -b $IP 

を実行します。(ローカル開発だとrails s)

チュートリアルだとshareを開く、だったのですが

私の場合ターミナルの中の表示 http://0.0.0.0:8080をクリックすると

f:id:simpledancer:20170205211324p:plain

と無事立ち上がりました。

何度かrailsの演習はしてるものの勝手が違うとこれだけの作業でかなり戸惑いました。

ちなみにサーバーを切断したい場合は

Ctr+cでサーバーが切断できます。

Hello Worldを表示する

1.Applicationコントローラに

 def hello
    render html: "hello, world!"
  end

を追加する。

2.config/routes.rbファイルにを打ち込む。

 root 'application#hello'

そしてまたサーバーを立ち上げる。

f:id:simpledancer:20170205215423p:plain

表示がでました!

 

チュートリアルサイトではこの後gitについて触れていますがgitについては別のブログで書いてみます。未だに慣れません。。

rails自体が久しぶりなのもありで結構hello worldまで時間がかかってしまいました(泣)

引き続きtutorialの実行のブログも同時進行していきたいと思います!

Poledanceのwebsiteをwordpressで構築してます!しかし、、レイアウトがごちゃごちゃしてしまってかなり見にくい。。。こちらのカスタマイズも頑張ります♪

tabibit.net

はてなブログで目次を表示をやってみた。

f:id:simpledancer:20170130013241j:plain

 

 

今日ブログを見てもらって色々アドバイスをいただいたのですが、その中で

「目次を作ったほうがいいです」と言っていただいたのでつけてみました!

 

staff.hatenablog.com

目次を自動生成する

f:id:simpledancer:20170130011426p:plain

この「見たまま」記法の状態で 目次のアイコンをポチッとすると

[:contents]と記述されます。

そのあとに目次にしたい内容が自動生成されますが

内容のタイトルを必ず大見出し・中見出し・小見出しで作らないと表示してくれません。

でも、思っていた以上に簡単にできちゃいました。

 

 目次と言う文字を表示する

 ただ「目次」という文字を表示するにはコードをつけたさなくてはいけないようです。

kotublog.hatenablog.com

こちらのブログを参考にさせていただきました!

.table-of-contents:before {
content: "目次";
font-size: 20px;
font-weight: bold;
}

というcssを書きます。

管理画面から

PCだとデザイン>カスタマイズ>デザインCSSの所に埋め込めば表示されます。

スマホ版だとスマホマークの方を選んで>記事>記事上

です。

f:id:simpledancer:20170130013623j:plain

表記してみると、やはり目次があるのと無いのと印象が違いました。ちょっとわかりやすいかも。確かに本にも必ず目次がありますし。

今後の課題

  • マークダウン記法でコードを書く
  • プロフィールをちゃんと書く(多少のストーリー性)
  • FBの連絡先追加→これに関してはちょっと保留です。Twitterでとりあえずフィードを埋め込んでるのでFBはたさないかもです。

カスタマイズもなかなかうまく思うようにいかなかったりで前途多難ですがゆるゆる進めていこうと思います。

 

今日はプログラミングのオンラインの勉強会で色々参考になりました!

時々こうやってダイレクトに意見を聞くのも大事ですね〜。カスタマイズに精を出しすぎてプログラミングが疎かになってるのでちょいちょい頑張ります♪

ちなみに背景色を変えてみましたが、見やすいのか見にくいのか自分でやっているとよくわからなくなってきました。。

久しぶりに数ヶ月前のブログを読んでみた。↓

私がプログラミングを始めた理由☆ - アスリート系ですがプログラミング始めました。

 

 

 

意外と簡単!Wordpressの見出しをカスタマイズ♪

f:id:simpledancer:20170126000720j:plain

 

やっとワードプレスの見出しをカスタマイズしました!(まだ完了ではありませんが)

とりあえず3パターン作ってみました。

f:id:simpledancer:20170125235214p:plain

こんな感じ。

テキストは

<h2 id="danraku2">見出し2</h2>
<h3 id="danraku3">見出し3</h3>
<h4 id="danraku4">見出し4</h4>

こういう感じになってます。

 

ステップ的にはとっても簡単でした!(※以前貼っていたリンクが無効になっていたので別リンクを貼ります!)

 

affiliate150.com

必要なのは4ステップ

step1:

2つのプラグイン

  • AddQuicktag
  • custum css

をインストール

step2

AddQuicktagにh2,h3など必要なものを入れていく

step3

外観>カスタムCSS に移動して自分の表示させたいcssのコードを入れていく

www.keni-customize.net

ここに11種類の見出しのサンプルコードがあるのでそれをまずは入れてみる(色などは後で変更しましょう)

step4:

cssを保存し、wordpressの記事を書く際、見出しを表示したいところで

f:id:simpledancer:20170126000059p:plain

入れたい見出し番号とquicktagsの所を変更h2,h3など。

※意外とずれてしまったり表示が外れてしまったりするので、一度ビジュアル→テキストでタグの中にちゃんと見出しの文言が入っているかどうか確認してプレビューしてから公開しましょう。

 

今後の課題

見出しがカスタマイズできたので

  • フォントを変更して見やすくする(今微妙な明朝体?)
  • サイドバーが見にくいので整理して画像を入れたり見やすくする。
  • 見出しの色を変更する。
  • ソーシャルのアイコンを変更する。

カスタマイズして表示出来ていくのが楽しいです。

wordpressの方がはてなブログよりもちょっと面倒くさいですが、引き続き読みやすいサイトになるように続けていきます♪

※サイトをActivello→Simplicity2にテーマを変更したら見出しが若干css崩れました。。

カスタマイズ前途多難。

tabibit.net

 

ナビゲーションバーを均等に配置してリンクを設置する

続き

simpledancer.hatenablog.com

さて続きです!

 

昨日までに見た目(css)とリンクの大元のコードはhtmlに書き込みましたので

f:id:simpledancer:20170120182638p:plain

こんな感じでできましたが、まだこの状態だと左よりになっていて、さらにリンク先が入っていないのでメニューをクリックしても何も出てきません。

 

まずメニューを均等に並べる

デザインCSSを変更していきます。

#menu-content > li > a{
position: relative;
display: block;
height: 100%;
width: 100%;/*ここを追加*/

line-height: 40px;/*2*/
background: #444;/*9*/
color: #fff;/*10*/
font-size: 70%;
text-decoration: none;
z-index: 2;
}

 

そして

#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
width: 20%;/*ここを自分のカテゴリ数を考慮して%を入れる。

私の場合は100/5カテゴリ=20なので20%*/

 

そうすると

f:id:simpledancer:20170121122406p:plain

均等になりました!

 

カテゴリーの中身の変更

ヘッダ<タイトル下

ここのhtmlを変更/追加します。

参考にさせていただいたブログはたくさんカテゴリや子カテゴリがあるのでそれを削除していきます。(私の場合必要なのは今の所5カテゴリ2子カテゴリとして)

 <ul id="menu-content">
        <li>
            <a href="1階層目のリンク">カテゴリ1 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ1-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-3</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-4</a></li>
            </ul>
        </li>

こちらの内容を例えば私の場合だと

<ul id="menu-content">
<li><a href="#">プロフィール</a></li>
<li><a href ="http://simpledancer.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">ブログカスタマイズ</a></li>
<li>
<a href="#">プログラミング <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="http://simpledancer.hatenablog.com/archive/category/Ruby">Ruby</a></li>
<li><a href="http://simpledancer.hatenablog.com/archive/category/JavaScript">Javascript</a></li>

のように変更します。""の中身をカテゴリーのリンク先URLをつけ、hrefタグの間にカテゴリ名を挿入します。

するとカテゴリーのボタンをクリックするとリンク先のURLに飛ぶことができます。

アドセンス張ってる方への注意点

  • Googleアドセンスの上にドロップダウンメニューがかぶさってしまうと、規約違反になってしまい、広告を止められる可能性があります。特にサイドバーの上に広告を貼っている方は、被りやすいので気をつけて下さい。

 

ということなので気をつけながらやりましょう!

スマホ版も改良してみました!

simplelifedancer.hatenablog.com

 

 

 

 

 

 

ナビゲーションバーを配置する(工事中のため途中まで!)

f:id:simpledancer:20170109154750j:plain

 

30記事ほどできてきたのでそろそろナビゲーションバーを作ろうと思います!

まず参考のサイトはこちら

いつも参考にさせていただいています。

 

www.yukihy.com

 

やり方は全てゆきひーさんのブログをそのままコピペさせていただきました。

デザイン>デザインCSSと

デザイン>ヘッダー>タイトル下html

ここの2つにコピペコードを設置すれば反映されます!

もちろんリンクの中身とカテゴリ名は各々のブログのように書き換えます。

 

 

※ただ時間が迫ってきたので一旦中断して微妙なナビゲーションバーが設置されたままですが、この数日中にはカスタマイズ仕切れる予定、、、です。

設置自体は簡単に完了しました。

とてもわかりやすい!!

f:id:simpledancer:20170120182638p:plain

仕事に行かねばならないのでここから先はまた明日。

あ、明日の仮装大賞出てます!ポールダンスの組の1組目の方。

顔緑ですけどね!

www.ntv.co.jp

 

はてなブログcssを変更して5点カスタマイズしました。

f:id:simpledancer:20170113074451j:plain

ブログのカスタマイズとか、以前なんとなくやらずにやっていたのですが、調べてみると無料でたくさんの情報が落ちていることがわかりました!

 

せっかくだからはてなブログproにしたことだし

  • 見出しを綺麗にしたい
  • twitterのフィードを反映させる
  • ヘッダーにメニューバーを作りたい
  • ソーシャルのアイコンを変えたい

など改めてぐぐってみることにしました。

見出しを綺麗にしたい

まず 「はてなブログ pro 見出し カスタマイズ 」で調べてできたこちらのサイト

shiromatakumi.hatenablog.com

ものすごくたくさんの情報が書かれていて言うなれば私の変更したかったところがほぼほぼカバーできていました(最初に出会いたかったブログ)

 

早速デザインでcssを追加しました。

shiromatakumi.hatenablog.com

 

これはもう一個のサイトの方の見出しのcssなのですが

デザインCSSの所に

 

/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #1056a2;
border-bottom: 1px solid #1056a2;
}

を貼り付けました。

そうすると↓

f:id:simpledancer:20170113072612p:plain

こんな感じで大見出しができました。

このコードのh3をh4、h5と変更して記述すると、中身だし、小見出しも変更することができます。

 

自力ではてなだけ見ながらやってたら全然わからなかったところなのでとても助かりました。

ITエンジニアの無料カウンセリング【ポテパンフリーランス】

twitterのフィードを反映させる

 

これは前回やったのでこちら

simpledancer.hatenablog.com

これはproに変更する前にいじってみたのですが、難なくできました。

他のブログサービス「アメブロ」でもフィードを埋め込むことができました(仕様がはてなと違うので、埋め込む時は 「アメブロ twitter 埋め込む カスタマイズ」とかで調べると出て来ます)

 

ヘッダーにメニューバーを作りたい

デザイン→ヘッダー でcss部分に改装を書いていくのですが

hacogaki.hatenablog.com

こちらのブログのグローバルメニューのところが他のブログと違って海外のサイトを参考にされておしゃれな作りになっていたのでメモがてら貼っておきます。

私は今は簡単に

 

nav class="main-navigation">
<div class="menu-toggle">メニュー</div>
<div class="main-navigation-inner">
<ul>
<li><a href="http://simplelifedancer.hatenablog.com/">ホーム</a></li>
<li><a href="#">プロフィール</a></li>
<li>
<a href="#" class="has-child">ミニマリスト</a>
<ul>
<li><a href="#">断捨離系</a></li>
<li><a href="#">人間関係</a></li>
</ul>
</li>
<li>
<a href="#" class="has-child">美容・ダイエット</a>
<ul>
<li><a href="#">アンチエイジング</a></li>
<li><a href="#">食生活</a></li>
</ul>
</li>

</ul>
</div>
</nav>

 

と、こういった感じでシンプルな階層にしていて#部分にそのカテゴリーのURLを貼り付けるとそのカテゴリーのページに行くようになります。

色味とかもっと変更したいです。

f:id:simpledancer:20170113074205p:plain

現在こんな感じでざっくり作りました。

諸々の仕事が終わったらこちらも変更してみようと思ってます。

 

ソーシャルのアイコンを変えたい

f:id:simpledancer:20170113074904p:plain

既存のままでも普通にヘッダー部分のデザイン>記事 に行くとソーシャルアイコンが自動で反映されるボタンがあり、それでもよかったのですが

私は可愛いボタンがよかったので 

cssをカスタマイズすることにしました。

 

ちなみに既存のチェックボタンは外しておきます。

www.yukihy.com

 

参考にさせてもらったブログはこちら。

細かく書かれていて本当に助かりました。

デザインをいじる前に、設定>詳細設定でheadに要素を追加の所に

(Yukihiiさんのブログより)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

 

を追加してからデザインをいじると反映できます。

私はまだスマホ画面の方はやってないのでこれも後日。今PC画面ではSNSボタンが見れます。→ スマホ版も2017年1月18日に変更できました!

www.ituore.com

 

まとめ

前までめんどくさいなあ、と思っていたけれどやりだすと止まらなくて寝るのを忘れてしまいます。まだまだカスタマイズできてない部分がたくさんあるけれど、うまくサイトに反映できた時はめちゃくちゃ嬉しいです。

 

今から成田空港へ向かうのでカスタマイズは現地に着いてから仕事後やります!

 

 

はてなブログProに変更しました!良かった点

f:id:simpledancer:20170106142057j:plain

 

先ほどはてなブログproに変更しました。

ドメインを独自のものに変更するかを迷ったのですが、いろいろサイトを調べていて

まだ流入数も少ないので当分hatenaのドメインでやることにしました。

 

Proに変更して良かった点

1.キーワードリンクがオフにできる。

下線リンクから違うページに飛んじゃうのでブログから離れていっちゃうのを防ぐため

2.アドセンス広告が貼れる。

 元々審査は通っていたのですが。無料版だと貼れなくなってましたので、嬉しい。

3.はてな独自の広告を非表示に出来る。

はてなのアドセンスがデカデカと占拠(ごめんなさい)してたのを消すことができる。

4.使えるツールが増える。

この辺はまた別途。

 

 

まだproに変更したてなのでうまくいくかわかりませんが1年ほどやってみてから独自ドメインには変更してみようかなと思います。

 

いろいろ試しにやってみたいことがあるので、雑記ブログとこのプログラミングブログを分けたいなと思ってます。ソーシャルアイコンを変えてみましたひとまず。

f:id:simpledancer:20170107164250p:plain

ラインボタンはもう一つの雑記ブログには入れたのですが、もともとデフォルトでコピペのPC版だとラインアイコンがなかったのでこっちのブログはまだデフォルトのまま。

アイコンで助かったブログがこちら

【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life

 

今日は出張で移動してるのでその間にいろいろカスタマイズをしてみようと思います。

 

 今後やろうと思っているカスタマイズ

1.メニューバーを作る

2.SNSアイコンを自作する

3.はてなグループに登録する

1/10にミニマリストグループにもう一個のブログ入りました!

4.ヘッダーに画像を挿入する

 

 緩くカスタマイズを楽しみます!

関係ないけど、東京駅で買ったピーナツ最中。

f:id:simpledancer:20170106152415j:image

simpledancer.hatenablog.com

 

 

 

 

 

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

 

 

 

無料ブログでtwitterのフィードを埋め込む方法

 

はてな使ってる人は

「なんだ〜そんなこと??」

と思われるかもしれませんが、

私、twitterとかFBのタイムラインが流れる(サイドバーとかに)あれ、無料ブログでは簡単にできないと思ってたんですけど、

めちゃ簡単にできました。

私ははてなブログとアメブロも使っているのでどちらも出来るかやってみようと思いました。twitterのタイムラインをサイドバーに反映させてみます(はてな無料ブログverとアメブロverやってみました)

 

f:id:simpledancer:20170104114223p:plain

 はてなver.

twitterの公式アカウントから

f:id:simpledancer:20170104114944p:plain

左側のEmbedded Timelineをクリックして

出てきたコードをcopy すると貼り付けるコードがコピーできます。

ただし、自動生成されたコードだとブログに貼ると超ながい!

なのでボタンの上らへんにある set custamization optionを クリックすると

幅を変更できます。そして変更したら、またcopycodeをポチッとすると新しいコードがコピーできます。

はてなのサイドバーに反映させるために

デザイン>🔧マーク>サイドバー>モジュールを追加>HTML>

まで画面を進めると

f:id:simpledancer:20170104120231p:plain

タイトルに例えばtwitter

したの余白にコピーコードを貼り付けて

青い適用ボタンをクリック

 

そうするとタイムラインが反映されます。

 

↓こちらのてつさんのブログを参考にさせていただきました!めちゃわかりやすかったです。

 

www.mutant-tetsu.com

 

アメブロver

 ※コピーコードまでは一緒です。

設定>サイドバー>プラグインの追加>プラグインのところにコピーコードを貼り付け

※サイドバーの配置設定のところで「使用しない機能」のところにフリープラグインが入っていると反映されないので、フリープラグインのボタンをドラッグアンドドロップで使用するの方へ移動させてください。

 

そうすると反映されます。

 

埋め込みタイムライン — Twitter Developers

developersのページにもやり方は書いていますが、各ブログサービスで階層などが違うかもしれないため、コードコピーした後は各ブログのヘルプなどで確認してみてください!

ただアメブロは広告や色が非常に多いのでかなりごちゃごちゃした印象になるため

タイムラインは外してしまいました!(広告多すぎやしませんか?後ピグとか。いらない。。)

 

自分の作ってるwordpressの方ではあまりごちゃっとさせたくないので今の所はフィードは反映させないようにしようと思ってます。

 

Poledance × Trip 

Poledance × Trip

 

 

アイキャッチ画像を追加するだけで一気にサイトがプロっぽくなった

f:id:simpledancer:20170107173134j:plain

 

メリークリスマス!

 

はてなブログを利用してる人はあまりクリスマスって関係なような気がしてならないのは置いておいて。

 

私は23日は仕事で24の明けまでシャンパンの洗礼を受け

24の昼過ぎに起きて湯船にお湯を溜めたまま溢れ出し

ガスは止まるし病院に行く時間なくなるし

バッタバタで

25日の今日は昼間で寝てお昼はコンビニのカフェラテとスーパーのラップサンドです。

スーパーのチープなチキンを買わなくても家で手羽元とか焼いたほうが美味しいし経済的。

 

それは置いておいて。

wordpressのカスタマイズをまたちょこちょこしてるわけですが、

いかんせん素人なものでどうも美しく仕上がらない。色々テーマを変更して今回は

Activelloにして、フォントの色だけちょっとカスタムしました。

 

で、アイキャッチ画像をずーっとつけてなかったので、なんとも殺風景(絶対読まれないブログ!)これはいかん、どうすればいいのか。とおもって。私の好きなブログを運営してる方のを読みながら、アイキャッチを追加してみました。

 

ruka-affiliate.com

ちなみに今回はフォントは私は変えてません。

 

テーマ変更とアイキャッチを追加してみた!

でも、テーマを変更、アイキャッチを追加すると

 

f:id:simpledancer:20161030111645p:plain

とかこんな感じだったのが

 

f:id:simpledancer:20161225161641p:plain

f:id:simpledancer:20161225161710p:plain

 

って感じで(サイドバーが消えちゃったのでガラッガラですが)

スライドできて、アイキャッチがそのまま反映されるのでいい感じになりました。

タイトル文字がどうもシロ文字でhoverの場合でないと目立ちにくいので

まずはアイキャッチですが

 

編集画面の右下に

f:id:simpledancer:20161225162019p:plain

があるので、そこで設定

f:id:simpledancer:20161225162123p:plain

でアイキャッチ画像を設定にすると

 

f:id:simpledancer:20161225163425p:plain

と、このように、

左がアイキャッチをつけてないバージョン

右がアイキャッチをつけたバージョン。

 

やっぱり画像がある方が、なになに、ってなりますよね。

wordpressカスタマイズ初めて2ヶ月目ですがちっともわかってませんでした〜

 

相変わらずのIT音痴。

 

サイドバーがテーマを変えたら消えちゃった〜のでまた引き続きカスタマイズします。

 

Poledance × Trip 

Poledance × Trip

 

 

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